儿童节小游戏——HTML+JS实现贪吃蛇

news2024/11/14 1:16:05

在这里插入图片描述

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：前端案例分享专栏
✨特色专栏：国学周更-心性养成之路
🥭本文内容：儿童节小游戏——HTML+JS实现贪吃蛇

文章目录

- 一、前言
- 二、实现步骤
- 三、代码展示
- - 1、HTML 部分
  - 2、JavaScript 部分
- 运行效果

一、前言

儿童节是一个非常特殊的节日，它是为了庆祝孩子们的成长和快乐而设立的。在这一天，孩子们可以享受到各种各样的活动和礼物，比如游戏、玩具、糖果等等。同时，这也是一个让家长们更加关注孩子们的日子，让他们感受到家庭的温暖和爱。

儿童节的意义不仅仅在于庆祝孩子们的节日，更在于提醒我们，孩子们是社会的未来，我们需要为他们创造更好的成长环境和条件，让他们健康、快乐地成长。在这个过程中，教育是非常重要的一环。我们需要为孩子们提供优质的教育资源，让他们能够接受到全面、均衡的教育，培养他们的创新精神和实践能力，让他们成为未来社会的中坚力量。

此外，儿童节也是一个让我们关注弱势儿童的日子。在我们的社会中，仍然有很多孩子们生活在贫困、失学、失独、残疾等困境中。我们需要关注他们的生存和发展，为他们提供更多的帮助和支持，让他们能够享受到与其他孩子们一样的权利和机会。

最后，儿童节也是一个让我们回忆童年的日子。在这一天，我们可以回忆起自己的童年时光，回忆起那些美好的瞬间和经历。同时，我们也可以通过与孩子们一起庆祝儿童节，重新感受到童年的快乐和纯真。

让我们一起为孩子们送上最真挚的祝福，祝愿他们健康、快乐、聪明、勇敢！同时，让我们也一起行动起来，为孩子们的成长和未来贡献自己的力量。

下面是我编写的儿童节小游戏——贪吃蛇！让我们陪伴孩子一起玩玩小游戏，感受一个不一样的节日吧！

二、实现步骤

创建HTML文件并引入CSS和JS文件。

这一步是基础，需要创建一个HTML文件，并在其中引入CSS和JS文件，以便后续编写代码。
在HTML文件中创建一个canvas元素，用于绘制游戏画面。

canvas元素是HTML5新增的元素，用于绘制图形。在这里，我们需要创建一个canvas元素，并设置其宽度和高度，以便后续绘制游戏画面。
在JS文件中定义游戏所需的变量，包括蛇的初始位置、方向、长度、食物的位置等。

在JS文件中，我们需要定义一些变量，包括蛇的初始位置、方向、长度、食物的位置等。这些变量将在后续的代码中使用。
编写绘制函数，用于绘制蛇和食物。

绘制函数是用于绘制游戏画面的函数，其中包括绘制蛇和食物。在这里，我们使用canvas的API来绘制矩形，以表示蛇和食物。
编写移动函数，用于控制蛇的移动。

移动函数是用于控制蛇的移动的函数，其中包括根据方向移动蛇头、将蛇头添加到身体数组中、删除尾部等操作。
编写碰撞检测函数，用于检测蛇是否撞墙或吃到食物。

碰撞检测函数是用于检测蛇是否撞墙或吃到食物的函数，其中包括检测是否撞墙、是否吃到食物、是否撞到自己等操作。
编写游戏循环函数，用于不断更新游戏状态并重新绘制画面。

游戏循环函数是用于不断更新游戏状态并重新绘制画面的函数，其中包括移动蛇、检测碰撞、绘制画面等操作。在这里，我们使用setTimeout函数来实现游戏循环。

三、代码展示

1、HTML 部分

<!DOCTYPE html>
<html>
<head>
	<title>贪吃蛇游戏</title>
	<style>
		canvas {
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="400" height="400"></canvas>
	<script src="snake.js"></script>
</body>
</html>

2、JavaScript 部分

// 获取canvas元素和绘图上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 定义蛇的初始位置、方向、长度
var snake = {
	x: 10,
	y: 10,
	direction: "right",
	length: 5,
	body: []
};

// 定义食物的位置
var food = {
	x: 0,
	y: 0
};

// 初始化蛇的身体
for (var i = 0; i < snake.length; i++) {
	snake.body.push({x: snake.x - i, y: snake.y});
}

// 绘制函数
function draw() {
	// 清空画布
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// 绘制蛇
	ctx.fillStyle = "green";
	for (var i = 0; i < snake.body.length; i++) {
		ctx.fillRect(snake.body[i].x * 10, snake.body[i].y * 10, 10, 10);
	}

	// 绘制食物
	ctx.fillStyle = "red";
	ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
}

// 移动函数
function move() {
	// 根据方向移动蛇头
	switch (snake.direction) {
		case "up":
			snake.y--;
			break;
		case "down":
			snake.y++;
			break;
		case "left":
			snake.x--;
			break;
		case "right":
			snake.x++;
			break;
	}

	// 将蛇头添加到身体数组中
	snake.body.unshift({x: snake.x, y: snake.y});

	// 如果蛇的长度大于5，则删除尾部
	if (snake.body.length > snake.length) {
		snake.body.pop();
	}
}

// 碰撞检测函数
function checkCollision() {
	// 检测是否撞墙
	if (snake.x < 0 || snake.x >= canvas.width / 10 || snake.y < 0 || snake.y >= canvas.height / 10) {
		return true;
	}

	// 检测是否吃到食物
	if (snake.x == food.x && snake.y == food.y) {
		snake.length++;
		placeFood();
	}

	// 检测是否撞到自己
	for (var i = 1; i < snake.body.length; i++) {
		if (snake.x == snake.body[i].x && snake.y == snake.body[i].y) {
			return true;
		}
	}

	return false;
}

// 随机放置食物
function placeFood() {
	food.x = Math.floor(Math.random() * canvas.width / 10);
	food.y = Math.floor(Math.random() * canvas.height / 10);
}

// 游戏循环函数
function gameLoop() {
	// 移动蛇
	move();

	// 检测碰撞
	if (checkCollision()) {
		alert("游戏结束！");
		return;
	}

	// 绘制画面
	draw();

	// 循环调用游戏循环函数
	setTimeout(gameLoop, 100);
}

// 监听键盘事件，改变蛇的方向
document.addEventListener("keydown", function(event) {
	switch (event.keyCode) {
		case 37:
			if (snake.direction != "right") {
				snake.direction = "left";
			}
			break;
		case 38:
			if (snake.direction != "down") {
				snake.direction = "up";
			}
			break;
		case 39:
			if (snake.direction != "left") {
				snake.direction = "right";
			}
			break;
		case 40:
			if (snake.direction != "up") {
				snake.direction = "down";
			}
			break;
	}
});

// 初始化游戏
placeFood();
gameLoop();