用HTML5 canvas制作简单游戏

最新推荐文章于 2024-05-28 09:43:14 发布

原创最新推荐文章于 2024-05-28 09:43:14 发布 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas

本文介绍了使用HTML5的canvas元素制作小游戏的步骤，包括创建Canvas对象、载入图片、定义游戏对象、处理玩家输入、开始新游戏、更新和渲染对象，以及实现游戏主循环。主要关注于canvas的基础应用和游戏开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天学习了画布canvas制作小游戏，下面来说用canvas制作的一些步骤：

1. 创建一个Canvas对象

代码里面是通过JS动态创建的画布，大家也可以直接在HTML页面上先创建画布，然后再通过document.getELementById()来获取，这两种方法没有什么区别，只是看你更习惯哪一种。

var canvas = document.createElement("canvas");
	var ctx = canvas.getContext("2d");
	canvas.width = 512;
	canvas.height = 480;  
	document.body.appendChild(canvas);

2. 载入图片

代码中的bgReady用来标识图片是否已完全载入，只有当图片载入完成后，我们才能使用它，如果在载入完成前就对其进行绘制或渲染，JS将会报一个DOM error的错误。

我们会用到三张图片（背景、英雄、怪物），每张图片都需要这样处理。

	// 背景图片 bgImage
	var bgReady = false;
	var bgImage = new Image();
	bgImage.onload = function () {
	    bgReady = true;
	};
	bgImage.src = "images/background.png";

这里需要注意的一点，把bgImage.src写在bgImage.onload之后是为了解决IE显示的bug，所以建议大家都这么么写。

3. 定义游戏要使用的对象

定义一些变量，稍后会用到。hero对象的speed属性表示英雄的移动速度（像素/秒）；monster对象不会移动，所以仅仅具有一对坐标；monstersCaught表示玩家抓住的怪物数量。

4. 处理玩家输入

用户到底按下了哪个键，通过键盘事件来处理，将按下的键的keyCode保存在空对象KeysDown中。如果该变量中具有某个键编码，就表示用户目前正按下这个键。

5. 新游戏

通过调用reset函数来开始新游戏。该函数将英雄（即玩家角色）放到屏幕中间，然后随机选择一个位置来安置怪物。

6. 更新对象

var update = function (modifier) {
	    if (38 in keysDown) { // 上
	        hero.y -= hero.speed * modifier;
	    }
	    if (40 in keysDown) { // 下
	        hero.y += hero.speed * modifier;
	    }
	    if (37 in keysDown) { // 左
	        hero.x -= hero.speed * modifier;
	    }
	    if (39 in keysDown) { // 右
	        hero.x += hero.speed * modifier;
	    }

update有一个modifier参数，。modifier参数是一个从1开始的与时间相关的数。如果间隔刚好为1秒时，它的值就会为1，英雄移动的距离即为256像素（英雄的速度为256像素/秒）；而如果间隔是0.5秒，它的值就为0.5，即英雄移动的距离为其速度的一半，以此类推。

7. 渲染对象

update函数相当于只是改变的值，而render函数则是绘制图案，当你能够看到你的行动时游戏才会变得更有趣，首先我们将背景图片绘制到canvas，然后是英雄和怪物。注意顺序，因为任何位于表层的图片都会将其下面的像素覆盖掉。

8. 游戏主循环

游戏的主循环用来控制游戏流程。首先我们要获得当前的时间，这样我们才能计算时间差。然后计算modifier的值并交给update。最后调用render并更新记录的时间。

9. 开始游戏

	var then = Date.now();
	reset();
	main();

调用reset来开始新游戏。然后将起始时间保存到变量then中并启动游戏的主循环。