9秒学院-htl5游戏开发入门教程.docxVIP

9秒学院-技术分享 HTML5游戏制作完全指南 简介 你想使用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