使用JS和Canvas做一个html5小游戏_html canvas用javascript制作一款网页游戏(1)

2401_84976170

于 2024-05-16 02:28:14 发布

阅读量791

点赞数 14

文章标签： c语言 c++ 学习

本文链接：https://blog.csdn.net/2401_84976170/article/details/138932806

版权

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

这是游戏的截图：

1.有计算抓住的怪物的数量

2.有背景，英雄，怪物。

第一步：建立html文件和js文件

建立一个games文件夹，在文件夹中建立js文件夹，images文件夹，以及index.html。

game.js放在js文件夹中，图片放在images文件夹中。

html代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Simple Canvas Game</title>
	</head>
	<body>
		<script src="js/game.js"></script>
	</body>
</html>

第二步：如何制作这样一个游戏

我们首先要明白游戏的流程是怎样的。这个游戏十分简单，只是简单的抓怪兽，玩家通过操纵键盘的上下左右来让英雄移动从而抓怪兽，然后记录得分。

我们需要一个游戏环境和角色来让玩家操作

1.首先我们用canvas来创建一个画布作为游戏的舞台。

通过canvas标签创建元素，然后我们设置画布的宽度高度，之后让画布添加到页面上。

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

2.然后我们添加相应的图片（背景，英雄，怪物）

只是简单的创建图片对象，而beReady这个变量是用来标识图片是否加载完成。

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

// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
	heroReady = true;
};
heroImage.src = "images/hero.png";

// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
	monsterReady = true;
};
monsterImage.src = "images/monster.png";

3.添加英雄，怪物，记录分数的变量

资源都加载完成后，我们就构造英雄怪物的对象，因为游戏很简单，所以怪物静止不动只需要随机刷新位置，而英雄只需要一个速度属性就好了，而分数一开始为0。

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

4.获取用户的输入

因为在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。为此，用keysDown这个对象来保存用户按下的键值(keyCode)，如果按下的键值在这个对象里，那么就做相应处理。

默认是键盘输入，所以我们监听keysdown和keysup。

// Handle keyboard controls
var keysDown = {};

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

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

5.开始一轮游戏

reset方法用于开始新一轮游戏，在这个方法里我们将英雄放回画布的中心同时将怪物放到一个随机的地方。

// Reset the game when the player catches a monster
var reset = function () {
	hero.x = canvas.width / 2;
	hero.y = canvas.height / 2;

	// Throw the monster somewhere on the screen randomly
	monster.x = 32 + (Math.random() * (canvas.width - 64));
	monster.y = 32 + (Math.random() * (canvas.height - 64));
};

6.更新对象

用于更新画面的update函数，会被规律的重复调用。首先它检查用户当前按住的是不是方向键，然后再让英雄朝英雄相应方向移动。这个传入的modifier 变量是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。

我们还要给英雄移动增加边界检查，不然会跑到地图外面去了。

// Update game objects


![img](https://img-blog.csdnimg.cn/img_convert/5facd2a36b459586e39ed3ea234b1d4f.png)
![img](https://img-blog.csdnimg.cn/img_convert/404b3f7a702f45a5a7c471728494930a.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**