简介
创建画布
游戏循环
Hello world
创建player
键盘控制
a:使用jQuery Hotkeys
b:移动player
添加更多游戏元素
炮弹
敌人
使用图片
碰撞检测
声音
简介
你想使用HTML5的Canvas制作一款游戏吗？跟着这个教程，你将立刻上道儿。
阅读该教程需要至少熟悉javascript相关知识。
创建画布
在画任何东西之前，我们必须创建一个画布。因为这是完全指南，并且我们将用到jQuery.
var CANVAS_WIDTH =480;var CANVAS_HEIGHT =320;var canvasElement = $("<canvas width=‘"+ CANVAS_WIDTH +"‘ height=‘"+ CANVAS_HEIGHT +"‘></canvas>");var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo(‘body‘);
游戏循环
为了呈现给玩家连贯流畅的游戏动画，我们要频繁地渲染画布来欺骗玩家的眼睛。
var FPS =30;
setInterval(function(){
update();
draw();},1000/FPS);
现在我们先不管update和draw里面的实现，重要的是我们要知道setInterval()会周期性的执行update和draw
Hello world
现在我们已经搭建好了一个循环的架子，我们去修改update和draw方法来写一些文字到屏幕。
function draw(){
canvas.fillStyle ="#000";// Set color to black
canvas.fillText("Sup Bro!",50,50);}
专家提醒: 当你稍微更改了一些代码的时候就执行一下程序，这样可以更快的找到程序出错地方。
静止文字正常的显示出来了。因为我们已经有了循环，所以我们可以很容易地让文字动起来~~~
var textX =50;var textY =50;function update(){
textX +=1;
textY +=1;}function draw(){
canvas.fillStyle ="#000";
canvas.fillText("Sup Bro!", textX, textY);}
执行程序。如果你一步一步照着上面做下来，可以看到文字移动。但是上一次的文字却还留在屏幕上，因为我们没有擦除画布。现在我们在draw方法中加入擦除方法。
function draw(){
canvas.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT);
canvas.fillStyle ="#000";
canvas.fillText("Sup Bro!", textX, textY);}
现在你可以看到文字在屏幕上移动了，它已经算是一个真正意义上的游戏，只不过是个半成品。
创建player
创建一个包含player所有信息的对象,并且要有draw方法。这里创建了一个简单的对象包含了所有的player信息。
var player ={
color:"#00A",
x:220,
y:270,
width:32,
height:32,
draw:function(){
canvas.fillStyle =this.color;
canvas.fillRect(this.x,this.y,this.width,this.height);}};
我们现在用一个纯色的矩形来代表player.当我们把它加入游戏当中的时候，我们需要清除画布并且画上player.
function draw(){
canvas.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT);
player.draw();}
键盘控制
使用jQuery Hotkeys
jQuery Hotkeys plugin在处理键盘行为的时候，可以更加容易的兼容不同的浏览器。让开发者不用因为不同浏览器之间的keyCode andcharCode不同而苦恼，我们这样绑定事件：
$(document).bind("keydown","left",function(){...});
移动player
function update(){if(keydown.left){
player.x -=2;}if(keydown.right){
player.x +=2;}}
是不是感觉移动不够快？那么我们来提高它的移动速度。
function update(){if(keydown.left){
player.x -=5;}if(keydown.right){
player.x +=5;}
player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);}
我们可以很容易的添加其他元素，比如炮弹：
function update(){if(keydown.space){
player.shoot();}if(keydown.left){
player.x -=5;}if(keydown.right){
player.x +=5;}
player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);}
player.shoot =function(){
console.log("Pew pew");// :) Well at least adding the key binding was easy...};
添加更多游戏元素
炮弹
我们开始真正意义上的添加炮弹，首先，我们需要一个集合来存储它：
var playerBullets =[];
然后，我们需要一个构造器来创建炮弹：
functionBullet(I){
I.active =true;
I.xVelocity =0;
I.yVelocity =-I.speed;
I.width =3;
I.height =3;
I.color ="#000";
I.inBounds =function(){return I.x >=0&& I.x <= CANVAS_WIDTH &&
I.y >=0&& I.y <= CANVAS_HEIGHT;};
I.draw =function(){
canvas.fillStyle =this.color;
canvas.fillRect(this.x,this.y,this.width,this.height);};
I.update =function(){
I.x += I.xVelocity;
I.y += I.yVelocity;
I.active = I.active && I.inBounds();};return I;}
当玩家开火，我们需要向集合中添加炮弹：
player.shoot =function(){var bulletPosition =this.midpoint();
playerBullets.push(Bullet({
speed:5,
x: bulletPosition.x,
y: bulletPosition.y
}));};
player.midpoint =function(){return{
x:this.x +this.width/2,
y:this.y +this.height/2};};
修改update和draw方法，实现开火：
function update(){...
playerBullets.forEach(function(bullet){
bullet.update();});
playerBullets = playerBullets.filter(function(bullet){return bullet.active;});}
function draw(){...
playerBullets.forEach(function(bullet){
bullet.draw();});}
敌人
enemies =[];functionEnemy(I){
I = I ||{};
I.active =true;
I.age =Math.floor(Math.random()*128);
I.color ="#A2B";
I.x = CANVAS_WIDTH /4+Math.random()* CANVAS_WIDTH /2;
I.y =0;
I.xVelocity =0
I.yVelocity =2;
I.width =32;
I.height =32;
I.inBounds =function(){return I.x >=0&& I.x <= CANVAS_WIDTH &&
I.y >=0&& I.y <= CANVAS_HEIGHT;};
I.draw =function(){
canvas.fillStyle =this.color;
canvas.fillRect(this.x,this.y,this.width,this.height);};
I.update =function(){
I.x += I.xVelocity;
I.y += I.yVelocity;
I.xVelocity =3*Math.sin(I.age *Math.PI /64);
I.age++;
I.active = I.active && I.inBounds();};return I;};function update(){...
enemies.forEach(function(enemy){
enemy.update();});
enemies = enemies.filter(function(enemy){return enemy.active;});if(Math.random()<0.1){
enemies.push(Enemy());}};function draw(){...
enemies.forEach(function(enemy){
enemy.draw();});}
使用图片
player.sprite =Sprite("player");
player.draw =function(){this.sprite.draw(canvas,this.x,this.y);};functionEnemy(I){...
I.sprite =Sprite("enemy");
I.draw =function(){this.sprite.draw(canvas,this.x,this.y);};...}
碰撞检测
function collides(a, b){return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;}
function handleCollisions(){
playerBullets.forEach(function(bullet){
enemies.forEach(function(enemy){if(collides(bullet, enemy)){
enemy.explode();
bullet.active =false;}});});
enemies.forEach(function(enemy){if(collides(enemy, player)){
enemy.explode();
player.explode();}});}function update(){...
handleCollisions();}
functionEnemy(I){...
I.explode =function(){this.active =false;// Extra Credit: Add an explosion graphic};return I;};
player.explode =function(){this.active =false;// Extra Credit: Add an explosion graphic and then end the game};
加入声音
functionEnemy(I){...
I.explode =function(){this.active =false;// Extra Credit: Add an explosion graphic};return I;};
player.explode =function(){this.active =false;// Extra Credit: Add an explosion graphic and then end the game};
DNT砖家提醒: 跟着上面的步骤，大概让大家了解了一款游戏的各种元素的制作过程，这类游戏做一遍就够，没有必要做第二遍，没有很难的算法，全是流程和经验性质的东西，倘若想做好看，做炫一点，那就是美工拼了老命切图的事情，或者开发人员介入做一些性能优化和碰撞优化。最后重复一遍----看过就好，不要当宝。
原文链接http://www.html5rocks.com/en/tutorials/canvas/notearsgame/#toc-player-movement
你可能还喜欢：http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html