Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to Build an HTML5 Game in Half a day

2,368 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×