2022年秒学院-html游戏开发入门教程 .pdf

9 秒学院 -技术分享HTML5游戏制作完全指南简介你想使用 HTML5 的 Canvas制作一款游戏吗？跟着这个教程，你将立刻上道儿。阅读该教程需要至少熟悉javascript 相关知识。你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。创建画布在画任何东西之前，我们必须创建一个画布。因为这是完全指南，并且我们将用到jQuery. var CANVAS_WIDTH = 480; var CANVAS_HEIGHT = 320; varcanvasElement = $(); 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); 专家提醒 : 当你稍微更改了一些代码的时候就执行一下程序，这样可以更快的找到程序出错地方。静止文字正常的显示出来了。因为我们已经有了循环，所以我们可以很容易地让文字动起来 vartextX = 50; vartextY = 50; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 8 页 - - - - - - - - - 9 秒学院 -技术分享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(); 键盘控制名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 8 页 - - - - - - - - - 9 秒学院 -技术分享使用 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() 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 8 页 - - - - - - - - - 9 秒学院 -技术分享console.log(Pew pew); / :) Well at least adding the key binding was easy. ; 添加更多游戏元素炮弹我们开始真正意义上的添加炮弹，首先，我们需要一个集合来存储它：varplayerBullets = ; 然后，我们需要一个构造器来创建炮弹：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() returnI.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) returnenemy.active; ); if(Math.random() 0.1) enemies.push(Enemy(); ; function draw() 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 8 页 - - - - - - - - - 9 秒学院 -技术分享. 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) returna.xb.x& a.yb.y; functionhandleCollisions() playerBullets.forEach(function(bullet) enemies.forEach(function(enemy) if (collides(bullet, enemy) enemy.explode(); bullet.active = false; ); ); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 8 页 - - - - - - - - - 9 秒学院 -技术分享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.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 ; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 8 页 - - - - - - - - -