@@ -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