简介
创建画布
游戏循环
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 = [];
然后，我们需要一个构造器来创建炮弹：
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
};
dnt砖家提醒: 跟着上面的步骤，大概让大家了解了一款游戏的各种元素的制作过程，这类游戏做一遍就够，没有必要做第二遍，没有很难的算法，全是流程和经验性质的东西，倘若想做好看，做炫一点，那就是美工拼了老命切图的事情，或者开发人员介入做一些性能优化和碰撞优化。最后重复一遍----看过就好，不要当宝。
原文链接http://www.html5rocks.com/en/tutorials/canvas/notearsgame/#toc-player-movement
摘自 当耐特砖家
如对本文有疑问， 点击进行留言回复！！
HTML5跳转小程序wx-open-launch-weapp的示例代码
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
我要评论
网友评论