原文链接

译文来自我的博客

简介

假如你想用canvas做个游戏，那末来对处所了。

然则然则你最少晓得javascript怎样拼写(╯‵□′)╯︵┻━┻

既然没题目，那先来玩一下或许下载

建立canvas标签

空话不多说，我们必需建立一个canvas标签，简朴起见，用一下不喜好的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');

游戏轮回

为了能够让游戏腻滑动画，我们用30帧的频次。

var FPS = 30;
setInterval(function() {
  update();
  draw();
}, 1000/FPS);

如今我们能够先给这两个函数安排play，主要的是setInterval函数会按期照应他们的。

hello world

如今我们有了这个轮回，让我们最先画东西吧~

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);
}

如今假如没失足，那末字母应当在挪动，然则有残影涌现。想一想为何会如许，由于我们没有消灭之前的画面呢，so 我们加点消灭画布的代码。

function draw() {
  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  canvas.fillStyle = "#000";
  canvas.fillText("Sup Bro!", textX, textY);
}

如今能够看到字母在屏幕上挪动了，祝贺你，你已快入门了。让我们继承。

建立玩家

接下来建立一个物体用来给玩家掌握，我们建立了一个简朴的object：

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);
  }
};

我们简朴地着色了这个物体，当我们消灭画布的时刻，画上这个物体。

function draw() {
  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  player.draw();
}

键盘掌握

运用jQuery HotKeys

运用jQuery HotKeys，这个插件供应了简朴的键盘输入检测
我们能够这么绑定事宜

$(document).bind("keydown", "left", function() { ... });

不必想哪一个按键是哪一个号码真惬意，我们适才完成了“当玩家按上的时刻，做一些事变”，堡垒的插件！

玩家的挪动

键盘输入检测已完成了，但我们还要处置惩罚键盘输入以后要做什么。
你能够会想运用事宜驱动的体式格局去处置惩罚键盘输入，然则如许做体系不一，按键结果不一样，而且脱离了动画轮回呢，如许做就可以够跨体系了，保证了一致性，也让游戏更腻滑了。

有一个好消息,我们有一个key_status.js的文件，供应了相似keydown.left等等。去下载的文件里找

如今我们能够去查询是不是有按键了,然后我们就这么写：

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);
}

clamp这个函数能够在下载的util.js里看到

然后我们加点炮弹进去。

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
  };
};

我们须要把枪弹的动画增加到没帧的动画里,为了能让枪弹变成无穷的结果,我们过滤了枪弹数组,只保留了激活的枪弹.同时删除了已撞到仇人的枪弹.

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();
  });
}

加载和增加图片

虽然现在这些方块飞来飞去看起来很酷，但有图片就更酷了。我们运用了一个叫sprite.js的文件，能够从下载的文件里看到。

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);
  };

  ...
}

碰撞检测

我们已有了许多仇人飞来飞去了,但他们没有交互呢mb打不到他们,我们是时刻加点碰撞检测了.
让我们运用一个简朴的要领检测:

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;
}

我们须要检测以下两种碰撞:

1. 玩家枪弹和敌方飞船

2. 玩家和敌方飞船

让我们给update到场处置惩罚碰撞以后的处置惩罚

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
};

声响

为了可玩性,我们将要增加声响结果进去,我们用到sound.js这个文件，让事变变得异常简朴。

player.shoot = function() {
  Sound.play("shoot");
  ...
}

function Enemy(I) {
  ...

  I.explode = function() {
    Sound.play("explode");
    ...
  }
}

运用这些API就可以很快地完成一个简朴的游戏.

离别

再说一下游戏地点,也能够下载

well,我愿望你最先喜好用js和html5写简朴的游戏，跟着进修的深切,未来会有更多地应战呢.

参考文献

HTML5 Canvas Cheat Sheet

HTML5 Game EnginesSF怎样自动读取gist的信息。。我在SF删了这个链接

译后感

第一次完全的翻译一篇文章,真蛋疼有些句子感觉不好翻,就随意乱来一下,BTW,我也按这个教程写了例子,彷佛写完另有许多题目呢(逃

趁便吐槽一下,SF编辑器怎样没有删除线,╭(╯^╰)╮