❤️创意网页：抖音汉字鬼抓人小游戏复刻——附带外挂（“鬼鬼定身术”和“鬼鬼消失术”）坚持60秒轻轻松松(●‘◡‘●)

✨博主：命运之光

🌸专栏：Python星辰秘典

🐳专栏：web开发（简单好用又好看）

❤️专栏：Java经典程序设计

☀️博主的其他文章：点击进入博主的主页

前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！

🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。

🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。

🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！

简介

动态图展示

静态图展示

视频展示

开始编写追逐游戏

初始化游戏设置和变量

绘制角色和敌人

绘制游戏边界

生成敌人鬼

更新游戏状态和碰撞检测

实时计时器

键盘控制角色移动

开始游戏和生成敌人

项目完整代码

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

结语

简介

本篇博客将介绍如何使用HTML5的Canvas元素和JavaScript编写一个简单的追逐游戏。在这个游戏中，玩家可以通过键盘控制一个角色“我”，并且需要躲避不断增加并追逐“我”的敌人“鬼”。同时，我们还会加入实时计时功能，记录玩家坚持游戏的时间，并在游戏结束时显示游戏时长。最后，我们会为游戏添加一个漂亮的背景图。

动态图展示

静态图展示

视频展示

抖音汉字鬼抓人小游戏

开始编写追逐游戏

首先，我们创建一个基本的HTML框架，包含一个Canvas元素用于绘制游戏界面，以及一个JavaScript脚本来实现游戏逻辑。以下是完整的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>追逐游戏</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-image: url('background.jpg'); /* 替换成背景图的URL */background-size: cover;background-position: center;background-repeat: no-repeat;}canvas {border: none;}</style>
</head>
<body><canvas id="gameCanvas" width="600" height="600"></canvas><script>// JavaScript游戏逻辑将在这里编写</script>
</body>
</html>

初始化游戏设置和变量

在JavaScript脚本中，我们首先定义一些游戏所需的设置和变量。这些设置包括游戏画布的大小、角色的移动速度以及游戏是否结束的标志等。同时，我们还需要定义一个玩家角色对象和敌人鬼对象数组，用于存储玩家和敌人的位置和状态。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');const boxSize = 30; // 角色和格子的大小
const canvasSize = 600; // 画布大小// 玩家对象
const player = {x: canvasSize / 2, // 初始位置居中y: canvasSize / 2,speed: 3, // 移动速度dx: 0, // 横向移动方向dy: 0, // 纵向移动方向
};const ghosts = []; // 敌人鬼的数组let gameOver = false; // 游戏结束标志
let startTime = 0; // 游戏开始时间

绘制角色和敌人

接下来，我们需要编写绘制角色和敌人的函数。在Canvas中，我们使用ctx.fillText()来绘制文本，用于显示角色和敌人的图形。

function drawPlayer() {ctx.font = '24px Arial';ctx.fillStyle = 'blue';ctx.fillText('我', player.x, player.y);
}function drawGhost(x, y) {ctx.font = '24px Arial';ctx.fillStyle = 'red';ctx.fillText('鬼', x, y);
}

绘制游戏边界

为了限制角色和敌人的移动范围，我们需要绘制游戏边界。这里我们使用汉字“墙”来代表游戏的边界。

function drawWall(x, y) {ctx.font = '24px Arial';ctx.fillStyle = 'black';ctx.fillText('墙', x, y + boxSize - 6); // 调整绘制位置
}

生成敌人鬼

我们还需要一个函数来生成敌人鬼。我们随机生成敌人的位置，并将其加入敌人数组中。

function generateGhost() {ghosts.push({x: Math.floor(Math.random() * (canvasSize / boxSize)) * boxSize,y: Math.floor(Math.random() * (canvasSize / boxSize)) * boxSize,});
}

更新游戏状态和碰撞检测

在游戏的主循环中，我们需要更新角色和敌人的状态，检测碰撞，并处理游戏结束的情况。

function draw() {if (gameOver) {return;}ctx.clearRect(0, 0, canvasSize, canvasSize);// 绘制游戏边界for (let x = 0; x < canvasSize; x += boxSize) {drawWall(x, 0);drawWall(x, canvasSize - boxSize);}for (let y = boxSize; y < canvasSize - boxSize; y += boxSize) {drawWall(0, y);drawWall(canvasSize - boxSize, y);}drawPlayer();// 更新角色位置player.x += player.dx * player.speed;player.y += player.dy * player.speed;// 角色的位置循环在画布上if (player.x < boxSize) player.x = canvasSize - boxSize * 2;if (player.x >= canvasSize - boxSize) player.x = boxSize;if (player.y < boxSize) player.y = canvasSize - boxSize * 2;if (player.y >= canvasSize - boxSize) player.y = boxSize;// 绘制敌人鬼for (const ghost of ghosts) {drawGhost(ghost.x, ghost.y);// 敌人鬼向角色移动if (ghost.x < player.x) {ghost.x += 1;} else if (ghost.x > player.x) {ghost.x -= 1;}if (ghost.y < player.y) {ghost.y += 1;} else if (ghost.y > player.y) {ghost.y -= 1;}// 碰撞检测if (player.x < ghost.x + boxSize &&player.x + boxSize > ghost.x &&player.y < ghost.y + boxSize &&player.y + boxSize > ghost.y) {// 游戏结束gameOver = true;const currentTime = Math.floor((Date.now() - startTime) / 1000);ctx.font = '24px Arial';ctx.fillStyle = 'red';ctx.fillText(`游戏结束！已经坚持${currentTime}秒`, 150, canvasSize / 2);return;}}// 更新计时器updateTimer();requestAnimationFrame(draw);
}

实时计时器

我们还需要一个函数来更新实时计时器，显示玩家坚持游戏的时间。

function updateTimer() {const currentTime = Math.floor((Date.now() - startTime) / 1000);ctx.font = '18px Arial';ctx.fillStyle = 'green';ctx.fillText(`已经坚持 ${currentTime} 秒`, 30, 50);
}

键盘控制角色移动

最后，我们需要监听键盘按键事件，控制角色的移动方向。

document.addEventListener('keydown', (event) => {if (event.key === 'ArrowUp') {player.dx = 0;player.dy = -1;} else if (event.key === 'ArrowDown') {player.dx = 0;player.dy = 1;} else if (event.key === 'ArrowLeft') {player.dx = -1;player.dy = 0;} else if (event.key === 'ArrowRight') {player.dx = 1;player.dy = 0;}
});

开始游戏和生成敌人

最后，在游戏开始时，我们需要设置游戏开始时间，并在一定时间间隔内生成敌人。

// 生成一个新的敌人鬼，间隔为1秒
setInterval(generateGhost, 1000);// 开始游戏计时
startTime = Date.now();// 运行游戏循环
draw();

项目完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>追逐游戏</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-image: url('background.jpg'); /* 替换成背景图的URL */background-size: cover;background-position: center;background-repeat: no-repeat;}canvas {border: none;}.button-container {position: absolute;top: 20px;right: 20px;display: flex;flex-direction: column;gap: 10px; /* 两个按钮之间的距离 */}.game-button {padding: 10px 20px;font-size: 16px;background-color: #f0f0f0;border: 2px solid #888;cursor: pointer;transition: background-color 0.3s, border-color 0.3s;}.game-button:hover {background-color: #ddd;border-color: #666;}</style>
</head>
<body><canvas id="gameCanvas" width="600" height="600"></canvas><div class="button-container"><button id="invincibleButton" class="game-button">急急如意令，是鬼就不要动</button><button id="clearGhostsButton" class="game-button">妈咪妈咪哄，鬼鬼消失术</button></div><script>const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const boxSize = 30;const canvasSize = 600;const player = {x: canvasSize / 2,y: canvasSize / 2,speed: 3,dx: 0,dy: 0,};const ghosts = [];let gameOver = false;let startTime = 0;let invincibleMode = false;function drawPlayer() {ctx.font = '24px Arial';ctx.fillStyle = 'white';ctx.fillText('我', player.x, player.y);}function drawGhost(x, y) {ctx.font = '24px Arial';ctx.fillStyle = 'red';ctx.fillText('鬼', x, y);}function drawWall(x, y) {ctx.font = '24px Arial';ctx.fillStyle = 'green';ctx.fillText('墙', x, y + boxSize - 6); // 调整绘制位置}function generateGhost() {ghosts.push({x: Math.floor(Math.random() * (canvasSize / boxSize)) * boxSize,y: Math.floor(Math.random() * (canvasSize / boxSize)) * boxSize,});}function draw() {if (gameOver) {return;}ctx.clearRect(0, 0, canvasSize, canvasSize);// 绘制游戏边界for (let x = 0; x < canvasSize; x += boxSize) {drawWall(x, 0);drawWall(x, canvasSize - boxSize);}for (let y = boxSize; y < canvasSize - boxSize; y += boxSize) {drawWall(0, y);drawWall(canvasSize - boxSize, y);}drawPlayer();// 更新角色位置player.x += player.dx * player.speed;player.y += player.dy * player.speed;// 角色的位置循环在画布上if (player.x < boxSize) player.x = canvasSize - boxSize * 2;if (player.x >= canvasSize - boxSize) player.x = boxSize;if (player.y < boxSize) player.y = canvasSize - boxSize * 2;if (player.y >= canvasSize - boxSize) player.y = boxSize;// 绘制敌人鬼for (const ghost of ghosts) {if (ghosts.length > 0) {drawGhost(ghost.x, ghost.y);// 敌人鬼向角色移动if (!invincibleMode) {if (ghost.x < player.x) {ghost.x += 1;} else if (ghost.x > player.x) {ghost.x -= 1;}if (ghost.y < player.y) {ghost.y += 1;} else if (ghost.y > player.y) {ghost.y -= 1;}}// 碰撞检测if (player.x < ghost.x + boxSize &&player.x + boxSize > ghost.x &&player.y < ghost.y + boxSize &&player.y + boxSize > ghost.y) {// 游戏结束gameOver = true;const currentTime = Math.floor((Date.now() - startTime) / 1000);ctx.font = '24px Arial';ctx.fillStyle = 'crimson';ctx.fillText(`游戏结束！已经坚持${currentTime}秒`, 150, canvasSize / 2);return;}}}// 更新计时器updateTimer();requestAnimationFrame(draw);}function updateTimer() {const currentTime = Math.floor((Date.now() - startTime) / 1000);ctx.font = '18px Arial';ctx.fillStyle = 'white';ctx.fillText(`已经坚持 ${currentTime} 秒`, 30, 50);}// 监听按钮点击事件const invincibleButton = document.getElementById('invincibleButton');invincibleButton.addEventListener('click', () => {invincibleMode = true;});const clearGhostsButton = document.getElementById('clearGhostsButton');clearGhostsButton.addEventListener('click', () => {ghosts.length = 0; // 移除所有的鬼});// 监听键盘控制角色移动document.addEventListener('keydown', (event) => {if (event.key === 'ArrowUp') {player.dx = 0;player.dy = -1;} else if (event.key === 'ArrowDown') {player.dx = 0;player.dy = 1;} else if (event.key === 'ArrowLeft') {player.dx = -1;player.dy = 0;} else if (event.key === 'ArrowRight') {player.dx = 1;player.dy = 0;}});// 生成一个新的敌人鬼，间隔为1秒setInterval(generateGhost, 1000);// 开始游戏计时startTime = Date.now();// 运行游戏循环draw();</script>
</body>
</html>