How to Build an HTML5 Game in Half a day
Upcoming SlideShare
Loading in...5
×
 

How to Build an HTML5 Game in Half a day

on

  • 2,117 views

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

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

Statistics

Views

Total Views
2,117
Views on SlideShare
2,117
Embed Views
0

Actions

Likes
0
Downloads
45
Comments
0

0 Embeds 0

No embeds

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

How to Build an HTML5 Game in Half a day How to Build an HTML5 Game in Half a day Presentation Transcript

  • 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
  • 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
  • <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
  • 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
  • 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
  • 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
  • let’s build an HTML5 game – logic OO class Person class BlockWu Zhe (wu@madk.org)Building an HTML5 Game in Half Day
  • 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
  • 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
  • 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
  • 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
  • Source code source code at http://nuwa.madk.org/game/floor.pjsWu Zhe (wu@madk.org)Building an HTML5 Game in Half Day