html5全接触（2）-BounceBall小游戏简易教程 _HTML/CSS

html5全接触（二）--BounceBall小游戏简易教程

最近一段时间都比较忙，好久没更新博客了，遵循着“时间就像那啥，挤挤总会有的”的原则，承接着上一篇html5先关的博文，继续我们的趣味html5之旅。

前一段时间很流行用html5写小游戏，当了解了一些常用的api之后，你会发现，写一些简单的小游戏自娱自乐也不会那么困难，当然，做逻辑和界面复杂的游戏除外。以下会提供一个弹球小游戏的简单教程，希望感兴趣的朋友能在编码中找到一点乐趣。

?

<!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 class="info">空格-开始/暂停 | 方向键控制挡板左右</p>
<!--<audio src="http://www.w3schools.com/html5/horse.ogg" 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>