html5小游戏制作思路详解
简介
创建画布
游戏循环
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 };
以上是详细介绍html5小游戏制作思路的代码实例的详细内容。更多信息请关注PHP中文网其他相关文章!