Build your own game with html5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Build your own game with html5

on

  • 1,367 views

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

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

Statistics

Views

Total Views
1,367
Views on SlideShare
1,331
Embed Views
36

Actions

Likes
0
Downloads
180
Comments
0

3 Embeds 36

https://twitter.com 30
http://www.linkedin.com 5
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Build your own game with html5 Presentation Transcript

  • 1. BUILD YOUR OWN GAME WITH HTML5 Yohan Totting ThinkRooms Studio @tyohanSaturday, February 2, 13
  • 2. HALO Yohan Totting Application Developer Founder of ThinkRooms Studio FOWAB & HackerspaceBDG InitiatorSaturday, February 2, 13
  • 3. HTML5 GAME COMPONENTSSaturday, February 2, 13
  • 4. AUDIO HTML5 Audio + Audio APISaturday, February 2, 13
  • 5. CANVAS canvas = document.getElementById(canvas); ctx = canvas.getContext(2d); OR <canvas id=”game-canvas”></canvas>Saturday, February 2, 13
  • 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. 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. 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. FLOW Setup() CheckCollation() Update() UpdateScore() Animate() Draw()Saturday, February 2, 13
  • 10. GAME ENGINE LimeJSSaturday, February 2, 13
  • 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. CREATE YOUR OWN GAME! Yohan Totting ThinkRooms Studio @tyohan tyohan@thinkrooms.comSaturday, February 2, 13