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

news2024/11/26 9:40:11

博主:命运之光 

🌸专栏: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>

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

🍓1.打开记事本 

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

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


结语

本章的内容就到这里了,觉得对你有帮助的话就支持一下博主把~

🌌点击下方个人名片,交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/780649.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《零基础入门学习Python》第053讲:论一只爬虫的自我修养

0. 请写下这一节课你学习到的内容&#xff1a;格式不限&#xff0c;回忆并复述是加强记忆的好方式&#xff01; 马上我们的教学就要进入最后一个章节&#xff0c;Pygame 嗨爆引爆全场&#xff0c;但由于发生了一个小插曲&#xff0c;所以这里决定追加一个章节&#xff0c;因为…

下载|GitLab 2023 年 DevSecOps 全球调研报告:安全左移深入人心、AI/ML 蔚然成风

目录 谁应该对应用程序安全负主要责任&#xff1f; 安全实践的最大挑战 AI 驱动研发&#xff0c;提升研发效率 各个角色使用的工具数量是多少&#xff1f; 一体化 DevSecOps 平台有哪些优势&#xff1f; 56%、74%、71%、65%、57% 这些数字和 DevSecOps 结合在一起&#xf…

Java -- 元注解

元注解 就是 Java标准库中 原生的注解&#xff0c;有点类似于 Java类 中的 Object&#xff0c;由于添加在其他注解上 Java总共有四个元注解&#xff0c;他们的功能如下&#xff1a; Target(ElementType.ANNOTATION_TYPE)&#xff1a;指定该注解可以用于注解类、接口或枚举类型…

element 表格里,每一行都循环使用el-popover组件,关闭按钮失效问题如何解决?

具体代码 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><title></title><link rel"stylesheet" href"https://unpkg.com/element-ui/lib/theme-chalk/index.css"><styl…

Linux Misc 驱动-编写驱动例程基于iTOP-STM32P157开发板

首先我们回想一下注册杂项设备的三大流程&#xff0c;我们在 Windows 上面新建 misc.c 文件&#xff0c;并用 sourceinsight 打开。我们可以将上次编写的 helloworld.c 里面的代码拷贝到 misc.c 文件&#xff0c;并修改为如下图所示 添加头文件 /*注册杂项设备头文件*/ #inc…

辅助驾驶功能开发-功能规范篇(23)-2-Mobileye NOP功能规范

5.2 状态机要求 5.2.1 NOP/HWP 状态机 NOP/HWP状态机如下所示&#xff1a; 下表总结了这些状态&#xff1a; 状态描述Passive不满足功能条件&#xff0c;功能无法控制车辆执行器。Standby满足功能条件。该功能不是由驾驶员激活的。功能不控制车辆执行器。Active - Main功能由…

海盗王基于golang重制版的商城服务端

海盗王原始的商城服务端&#xff0c;附带有很多其他功能&#xff08;如GM留言管理&#xff0c;商品管理接口&#xff09;&#xff0c;配置起来非常麻烦&#xff0c;而且运行时问题也很多&#xff0c;经常会出现弹出停止响应&#xff0c;无法正常提供服务。 在很早的时候&#x…

NTFS SSD USB 硬盘盒写入未结束拔出后Linux可识别,Windows不识别,报错无法访问

windows平台修复过程&#xff1a; 故障 管理员权限打开cmd&#xff0c;执行指令 chkdsk.exe /F /R f: C:\Windows\system32>chkdsk.exe /F /R f: 文件系统的类型是 NTFS。 卷标是 YeQiang-Data。 阶段 1: 检查基本文件系统结构... 已处理 2520 个文件记录。 文件验证完…

zabbix安装Grafana

一、web访问 https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-4.6.1-1.x86_64.rpm [rootserver ~] yum localinstall -y grafana-4.6.1-1.x86_64.rpm //yum方式安装本地rpm并自动解决依赖关系 [rootserver ~] grafana-cli plugins install alexanderzob…

探秘Spring中Bean的注解宝典:解读存取Bean的相关注解及用法

目录 存储Bean对象Controller(控制器存储)Service(服务存储)Repository(仓库存储)Component(组件存储)Configuration(配置存储)Bean重命名Bean 获取Bean对象属性注入构造方法注入Setter注入Resource(注入关键字) 存储Bean对象 将对象存储在 Spring 中&#xff0c;有两种注解类…

00_ubuntu_开发环境的搭建

ubuntu 的版本22.04 2023-07-21 1.卸载firefox dpkg --get-selections |grep firefox // 查看安装包的信息 sudo apt-get purge firefox firefox-locale-en firefox-locale-zh-hans // 卸载相应的包 2.下载google安装包并安装 wget https://dl.google.com/linux/direct/goo…

【Window系统】安装FFmpeg教程

目录 1、下载FFmpeg 2、配置环境变量 3、检验和测试 1、下载FFmpeg 两个下载路径&#xff1a; Github直链下载&#xff1a;Releases BtbN/FFmpeg-Builds (github.com)蓝奏云下载&#xff1a;ffmpeg-n5.0-latest-win64-lgpl-shared-5.0.zip - 蓝奏云 2、配置环境变量 将…

15matlab数据分析多项式的相乘和相除(matlab程序)

1.简述 xlsread和xlswrit函数 在MATLAB中经常会用到数据的读取&#xff0c;首先是从Excel中读取数据到MATLAB中去。下面给出原始Excel数据内容&#xff1a; 在MATLAB读取结果如下&#xff1a; mxlsread(fanjufei.xls,1,A1:C3)m 1 2 3 4 5 6 …

yum镜像源更新很慢,不管是阿里源还是清华源

今天想要再Centos7上安装docker测试&#xff0c;但是发现不管是阿里源还是清华源 yum makecache都更新的特别慢。有大佬知道啥原因不&#xff1f; 坐标成都&#xff0c;联通宽带300M

W801 ADC功能,基于CDK Demo以及Arduino平台测试

W801 ADC功能&#xff0c;基于CDK Demo以及Arduino平台测试 &#x1f33c;W801开发板&#xff08;HLK-W801 详细资料见&#xff1a;https://h.hlktech.com/Mobile/download/fdetail/170.html&#xff09; &#x1f4d3;W801 ADC简介 &#x1f4d1;集成 4 路 12 比特 ADC&…

华为eNSP:ospf的配置

一、拓扑图 二、路由器的配置 1、路由器依据规划配置接口IP AR1: <Huawei>system-view [Huawei]int g0/0/0 [Huawei-GigabitEthernet0/0/0]ip add 10.10.10.1 24 [Huawei-GigabitEthernet0/0/0]qu AR2: <Huawei>system-view [Huawei]int g0/0/0 [Huawei-Gi…

sql:是否在时间段内

判断给定时间是否在区间内&#xff0c;由于结束时间可能为空&#xff0c;若为空表示长期&#xff1b;希望在 end_date 可以延长180天作为最终的 end_date -- okAND ((ic.price_end_date is null and ic.price_start_date < 2022-01-22) or (ic.price_end_date is not null …

C++ GDAL找出多时相遥感影像缺失的日期并自动生成新的全零图像作为替补

本文介绍基于C 语言的GDAL库&#xff0c;基于一个存储大量遥感影像的文件夹&#xff0c;依据每一景遥感影像的文件名中表示日期的那个字段&#xff0c;找出这些遥感影像中缺失的成像日期&#xff0c;并新生成多个像元值全部为0的栅格文件&#xff0c;作为这些缺失日期当日的遥感…

PHP8知识详解:PHP语言优势

PHP起源于自由软件&#xff0c;并且得到了不断的迭代更新&#xff0c;在web开发领域独领风骚&#xff0c;得到了广大使用者的喜爱&#xff0c;PHP作为一款优秀的脚本语言&#xff0c;具有以下优势&#xff1a; 1、源码开源&#xff1a;所有的PHP源代码&#xff0c;你都能从PHP官…

HTTP 什么样的响应才会被缓存

下面来讨论什么样的响应会被缓存&#xff0c;以及使用好已经缓存好的条件是什么。 缓存分为两步&#xff0c;首先将响应缓存下来&#xff0c;第二步将要发起一个请求的时候检查当前缓存是否可以使用缓存了的响应。 (1) 请求方法可以被缓存理解&#xff08;不只于 GET 方法&…