How to Build an HTML5 Game in Half a day
0 likes903 views
The document describes how to build an HTML5 game in half a day using processing.js. It discusses HTML5 features like <canvas> for 2D drawing. It then walks through building a sample game, including setting up global variables, classes for game objects, and a draw loop to continuously update and render the game. Code snippets are provided for setting up <canvas>, using processing.js, and implementing classes for the player character and blocks. The document encourages thinking of a game idea and sharing your work.
![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](https://image.slidesharecdn.com/html5game-110808222516-phpapp02/85/How-to-Build-an-HTML5-Game-in-Half-a-day-8-320.jpg)
How to Build an HTML5 Game in Half a day
- 1. How to Build an HTML5 Game in Half Day with help of processing.js Wu Zhe (wu@madk.org) Sep 3, 2010 Wu Zhe (wu@madk.org) Building an HTML5 Game in Half Day
- 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. <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. 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/reference Wu Zhe (wu@madk.org) Building an HTML5 Game in Half Day
- 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.html Wu Zhe (wu@madk.org) Building an HTML5 Game in Half Day
- 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. let’s build an HTML5 game – logic OO class Person class Block Wu Zhe (wu@madk.org) Building an HTML5 Game in Half Day
- 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. 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. 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. Summary think of a game idea (what to build) build get better artwork spread the world Wu Zhe (wu@madk.org) Building an HTML5 Game in Half Day
- 12. Source code source code at http://nuwa.madk.org/game/floor.pjs Wu Zhe (wu@madk.org) Building an HTML5 Game in Half Day