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

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和drawHello 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 HotkeysjQuery Hotkeys plugin在处理键盘行为的时候，可以更加容易的兼容不同的浏览器。让开发者不用因为不同浏览器之间的keyCodeandcharCode不同而苦恼，我们这样绑定事件：$(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) 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 = 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 & 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.exp