Skip to content

Commit 569d6ab

Browse files
committed
removed code from readme, moved to separate repo
1 parent 19426fd commit 569d6ab

1 file changed

Lines changed: 0 additions & 193 deletions

File tree

README.md

Lines changed: 0 additions & 193 deletions
Original file line numberDiff line numberDiff line change
@@ -54,199 +54,6 @@ Check out the live [demo](https://harshdoesdev.github.io/bottlecap-demo/).
5454

5555
![Demo](https://github.com/harshsinghdev/bottlecap/raw/gh-pages/images/demo-screenshot.png)
5656

57-
**game.js:**
58-
```javascript
59-
import * as Bottlecap from 'bottlecap';
60-
61-
class Player {
62-
constructor(ctx, assets) {
63-
this.speed = 100;
64-
this.sprite = new Bottlecap.AnimatedSprite(ctx, assets.image.playerSprite, 6, 1, 0, 0, 64, 64);
65-
this.sprite.addAnimation("default", 0, 5, 80);
66-
this.sprite.play("default");
67-
}
68-
69-
update(dt, direction) {
70-
this.sprite.position.x += direction.x * this.speed * dt;
71-
this.sprite.position.y += direction.y * this.speed * dt;
72-
73-
this.sprite.flipX = direction.x === -1;
74-
this.sprite.update(dt);
75-
}
76-
}
77-
78-
class Coin {
79-
constructor(ctx, assets, x, y) {
80-
this.visible = true;
81-
this.sprite = new Bottlecap.AnimatedSprite(ctx, assets.image.coin, 18, 1, x, y, 16, 16);
82-
this.sprite.addAnimation("spin", 0, 8, 30);
83-
this.sprite.play("spin");
84-
}
85-
86-
update(dt) {
87-
this.sprite.update(dt);
88-
}
89-
}
90-
91-
class MyGame extends Bottlecap.Game {
92-
constructor() {
93-
super();
94-
this.score = 0;
95-
this.loaded = false;
96-
this.coins = [];
97-
this.player = null;
98-
this.assets = null;
99-
}
100-
101-
init() {
102-
this.setupCanvas();
103-
this.setupCamera();
104-
this.loaderSetup();
105-
console.log('Game Initialized');
106-
}
107-
108-
setupCanvas() {
109-
this.canvas = Bottlecap.createCanvas(window.innerWidth, window.innerHeight, 'lightgreen');
110-
this.ctx = this.canvas.getContext('2d');
111-
this.ctx.imageSmoothingEnabled = false;
112-
document.body.appendChild(this.canvas);
113-
}
114-
115-
setupCamera() {
116-
this.camera = new Bottlecap.Camera(this.ctx);
117-
}
118-
119-
loaderSetup() {
120-
this.loader = new Bottlecap.Loader();
121-
this.loader.on('load', this.onLoadingComplete.bind(this));
122-
this.loader.on('error', this.onLoadingError.bind(this));
123-
124-
this.loader
125-
.addImage('coin', './coin.png')
126-
.addImage('playerSprite', './player.png')
127-
.addSound('coinpickup', './coin-pickup.wav')
128-
.load();
129-
}
130-
131-
onLoadingComplete(assets) {
132-
this.assets = assets;
133-
this.createPlayer();
134-
this.createCoins();
135-
this.loaded = true;
136-
}
137-
138-
onLoadingError(error) {
139-
console.error('Loading error:', error);
140-
this.loaded = false;
141-
}
142-
143-
createPlayer() {
144-
this.player = new Player(this.ctx, this.assets);
145-
}
146-
147-
createCoins() {
148-
for (let i = 0; i < 20; i++) {
149-
const x = Bottlecap.Utils.randomInt(100, this.canvas.width - 100);
150-
const y = Bottlecap.Utils.randomInt(100, this.canvas.height - 100);
151-
const coin = new Coin(this.ctx, this.assets, x, y);
152-
this.coins.push(coin);
153-
}
154-
}
155-
156-
update(dt) {
157-
if (!this.loaded) return;
158-
159-
const direction = Bottlecap.Keyboard.getDirection();
160-
this.player.update(dt, direction);
161-
162-
this.coins.forEach(coin => {
163-
if (coin.visible && this.checkCoinCollision(coin)) {
164-
coin.visible = false;
165-
this.score += 10;
166-
Bottlecap.Sound.play(null, this.assets.sound.coinpickup);
167-
}
168-
coin.update(dt);
169-
});
170-
171-
this.camera.lookAt(this.player.sprite.position.x, this.player.sprite.position.y);
172-
this.camera.update(dt);
173-
}
174-
175-
checkCoinCollision(coin) {
176-
return coin.visible && Bottlecap.Collision.rectInRect(
177-
coin.sprite.position.x, coin.sprite.position.y, coin.sprite.size.x, coin.sprite.size.y,
178-
this.player.sprite.position.x, this.player.sprite.position.y, this.player.sprite.size.x, this.player.sprite.size.y
179-
);
180-
}
181-
182-
render() {
183-
if (!this.loaded) {
184-
this.renderLoadingError();
185-
return;
186-
}
187-
188-
this.clearCanvas();
189-
this.camera.attach();
190-
this.renderCoins();
191-
this.player.sprite.render();
192-
this.camera.detach();
193-
194-
this.renderScore();
195-
}
196-
197-
clearCanvas() {
198-
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
199-
}
200-
201-
renderCoins() {
202-
this.coins.forEach(coin => {
203-
if (coin.visible) coin.sprite.render();
204-
});
205-
}
206-
207-
renderScore() {
208-
this.ctx.fillStyle = "#000";
209-
this.ctx.font = "32px sans-serif";
210-
this.ctx.fillText(`Score: ${this.score}`, 32, 32 + 20);
211-
}
212-
213-
renderLoadingError() {
214-
this.clearCanvas();
215-
this.ctx.font = "32px sans-serif";
216-
this.ctx.fillStyle = '#ff0000';
217-
const text = "Error loading assets!";
218-
const textWidth = this.ctx.measureText(text).width;
219-
this.ctx.fillText(
220-
text,
221-
this.canvas.width / 2 - textWidth / 2,
222-
this.canvas.height / 2
223-
);
224-
}
225-
}
226-
227-
Bottlecap.DOM.ready(() => {
228-
const game = new MyGame();
229-
game.run();
230-
});
231-
```
232-
233-
**index.html:**
234-
```html
235-
<!DOCTYPE html>
236-
<html lang="en">
237-
<head>
238-
<meta charset="UTF-8">
239-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
240-
<title>My Game</title>
241-
</head>
242-
<body>
243-
244-
<script type="module" src="./game.js"></script>
245-
246-
</body>
247-
</html>
248-
```
249-
25057
## Games made using bottlecap
25158

25259
- [Hydrogen](https://hypervoid.itch.io/hydrogen)

0 commit comments

Comments
 (0)