HTML5游戏制作完全指南
HTML5游戏制作完全指南
2011-12-08 18:28 by 【当耐特砖家】, 2661 visits, 收藏, 编辑
简介
创建画布
游戏循环
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 =[];
然后，我们需要一个构造器来创建炮弹：
functionBullet(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 =[];functionEnemy(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);};functionEnemy(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();}
functionEnemy(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};
加入声音
functionEnemy(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
你可能还喜欢：http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html
出处：http://www.cnblogs.com/iamzhanglei
出处：IamZhangLei.com
本文版权归【当耐特砖家】和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
posted on 2012-01-10 15:47 lixiang17058 阅读(174) 评论(0) 编辑 收藏 举报
