HTML5教程 游戏制作完全指南
阿萨 2018-03-12 来源 :网络 阅读 1257 评论 0

摘要:本篇HTML5教程将讲解游戏制作中的一些指南,看完这篇文章会让你对游戏制作有更加清晰的理解和运用。

本篇HTML5教程将讲解游戏制作中的一些指南,看完这篇文章会让你对游戏制作有更加清晰的理解和运用。

 

简介

你想使用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};

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


希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!


本文由 @阿萨 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程