html5全接触（二）--BounceBall小游戏简易教程
最近一段时间都比较忙，好久没更新博客了，遵循着“时间就像那啥，挤挤总会有的”的原则，承接着上一篇html5先关的博文，继续我们的趣味html5之旅。
前一段时间很流行用html5写小游戏，当了解了一些常用的api之后，你会发现，写一些简单的小游戏自娱自乐也不会那么困难，当然，做逻辑和界面复杂的游戏除外。以下会提供一个弹球小游戏的简单教程，希望感兴趣的朋友能在编码中找到一点乐趣。
<!--?注：以下demo木有神马高深的东东，大牛们觉得无味请略过。同时，由于砖块厚度与弹球的纵向变换单元的比例不协调，故没做砖块的侧向碰撞监测..?-->?
<!DOCTYPE html><html><head><style>body {margin:0; position:absolute; width:100%; height:100%}canvas {display: block; margin: 20px auto; border: 2px solid #333}.info {width: 600px; margin: 0 auto; color: #666; text-align:center}</style><script>var Bombule = function () {var ctx, x = 295, y = 385, dx = 2, dy = 4, W, H, rd = false, ld = false, pause = true, X, B = {},rowColor = ["#FF1C0A", "#FFFD0A", "#00A308", "#0008DB", "#EB0093", "#00A308", "#0008DB", "#EB0093"];var init = function (id) {var canvas = document.getElementById(id);W = canvas.width || 600;H = canvas.height || 400;X = (W-100)/2;ctx = canvas.getContext('2d');this.initBricks(8, 8);this.run();this.evListen();}init.prototype = {run : function () {var _this = this;this.st = setInterval(function () {_this.draw();}, 16)},draw : function () {this.clear();this.circle(x, y, 8);if (rd && !pause && X < W-this.paddleW) {X += 10} else if (ld && !pause && X > 0) {X -= 10}this.paddle(X, 100);this.drawBricks();this.hitBrick(x, y);if (x + dx > W || x + dx < 0) dx = -dx;if (y + dy < 0) {dy = -dy} else if (y + dy > H-10) {x > X-4 && x < X+this.paddleW+4 ? this.hitPaddle(x) : this.stop();}if (!pause) {x += dx;y += dy;}},clear : function () {ctx.clearRect(0, 0, W, H);},circle : function (x, y, r) {ctx.beginPath();ctx.arc(x, y, r, 0, Math.PI*2, true);ctx.closePath();ctx.fill();},rect : function (x, y, w, h) {ctx.beginPath();ctx.rect(x, y, w, h);ctx.closePath();ctx.fill();},stop : function () {clearInterval(this.st);this.showInfo('Game Over')},paddle : function (l, w) {this.paddleW = w;this.rect(l, H-10, w, 10);},evListen : function () {document.addEventListener('keydown', function (e) {if (e.keyCode == 39) rd = true;else if (e.keyCode == 37) ld = true;}, false);document.addEventListener('keyup', function (e) {if (e.keyCode == 39) rd = false;else if (e.keyCode == 37) ld = false;else if (e.keyCode == 32) pause = !pause ? true : false;}, false);},initBricks : function (row, col) {B.row = row;B.col = col;B.w = W/col - 1;B.h = 15;B.pad = 1;B.bricks = new Array(row);for (var i=0; i<row; i++) {B.bricks[i] = new Array(col);for (var j=0; j<col; j++) {B.bricks[i][j] = 1;}}},drawBricks : function () {for (var i=0; i<B.row; i++) {ctx.fillStyle = rowColor[i];for (var j=0; j<B.col; j++) {B.bricks[i][j] === 1 && this.rect(j*(B.w+B.pad) + B.pad, i*(B.h+B.pad)+B.pad, B.w, B.h);}}},hitBrick : function (x, y) {var rh = B.h + B.pad,cw = B.w + B.pad,row = Math.floor(y/rh),col = Math.floor(x/cw);if (y < B.row*rh && row >= 0 && col >= 0 && B.bricks[row][col] === 1) {dy = -dy;B.bricks[row][col] = 0;}},hitPaddle : function (x) {dy = -dy;dx = 10 * ((x-(X+this.paddleW/2))/this.paddleW);},showInfo : function (text) {ctx.font = '60pt Calibri';ctx.fillStyle = '#999';ctx.fillText(text, 130, 200);}}return init;}();onload = function () {new Bombule('canvas');}</script></head><body><canvas id="canvas" width="600" height="400">Your Broswer don't support html5 canvas</canvas><p autoplay="true">Your browser does not support the audio element.</audio>--></body></html>?<!DOCTYPE html><html><head><style>body {margin:0; position:absolute; width:100%; height:100%}canvas {display: block; margin: 20px auto; border: 2px solid #333}</style> <script>var init = function () {var canvas = document.getElementById('canvas'),ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(200, 200, 8, 0, Math.PI*2, true);ctx.closePath();ctx.fill();}onload = init;</script></head><body><canvas id="canvas" width="600" height="400">Your Broswer don't support html5 canvas<canvas></body></html>?