Build your own game with html5

1,459 views

Published on

Basic knowledge about build a game using canvas. It's cover basic sprite animation and collision detection. Also include a game example.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,459
On SlideShare
0
From Embeds
0
Number of Embeds
55
Actions
Shares
0
Downloads
186
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Build your own game with html5

  1. 1. BUILD YOUR OWN GAME WITH HTML5 Yohan Totting ThinkRooms Studio @tyohanSaturday, February 2, 13
  2. 2. HALO Yohan Totting Application Developer Founder of ThinkRooms Studio FOWAB & HackerspaceBDG InitiatorSaturday, February 2, 13
  3. 3. HTML5 GAME COMPONENTSSaturday, February 2, 13
  4. 4. AUDIO HTML5 Audio + Audio APISaturday, February 2, 13
  5. 5. CANVAS canvas = document.getElementById(canvas); ctx = canvas.getContext(2d); OR <canvas id=”game-canvas”></canvas>Saturday, February 2, 13
  6. 6. SPRITE sprite = new Image(); sprite.src = sprite.png; ctx.drawImage(sprite,srcX,srcY,frameWidth,frameHeight,frameX,frame Y,renderWidth,renderHeight); frameSaturday, February 2, 13
  7. 7. ANIMATING SPRITE sprite = new Image(); sprite.src = sprite.png; function update(){ //check if object is moving if(moving===true){ //move to next frame srcX=srcX+frameWidth; //reset frame when it reach last frame if(srcX>srcWidth){ srcX=0; } } } function draw(){ ctx.drawImage(sprite,srcX,srcY,srcWidth,srcHeight,frameX,frameY,f rameWidth,frameHeight); }Saturday, February 2, 13
  8. 8. BOX BoxA COLLISION BoxB DETECTION if((BoxA.x + BoxA.width >= BoxB.x) && (BoxB.x + BoxB.width >= BoxA.x) && ((BoxA.y + BoxA.height >= BoxB.y) && (BoxB.y + BoxB.height >= BoxA.y)){   hit(); }Saturday, February 2, 13
  9. 9. FLOW Setup() CheckCollation() Update() UpdateScore() Animate() Draw()Saturday, February 2, 13
  10. 10. GAME ENGINE LimeJSSaturday, February 2, 13
  11. 11. TRY IT! http://j.mp/fdhtml5game https://blog.mozilla.org/labs/2012/07/webgamestub- or-so-you-want-a-quick-start-on-a-2d-canvas-game/Saturday, February 2, 13
  12. 12. CREATE YOUR OWN GAME! Yohan Totting ThinkRooms Studio @tyohan tyohan@thinkrooms.comSaturday, February 2, 13

×