html5小游戏源码_【10分钟教程】制作一个简单canvas小游戏

小游戏

你是否想用HTML5 的canvas画布制作一个简单游戏？ 

如果答案是肯定的请往下看。

让我们一步一步讲解

1. 绘制画布

// Create the canvas
// canvas元素作为我们绘制的画布，我们可以在上面作画了。
var canvas = document.createElement("canvas");
// 获取画布的上线下文对象，可以使用上面挂载的api
var ctx = canvas.getContext("2d");
// 设置画布宽度
canvas.width = 512;
//设置画布高度
canvas.height = 480;
// 将画布添加到body元素后面，这样画布就会出现在页面中
document.body.appendChild(canvas);

首先我们需要绘制出一个canvas element

2. 载入图片

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
	bgReady = true;
};
bgImage.src = "images/background.png";

一个游戏是需要图形场景的，所以我们载入一些图片场景。

这里的bgReady变量用来标识图片是否载入，以便于我们知道是否可以在图片上绘制了。

如果图片还没有载入就绘制会出现错误(throw a DOM error)

我们这个游戏比较简单，但是它也有三个图形场景

• 背景

• 英雄

• 怪兽

3. 游戏对象

// Game objects
var hero = {
	speed: 256, // movement in pixels per second
	x: 0,
	y: 0
};
var monster = {
	x: 0,
	y: 0
};
var monstersCaught = 0;

现在我们需要定义一些变量和对象来描述场景

• hero英雄： 有speed描述移动速度，在canvas画布上就是每秒移动的像素点位移， 他还有自己的位置(x，y)

• r monster 怪兽： 不会移动，所以只有位置

• monstersCaught ： 储存怪兽被抓住的次数

4. 玩家输入

// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
	keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
	delete keysDown[e.keyCode];
}, false);

现在是对玩家输入的处理。

需要注意的是在传统的web开发时候，用户启动输入时候就可以触发动画或者请求数据了。
但这里我们的游戏逻辑中，我们希望我们的游戏逻辑只存在于一个地方，以便对事情发生的时间和情况保持严格的控制。

因此，我们只想存储用户输入以供以后使用，而不是立即对其进行操作。

为此，我们只需要一个变量keysDown即可存储任何事件的keyCode。如果键代码位于对象中，则用户当前正在按该键。简单！

5. 更新对象

// Update game objects
var update = function (modifier) {
	if (38 in keysDown) { // Player holding up
		hero.y -= hero.speed * modifier;
	}
	if (40 in keysDown) { // Player holding down
		hero.y += hero.speed * modifier;
	}
	if (37 in keysDown) { // Player holding left
		hero.x -= hero.speed * modifier;
	}
	if (39 in keysDown) { // Player holding right
		hero.x += hero.speed * modifier;
	}

	// Are they touching?
	if (
		hero.x <= (monster.x + 32)
		&& monster.x <= (hero.x + 32)
		&& hero.y <= (monster.y + 32)
		&& monster.y <= (hero.y + 32)
	) {
		++monstersCaught;
		reset();
	}
};

这是更新函数，每执行一次间隔就会调用一次。它要做的第一件事是检查向上，向下，向左和向右箭头键，查看用户是否按下了它们。如果是这样，英雄将朝相应的方向移动。

看起来有点奇怪，将修饰符modifier参数传递给了update。 您将看到在main函数中如何引用它，但让我首先在这里进行解释。 修饰符modifier是基于1的基于时间的数字。如果恰好经过了一秒，则该值将为1，并且英雄的速度将乘以1，这意味着他将在该秒内移动256个像素。 如果过去了半秒，则该值为0.5，英雄将在该时间内移动一半速度。 依此类推。 调用此函数的速度如此之快，以至于修改器值通常会非常低，但是使用此模式将确保英雄无论脚本运行多快(或多慢！)都将以相同的速度移动。

现在我们已经根据玩家的输入移动了英雄，我们可以检查它是否引起了任何事情。 如果与英雄和怪物发生碰撞，就是这样！ 那几乎就是游戏。 我们计算比分(对MonstersCaught +1)并重置游戏。

6. 绘制对象

// Draw everything
var render = function () {
	if (bgReady) {
		ctx.drawImage(bgImage, 0, 0);
	}

	if (heroReady) {
		ctx.drawImage(heroImage, hero.x, hero.y);
	}

	if (monsterReady) {
		ctx.drawImage(monsterImage, monster.x, monster.y);
	}

	// Score
	ctx.fillStyle = "rgb(250, 250, 250)";
	ctx.font = "24px Helvetica";
	ctx.textAlign = "left";
	ctx.textBaseline = "top";
	ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32);
};

当您看到动作下降时，游戏会变得更加有趣，所以让我们将所有内容绘制到屏幕上。 首先，我们将背景图像绘制到画布上。 为英雄和怪物重复。 请注意，顺序很重要，因为绘制到画布上的任何图像都将绘制在其下方的像素上。 接下来，我们更改上下文中与如何绘制字体有关的一些属性，并调用fillText以显示玩家的得分。 由于我们没有任何复杂的动画或运动，因此我们完成了绘制。

接下来，我们更改上下文中与如何绘制字体有关的一些属性，并调用fillText以显示玩家的得分。由于我们没有任何复杂的动画或运动，因此我们完成了绘制。

7. 游戏主循环

// The main game loop
var main = function () {
	var now = Date.now();
	var delta = now - then;

	update(delta / 1000);
	render();

	then = now;

	// Request to do this again ASAP
	requestAnimationFrame(main);
};

游戏的主要循环是控制游戏流程的因素。 首先，我们要获取当前时间戳，以便我们可以计算增量(自上一个间隔以来经过了多少毫秒)。 通过除以1000(一秒中的毫秒数)，可以获取要发送以进行更新的修饰符。 然后我们调用render并记录时间戳。

关于game loop 可以看看这篇文章：https://www.html5rocks.com/en/tutorials/casestudies/onslaught/#toc-the-game-loop

8. 关于循环的注意事项

不用担心，没有必要完全理解这一部分，但是我认为对循环代码的解释将是有益的
为了连续调用主要的游戏循环功能，本教程用于执行setInterval方法。 如今，通过requestAnimationFrame方法有一种更好的方法。

9. 开始游戏

// Let's play this game!
var then = Date.now();
reset();
main();

这是最后一个代码片段！ 首先，我们设置时间戳(然后使用变量)作为种子。 然后我们调用reset来开始新的游戏/关卡。 (请记住，这将使英雄居中并将怪物随机放置，以供玩家查找。)

现在，您已经了解使用JavaScript操作canvas元素来开发游戏的基本原理，
后面文章我们将多介绍相关技巧和实例。

// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

源码：

How to make a simple HTML5 Canvas game: https://github.com/lostdecade/simple_canvas_game

点“阅读原文”查看源代码