I’m using one of the most important additions in HTML5: the <canvas> tag. This tag opens up a really nice 2d context for developers to implement programatic graphic experiences similar to those found in Flash, although with a lot less functionality. The canvas element I’m using looks like this:
<canvas id="board" width="640" height="480"></canvas>
board = document.getElementById('board'); context = board.getContext('2d'); context.fillStyle = get('background'); context.fillRect(0, 0, width, height); context.fillStyle = get('hud'); context.font = get('hudfont'); context.fillText('lives: ' + lives, 10, 15, 100); context.fillText('score: ' + score, 10, 30, 100); context.fillText('level: ' + level, 10, 45, 100); context.fillText('speed: ' + bs, 10, 60, 100);
You get the idea.
My implementation is really simple, and could have a couple of bugs given the ‘optimizations’ I’ve made to keep the code clean and short. It only has 10 levels; if you finish all of them you are sent back to the first one, but now the ball moves a lot faster. The levels are defined in this manner:
case 1: br = '\n\n\n\n10010101\n\n\n00101010\n\n101001\n\n0101001'; break; case 2: br = '\n\n\n\n10101011\n\n10101001\n00001\n\n100010020'; break; case 3: br = '\n\n\n\n10211012\n\n10100022\n0010001\n0000112\n11000000\n21'; break; case 4: br = '\n\n\n\n12121212\n00022000\n\n\n01010101\n\n01100110'; break; case 5: br = '\n\n\n\n33003300\n33003300\n33003302'; break; case 6: br = '\n\n\n\n12345543\n11110000\n\n\n11111114\n\n33003300'; break; case 7: br = '\n\n\n\n33331232\n00003002\n00302010\n\n\n12341234\n3300033\n0033\n0033\n0022'; break; case 8: br = '\n\n\n00500505\n00500505\n12121212\n21212121\n\n\n320032\n10005\n\n22\n2200033\n11'; break; case 9: br = '\n\n\n\n123\n\n1230044\n\n4400055\n\n33333333\n\n54354311\n1000001'; break; case 10: br = '\n\n\n\n15555555\n15555555\n15555555\n\n55555551\n55555551\n55555551'; break;
Each level is a string of numbers. 0 means no brick, 1 means a brick that needs one hit toÂ disappear, 2 means two hits, 3 three, etc. Let me know if you have a level suggestion and I will include it. As I’m not using any external libraries it may not work on all browsers. I’ve only tested it on Chrome.
Click here to play the game. It may work on your tablet or HTML5 enabled phone: touching on the right side of the page moves the pad right, and touching the left side moves it left. Or you can use the arrow keys on your PC. Or you can close your eyes and wish the pad to move. Let me know if that one works, as I’ve not tested it yet.