How to Build an HTML5 Game in Half Day                      with help of processing.js                                    ...
What’s new about HTML5?             semantic tags: <nav>, <footer>, <section> ...             multimedia:             <vid...
<canvas>      HTML:        <canvas id="example" width="200" height="200"></canvas>      JS:        var example = document....
processing.js             a port of Processing programming language to Javascript             a thin wrapper of 2D js draw...
let’s build an HTML5 game             HTML5 clone of a classic game I built during a weekend             play at http://nu...
let’s build an HTML5 game – code structure             some global variables             setup()             draw()Wu Zhe ...
let’s build an HTML5 game – logic             OO             class Person             class BlockWu Zhe (wu@madk.org)Build...
let’s build an HTML5 game – inside draw()      void draw() {        background(#223322); // clear screen        // update ...
let’s build an HTML5 game – inside class Person      methods:             Person(float x, float y, float vx, float vy, byt...
let’s build an HTML5 game – inside class Block      methods:             Block(float x, float y, float vy, byte type)     ...
Summary             think of a game idea (what to build)             build             get better artwork             spre...
Source code      source code at      http://nuwa.madk.org/game/floor.pjsWu Zhe (wu@madk.org)Building an HTML5 Game in Half...
Upcoming SlideShare
Loading in …5
×

How to Build an HTML5 Game in Half a day

2,124
-1

Published on

Talk given by Wu Zhe in the first meeting of China Clojure Users Group.

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
2,124
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
53
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to Build an HTML5 Game in Half a day

  1. 1. How to Build an HTML5 Game in Half Day with help of processing.js Wu Zhe (wu@madk.org) Sep 3, 2010Wu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  2. 2. What’s new about HTML5? semantic tags: <nav>, <footer>, <section> ... multimedia: <video>, <audio> 2D drawing: <canvas>Wu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  3. 3. <canvas> HTML: <canvas id="example" width="200" height="200"></canvas> JS: var example = document.getElementById(’example’); var context = example.getContext(’2d’); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);Wu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  4. 4. processing.js a port of Processing programming language to Javascript a thin wrapper of 2D js drawing operations on <canvas> API doc: http://processingjs.org/referenceWu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  5. 5. let’s build an HTML5 game HTML5 clone of a classic game I built during a weekend play at http://nuwa.madk.org/game/floor.htmlWu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  6. 6. let’s build an HTML5 game – code structure some global variables setup() draw()Wu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  7. 7. let’s build an HTML5 game – logic OO class Person class BlockWu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  8. 8. let’s build an HTML5 game – inside draw() void draw() { background(#223322); // clear screen // update and redraw every block for (byte i = blks.length-1; i >= 0; i--) { blks[i].move(); if (blks[i].outofscreen()) { blks[i] = new Block(random(width), height, blk_speed, p.level += 1; } blks[i].render(); } p.move(); p.update_mode(); p.render(); // update person }Wu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  9. 9. let’s build an HTML5 game – inside class Person methods: Person(float x, float y, float vx, float vy, byte on blk) boolean x on blk(byte i) boolean person on blk(byte i) void update mode() void step into air() void land on blk(byte i) void move() void render()Wu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  10. 10. let’s build an HTML5 game – inside class Block methods: Block(float x, float y, float vy, byte type) void decrease timer() boolean outofscreen() void move() void render()Wu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  11. 11. Summary think of a game idea (what to build) build get better artwork spread the worldWu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  12. 12. Source code source code at http://nuwa.madk.org/game/floor.pjsWu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×