最新html5游戏开发入门教程知识分享
导读： HTML5游戏制作完全指南 简介 你想使用HTML5的Canvas制作一款游戏吗？跟着这个教程，你将立刻上道儿。 阅读该教程需要至少熟悉javascript相关知识。 你可以先玩这款游戏或者直接阅读文章并且下载游...
HTML5游戏制作完全指南
简介
你想使用HTML5的Canvas制作一款游戏吗？跟着这个教程，你将立刻上道儿。
阅读该教程需要至少熟悉javascript相关知识。
你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。
创建画布
在画任何东西之前，我们必须创建一个画布。因为这是完全指南，并且我们将用到jQuery.
var CANVAS_WIDTH=480;
var CANVAS_HEIGHT=320;
var canvasElement=$（""）;
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 =0 &
&
I.y =0 &
&
I.x =0 &
&
I.y b.x &
&
a.y 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
}
;
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 最新html5游戏开发入门教程知识分享
本文地址： https://pptw.com/jishu/656065.html