最近一段时间都比较忙，好久没更新博客了，遵循着“时间就像那啥，挤挤总会有的”的原则，承接着上一篇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 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>
分享到：
相关推荐
【标题】：“英语全接触---免费的英文辅导老师” 这个标题暗示了我们即将探讨的是一个与英语学习相关的资源，可能是在线课程、电子书、音频教程或者是其他形式的辅导材料，而且是免费提供的。"全接触"这个词组意味...
《.NET程序设计全接触--c#语言描述》是一本深入浅出的.NET技术教程，主要针对C#语言进行详细讲解。作者在2001年以.NET Beta2为基础撰写此书，是国内早期深入研究.NET技术的专家之一。书中包含大量实例代码，旨在帮助...
### SQL注入漏洞全接触——入门篇 #### 一、什么是SQL注入？ SQL注入是一种常见的网络安全攻击方式，通过在Web应用程序的输入字段中插入恶意SQL语句来操纵后端数据库的行为。这种攻击通常发生在应用程序没有对用户...
总体而言，《.NET程序设计全接触——C#语言描述》是针对初学者和有一定经验的开发者的一本实用教程，它不仅讲解了.NET的基本概念，还提供了实际操作的指导，帮助读者快速掌握.NET编程和Web Service的开发技巧，从而...
《电脑经典问题全接触》是一本全面探讨计算机技术的实用指南，旨在帮助读者深入理解并解决日常使用中遇到的各种电脑问题。这本书涵盖了广泛的主题，包括硬件维护、软件安装、网络连接、数据恢复、系统优化等多个方面...
详细讲述win32下的汇编编程，对于想了解windows下驱动编程的人很有帮助。
大型ERP实施全接触-生产计划培训
头部属性全接触----2008年9月15日 两个表格[Table]可以左右排放吗----2008年9月15日 marquee基本语法的全解释----2008年9月14日 HTML4.0不常用标签特性示例----2008年9月14日 在网页中插入MIDI文件背景音乐----...
大型erp实施全接触-软件设置和测试、方案测试
大型erp实施全接触-软件设置和测试、方案测试.doc
《Dreamweaver4教程-全接触》是一本深入解析Adobe Dreamweaver 4的综合性教程，旨在帮助初学者和进阶者全面掌握这款强大的网页设计和开发工具。Dreamweaver 4是20世纪末互联网发展高峰期的重要软件，它极大地推动了...
大型ERP实施全接触-软件设置和测试、方案测试（DOC142页）.docx
汇编语言全接触 VJStudio.net网站 探讨网页制作技术 网站建设 VC++程序开发 动画创建与美工
### .NET程序设计全接触——C#语言描述 #### 前言与背景 随着20世纪末期信息技术的迅猛发展，尤其是互联网技术的进步，人类社会迎来了前所未有的数据爆炸时代。这一时期，不仅互联网资源急速扩张，同时也伴随着一...
### 无线局域网全接触：技术分析篇 无线局域网（Wireless Local Area Network，简称WLAN）是现代网络技术的重要组成部分，它利用无线通信技术替代传统的有线网络，实现了设备之间的无线连接，极大地提高了网络的...