详细介绍html5小游戏制作思路的代码实例

百变鹏仔 2个月前 (10-18) #H5教程

文章标签小游戏

html5小游戏制作思路详解

简介

创建画布

游戏循环

Hello world

创建player

立即学习“前端免费学习笔记（深入）”；

键盘控制

a:使用jQuery Hotkeys

b:移动player

添加更多游戏元素

炮弹

敌人

使用图片

碰撞检测

声音

简介

你想使用HTML5的Canvas制作一款游戏吗？跟着这个教程，你将立刻上道儿。

阅读该教程需要至少熟悉javascript相关知识。

你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。

创建画布

在画任何东西之前，我们必须创建一个画布。因为这是完全指南，并且我们将用到jQuery.

var CANVAS_WIDTH = 480;var CANVAS_HEIGHT = 320;var canvasElement = $("<canvas width=&#39;" + CANVAS_WIDTH +                       "&#39; height=&#39;" + CANVAS_HEIGHT + "&#39;></canvas>");var canvas = canvasElement.get(0).getContext("2d");canvasElement.appendTo(&#39;body&#39;);

游戏循环

为了呈现给玩家连贯流畅的游戏动画，我们要频繁地渲染画布来欺骗玩家的眼睛。

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() { ... });移动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 <= CANVAS_WIDTH &&      I.y >= 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.active = I.active && I.inBounds();  };  return I;}

当玩家开火，我们需要向集合中添加炮弹：

player.shoot = function() {  var bulletPosition = this.midpoint();  playerBullets.push(Bullet({    speed: 5,    x: bulletPosition.x,    y: bulletPosition.y  }));};player.midpoint = function() {  return {    x: this.x + this.width/2,    y: this.y + this.height/2  };};

修改update和draw方法，实现开火：

function update() {  ...  playerBullets.forEach(function(bullet) {    bullet.update();  });  playerBullets = playerBullets.filter(function(bullet) {    return bullet.active;  });}function draw() {  ...  playerBullets.forEach(function(bullet) {    bullet.draw();  });}

敌人

enemies = [];function Enemy(I) {  I = I || {};  I.active = true;  I.age = Math.floor(Math.random() * 128);  I.color = "#A2B";  I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;  I.y = 0;  I.xVelocity = 0  I.yVelocity = 2;  I.width = 32;  I.height = 32;  I.inBounds = function() {    return I.x >= 0 && I.x <= CANVAS_WIDTH &&      I.y >= 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 + b.width &&         a.x + a.width > b.x &&         a.y < b.y + b.height &&         a.y + a.height > 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.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};

文章推荐

详细介绍html5小游戏制作思路的代码实例

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集