HTML5遊戲製做徹底指南javascript
簡介java
你想使用HTML5的Canvas製做一款遊戲嗎？跟着這個教程，你將馬上上道兒。canvas
閱讀該教程須要至少熟悉javascript相關知識。瀏覽器
你能夠先玩這款遊戲或者直接閱讀文章而且下載遊戲源碼。app
建立畫布dom
在畫任何東西以前，咱們必須建立一個畫布。由於這是徹底指南，而且咱們將用到jQuery.ide
var CANVAS_WIDTH = 480;動畫
var CANVAS_HEIGHT = 320;this
var canvasElement = $("<canvas width='" + CANVAS_WIDTH +spa
"' 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
};