html5游戏开发简单入门指南.docx

HTML5游戏制作完全指南??简介你想使用HTML5的Canvas制作一款游戏吗？跟着这个教程，你将立刻上道儿。阅读该教程需要至少熟悉javascript相关知识。你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。?创建画布在画任何东西之前，我们必须创建一个画布。因为这是完全指南，并且我们将用到jQuery.var CANVAS_WIDTH =480;var CANVAS_HEIGHT =320;varcanvasElement= $(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 blackcanvas.fillText(Sup Bro!,50,50);}专家提醒: 当你稍微更改了一些代码的时候就执行一下程序，这样可以更快的找到程序出错地方。静止文字正常的显示出来了。因为我们已经有了循环，所以我们可以很容易地让文字动起来~~~vartextX=50;vartextY=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 HotkeysjQuery Hotkeys plugin在处理键盘行为的时候，可以更加容易的兼容不同的浏览器。让开发者不用因为不同浏览器之间的keyCode?andcharCode不同而苦恼，我们这样绑定事件：$(document).bind(keydown,left,function(){...});移动playerfunction 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){play