网站地图    收藏   

主页 > 前端 > html5 >

html5小游戏制作思路详解

来源:未知    时间:2016-06-21 16:07 作者:xxadmin 阅读:

[导读] html5小游戏制作思路详解 简介 创建画布 游戏循环 Hello world 创建player 键盘控制 a:使用jQuery Hotkeys b:移动player 添加更多游戏元素 炮弹 敌人 使用图片 碰撞检测 声音 简介 你想使用HTML5的...

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


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

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


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论