资源描述：
《html5游戏开发简单入门指南》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。
1、HTML5游戏制作完全指南 简介你想使用HTML5的Canvas制作一款游戏吗？跟着这个教程，你将立刻上道儿。阅读该教程需要至少熟悉javascript相关知识。你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。 创建画布在画任何东西之前，我们必须创建一个画布。因为这是完全指南，并且我们将用到jQuery.varCANVAS_WIDTH=480;varCANVAS_HEIGHT=320;varcanvasElement=$("
2、");varcanvas=canvasElement.get(0).getContext("2d");canvasElement.appendTo('body'); 游戏循环为了呈现给玩家连贯流畅的游戏动画，我们要频繁地渲染画布来欺骗玩家的眼睛。varFPS=30;setInterval(function(){update();draw();},1000/FPS);现在我们先不管update和draw里面的实现，重要的是我们要知道setInterval()会周期性的执行update和draw Helloworld现在我们已经搭建好了一个循环的架子，我们去修改up
3、date和draw方法来写一些文字到屏幕。functiondraw(){canvas.fillStyle="#000";//Setcolortoblackcanvas.fillText("SupBro!",50,50);}专家提醒:当你稍微更改了一些代码的时候就执行一下程序，这样可以更快的找到程序出错地方。静止文字正常的显示出来了。因为我们已经有了循环，所以我们可以很容易地让文字动起来~~~vartextX=50;vartextY=50;functionupdate(){textX+=1;textY+=1;}functiondraw(){canvas.fillS
4、tyle="#000";canvas.fillText("SupBro!",textX,textY);}执行程序。如果你一步一步照着上面做下来，可以看到文字移动。但是上一次的文字却还留在屏幕上，因为我们没有擦除画布。现在我们在draw方法中加入擦除方法。functiondraw(){canvas.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);canvas.fillStyle="#000";canvas.fillText("SupBro!",textX,textY);}现在你可以看到文字在屏幕上移动了，它已经算是一个真正意义上
5、的游戏，只不过是个半成品。 创建player创建一个包含player所有信息的对象,并且要有draw方法。这里创建了一个简单的对象包含了所有的player信息。varplayer={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.当我们把它加入游戏当中的时候，我们需要清除画布并且画
6、上player.functiondraw(){canvas.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);player.draw();} 键盘控制使用jQueryHotkeysjQueryHotkeysplugin在处理键盘行为的时候，可以更加容易的兼容不同的浏览器。让开发者不用因为不同浏览器之间的keyCode andcharCode不同而苦恼，我们这样绑定事件：$(document).bind("keydown","left",function(){...});移动playerfunctionupdate(){if(ke
7、ydown.left){player.x-=2;}if(keydown.right){player.x+=2;}}是不是感觉移动不够快？那么我们来提高它的移动速度。functionupdate(){if(keydown.left){player.x-=5;}if(keydown.right){player.x+=5;}player.x=player.x.clamp(0,CANVAS_WIDTH-player.width);}我们可以很容易的添加其他元素，比如炮弹：functionupdate(){if(keydown.space){player.shoot();
8、}if(keydown.
