HTML5游戏制作完全指南
简介
你想使用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=[];
然后，我们需要一个构造器来创建炮弹：
function Bullet（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=[];
function Enemy（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）;
};
function Enemy（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（）;
}
function Enemy（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
};
加入声音
function Enemy（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
};
|
