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=‘"+ 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 +=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 =[];

然后，我们需要一个构造器来创建炮弹：

functionBullet(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 =[];functionEnemy(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);};functionEnemy(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();}

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

 

加入声音

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

DNT砖家提醒: 跟着上面的步骤，大概让大家了解了一款游戏的各种元素的制作过程，这类游戏做一遍就够，没有必要做第二遍，没有很难的算法，全是流程和经验性质的东西，倘若想做好看，做炫一点，那就是美工拼了老命切图的事情，或者开发人员介入做一些性能优化和碰撞优化。最后重复一遍----看过就好，不要当宝。

原文链接http://www.html5rocks.com/en/tutorials/canvas/notearsgame/#toc-player-movement

你可能还喜欢：http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html