欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5游戏制作完全指南

程序员文章站 2024-01-05 18:11:52
  简介   创建画布   游戏循环   hello world   创建player   键盘控制  ...

 

简介

 

创建画布

 

游戏循环

 

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

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

 

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

};

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

 

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

 

摘自 当耐特砖家

上一篇:

下一篇: