【前端｜JS实战第1篇】使用JS来实现属于自己的贪吃蛇游戏！

在这里插入图片描述

前言

贪吃蛇游戏是经典的小游戏，也是学习前端JS的一个很好的练习项目。在本教程中，我们将使用 JavaScript 来逐步构建一个贪吃蛇游戏。我们会从创建游戏区域开始，逐步添加蛇的移动、食物的生成以及游戏逻辑等功能。

🚀 作者简介：程序员小豪，全栈工程师，热爱编程，曾就职于蔚来、腾讯，现就职于某互联网大厂，技术栈：Vue、React、Python、Java
🎈 本文收录于小豪的前端系列专栏，后续还会更新前端入门以及前端面试的一些相关文章，手把手带你从零学习前端到面试找工作，并如果有想进入前端领域工作的同学，这个前端专栏会对你有所帮助，欢迎关注起来呀
🌼 本人也会持续的去关注AIGC以及人工智能领域的一些动向并总结到博客中，大家感兴趣的可以关注一下我的人工智能专栏
🌊 云原生的入门学习系列，大家有兴趣的可以看一看

步骤1：创建文件

我们需要创建三个文件index.html、styles.css、script.js，index.html用于放置我们界面dom，styles.css用于开发样式，script.js用于放置实现贪吃蛇的逻辑。
在这里插入图片描述

步骤2：创建游戏区域

首先，我们需要一个游戏区域来展示游戏。在 HTML 文件中创建一个

元素，用于表示游戏区域。然后，使用 CSS 来设置该元素的样式，使其成为一个矩形的游戏画布。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>贪吃蛇游戏</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="game-area"></div>
  <script src="script.js"></script>
</body>
</html>

/* styles.css */
.game-area {
  width: 400px;
  height: 400px;
  border: 2px solid #000;
}

可以看到，我们在styles.css设置了这个游戏区域的宽度和高度为400px，还设置了一个2px的黑色边框
在这里插入图片描述

步骤3：初始化蛇的位置

在 script.js 文件中，我们将初始化蛇的初始位置。定义一个表示蛇身的数组，每个元素代表蛇的一个部分，然后设置蛇的初始位置。

// script.js
const gameArea = document.querySelector('.game-area');
const snake = [{ x: 2, y: 2 }]; // 初始位置

// 初始化蛇的位置
function initializeSnake() {
  snake.forEach(segment => {
    const snakeSegment = document.createElement('div');
    snakeSegment.classList.add('snake');
    snakeSegment.style.left = segment.x * 20 + 'px';
    snakeSegment.style.top = segment.y * 20 + 'px';
    gameArea.appendChild(snakeSegment);
  });
}

initializeSnake();

/* styles.css */
.snake {
  width: 20px;
  height: 20px;
  background-color: green;
  position: absolute;

知识点：

  • document.querySelector('.game-area')用于获取游戏区域的整个dom
  • 蛇的身体我们用一个数组来实现，每一截区域都有一个坐标
  • 我们根据snake这个数组用document.createElement('div')给蛇的每一截身体渲染一个div元素
  • 在styles.css里使用background-color: green;将蛇的身体设置为绿色
  • 在styles.css里使用position: absolute;设置蛇的每一截取的身体为绝对定位。然后通过js设置每一截身体的dom的left和top，从而设置其位置
    在这里插入图片描述

步骤3：移动蛇

接下来，我们将实现蛇的移动功能。我们会添加一个监听键盘事件，当玩家按下方向键时，蛇将根据所选择的方向移动。

// script.js
let direction = "right"; // 初始方向

document.addEventListener("keydown", (event) => {
  if (event.key === "ArrowUp" && direction !== "down") {
    direction = "up";
  } else if (event.key === "ArrowDown" && direction !== "up") {
    direction = "down";
  } else if (event.key === "ArrowLeft" && direction !== "right") {
    direction = "left";
  } else if (event.key === "ArrowRight" && direction !== "left") {
    direction = "right";
  }
});

function moveSnake() {
  const head = { x: snake[0].x, y: snake[0].y };
  console.log(direction);
  // 根据方向更新蛇头位置
  if (direction === "up") {
    head.y--;
  } else if (direction === "down") {
    head.y++;
  } else if (direction === "left") {
    head.x--;
  } else if (direction === "right") {
    head.x++;
  }
  console.log(head);
  // 更新蛇的位置
  snake.unshift(head);
  // 移除蛇尾
  const removedSegment = snake.pop();

  // 更新蛇身的样式
  const newHead = document.createElement("div");
  newHead.classList.add("snake");
  newHead.style.left = head.x * 20 + "px";
  newHead.style.top = head.y * 20 + "px";
  gameArea.insertBefore(newHead, gameArea.firstChild);
  // 移除蛇尾的样式
  if (removedSegment) {
    const elementsToDelete = document.querySelectorAll(".snake");
    if (elementsToDelete.length > 0) {
      const lastElement = elementsToDelete[elementsToDelete.length - 1];
      gameArea.removeChild(lastElement);
    }
  }
}

setInterval(moveSnake, 1000); // 每1000毫秒移动一次

在这个步骤中，我们使用了定时器来连续地移动蛇。通过按下方向键，你可以控制蛇的移动方向。

这里我们通过 gameArea.insertBefore(newHead, gameArea.firstChild);在gameArea的子节点的最前面插入一个新的节点，并通过gameArea.removeChild(lastElement);删除最后一个子节点。

最后，通过以下代码，来监听按键行为，来控制贪吃蛇前进方向：

document.addEventListener("keydown", (event) => {
  if (event.key === "ArrowUp" && direction !== "down") {
    direction = "up";
  } else if (event.key === "ArrowDown" && direction !== "up") {
    direction = "down";
  } else if (event.key === "ArrowLeft" && direction !== "right") {
    direction = "left";
  } else if (event.key === "ArrowRight" && direction !== "left") {
    direction = "right";
  }
});

在这里插入图片描述

步骤4：生成食物
接下来，我们将实现食物的生成功能。每当蛇吃掉食物后，我们将随机生成一个新的食物位置。

// script.js
let food = { x: 5, y: 5 }; // 初始食物位置

function generateFood() {
  let foodItem = document.querySelectorAll(".food");
  if (foodItem.length >= 1) {
    gameArea.removeChild(foodItem[0]);
  }

  food.x = Math.floor(Math.random() * 20); // 随机生成 x 坐标
  food.y = Math.floor(Math.random() * 20); // 随机生成 y 坐标
  if (food.x <= 0) {
    food.x = 1;
  } else if (food.x >= 20) {
    food.x = 19;
  }

  if (food.y <= 0) {
    food.y = 1;
  } else if (food.y >= 20) {
    food.y = 19;
  }

  // 创建食物元素
  const foodElement = document.createElement("div");
  foodElement.classList.add("food");
  foodElement.style.left = food.x * 20 + "px";
  foodElement.style.top = food.y * 20 + "px";
  gameArea.appendChild(foodElement);
}

generateFood();

/* styles.css */
.food {
  width: 20px;
  height: 20px;
  background-color: red;
  position: absolute;
}

在这里插入图片描述

步骤5：检测碰撞与游戏逻辑

最后，我们需要检测蛇是否与食物相撞以及是否撞墙，同时还需要处理游戏结束的情况。

// script.js
function checkCollision() {
  const head = snake[0];

  // 检查是否撞墙
  if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20) {
    clearInterval(gameInterval); // 停止游戏
    alert("游戏结束！");
    return true;
  }

  // 检查是否与食物相撞
  console.log("head:", head.x, head.y);
  console.log("food:", food.x, food.y);
  if (head.x === food.x && head.y === food.y) {
    // 吃掉食物，增加蛇的长度
    let x, y;
    // 判断蛇尾增加的方向
    if (direction === "right") {
      x = snake[snake.length - 1].x - 1;
      y = snake[snake.length - 1].y;
    } else if (direction === "left") {
      x = snake[snake.length - 1].x + 1;
      y = snake[snake.length - 1].y;
    } else if (direction === "top") {
      x = snake[snake.length - 1].x;
      y = snake[snake.length - 1].y + 1;
    } else {
      x = snake[snake.length - 1].x;
      y = snake[snake.length - 1].y - 1;
    }

    snake.push({ x, y });
    const newTail = document.createElement("div");
    newTail.classList.add("snake");
    newTail.style.left = x * 20 + "px";
    newTail.style.top = y * 20 + "px";
    gameArea.appendChild(newTail);
    generateFood();
  }

  // 检查是否与自身相撞
  for (let i = 1; i < snake.length; i++) {
    if (head.x === snake[i].x && head.y === snake[i].y) {
      clearInterval(gameInterval); // 停止游戏
      alert("游戏结束！");
      return true;
    }
  }

  return false;
}

let gameInterval = setInterval(() => {
  if (!checkCollision()) {
    moveSnake();
  }
}, 1000);

涉及知识点：

  • 通过direction来判断贪吃蛇吃到食物后变长的方向
  • alert是用于弹出提示框的JS api

这样，我们就完成了一个简单的贪吃蛇游戏！通过上述步骤，我们从创建游戏区域、初始化蛇的位置，到实现蛇的移动、食物的生成，最终加入碰撞检测和游戏逻辑，完成了一个可玩的贪吃蛇游戏。

在这里插入图片描述

在这里插入图片描述

总结

通过这个项目，你不仅可以学习如何使用 JavaScript 来实现一个小游戏，还可以熟练学习js操作dom、数据的常用方法、定时器setInterval、css样式、事件监听器以及实现需求的逻辑思维等等知识，对前面学习的一些理论知识进行了实践，相信你跟着一套教程下来会对前面学习到的知识有更深的理解。
后续我们这个前端专栏还会讲述ES6、垃圾回收、js算法技巧、Vue入门实战、React实战、前端面试题等等文章，如果您感兴趣的话，欢迎点赞三连并关注我以及我的前端专栏，我们下期文章再见。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Lua】（一）VSCode 搭建 Lua 开发环境

【Lua】（一）VSCode 搭建 Lua 开发环境

前言 最近在找工作&#xff0c;基本所有的岗位都会问到 Lua&#xff08;甚至拼 UI 的都要求会 Lua&#xff09;&#xff0c;咱能怎么办呢&#xff0c;咱也只能学啊…… 工欲善其事&#xff0c;必先利其器。第一步&#xff0c;先来把环境配置好吧&#xff01; 当前适用版本&a…
阅读更多...
【C语言】使用C语言，实现九九乘法表（另附Python、Java、JavaScript实现方式）

【C语言】使用C语言，实现九九乘法表（另附Python、Java、JavaScript实现方式）

文章目录 1. C语言实现1.1 思路1.2 代码实现 3.其他语言实现3.1 Python实现3.2 Java实现3.3 JavaScript实现 1. C语言实现 1.1 思路 九九乘法表图示&#xff1a; 思路如下&#xff1a;定义两层for循环即可实现九九乘法表 一共有9层&#xff0c;所以要定义一个变量i&#xff…
阅读更多...
Git概述

Git概述

目录 一、什么是Git 二、什么是版本控制系统 三、Git和SVN对比 SVN集中式 SVN优缺点 Git分布式 Git优缺点 四、Git工作流程 四个工作区域 工作流程 五、Git下载与安装 一、什么是Git 很多人都知道&#xff0c;林纳斯托瓦兹在1991年创建了开源的Linux&#xff0c;从…
阅读更多...
uniapp编写微信小程序和H5遇到的坑总结

uniapp编写微信小程序和H5遇到的坑总结

uniapp编写微信小程序和H5遇到的坑总结 1、阻止事件冒泡2、二维码生成3、H5跨域配置4、H5时&#xff0c;地址栏上添加版本号5、H5时&#xff0c;tabBar遮挡部分内容6、uniapp使用webview通信6.1、uniapp编写的小程序嵌入h5之间的通信6.1.1、小程序向h5发送消息6.1.2、h5向小程序…
阅读更多...
BDA初级分析——SQL清洗和整理数据

BDA初级分析——SQL清洗和整理数据

一、数据处理 数据处理之类型转换 字符格式与数值格式存储的数据&#xff0c;同样是进行大小排序&#xff0c; 会有什么区别&#xff1f; 以rev为例&#xff0c;看看字符格式与数值格式存储时&#xff0c;排序会有什么区别&#xff1f; 用cast as转换为字符后进行排序 SEL…
阅读更多...
广东灯具3D扫描抄数建模服务3D测绘出图纸三维逆向设计-CASAIM

广东灯具3D扫描抄数建模服务3D测绘出图纸三维逆向设计-CASAIM

灯具三维逆向建模是一种将实际物体转换为数字模型的过程。通过逆向工程技术&#xff0c;可以将现有的灯具进行3D扫描&#xff0c;然后利用专业的逆向设计软件将其转换为准确的三维模型。 以下是CASAIM实施灯具三维逆向建模的一般步骤图&#xff1a; 1. 扫描&#xff1a;三维扫…
阅读更多...
Linux 系统编程拾遗

Linux 系统编程拾遗

Linux 系统编程拾遗 进程的创建 进程的创建 fork()、exit()、wait()以及execve()的简介 创建新进程&#xff1a;fork()
阅读更多...
【Flink】Flink窗口触发器

【Flink】Flink窗口触发器

数据进入到窗口的时候，窗口是否触发后续的计算由窗口触发器决定，每种类型的窗口都有对应的窗口触发机制。WindowAssigner 默认的 Trigger通常可解决大多数的情况。我们通常使用方式如下,调用trigger()方法把我们想执行触发器传递进去： SingleOutputStreamOperator<Produ…
阅读更多...
LabVIEW开发血液动力学监测仪

LabVIEW开发血液动力学监测仪

LabVIEW开发血液动力学监测仪 心电图和光电容积描记图的缩写分别是心电图、心电图和PPG。都熟悉“心脏病发作”、“心力衰竭”、“冠状动脉疾病”和“中风”等术语&#xff0c;但中很少有人意识到这些疾病都被认为是心血管疾病。心脏病学是一个医学领域&#xff0c;专注于心脏…
阅读更多...
mac m1上系统内录内部声音的方法/无需安装Blackhole

mac m1上系统内录内部声音的方法/无需安装Blackhole

总所周知&#xff0c;m1的mac不能录制桌面音频&#xff0c;obsstudio都不行。 最快的解决方法就是下载飞书&#xff1a; 登陆后新建直播/视频会议&#xff1a; 共享的时候选择下面的两个钩上去就好了
阅读更多...
Transformer 相关模型的参数量计算

Transformer 相关模型的参数量计算

如何计算Transformer 相关模型的参数量呢&#xff1f; 先回忆一下Transformer模型论文《Attention is all your need》中的两个图。 设Transformer模型的层数为N&#xff0c;每个Transformer层主要由self-attention 和 Feed Forward组成。设self-attention模块的head个数为 …
阅读更多...
Python绘制爱心代码（七夕限定版）

Python绘制爱心代码（七夕限定版）

写在前面&#xff1a; 又到了一年一度的七夕节啦&#xff01;你还在发愁送女朋友什么礼物&#xff0c;不知道怎样表达你满满的爱意吗&#xff1f;别担心&#xff0c;我来帮你&#xff01;今天&#xff0c;我将教你使用Python绘制一个跳动的爱心&#xff0c;用创意和幽默为这个…
阅读更多...
Python入门教程 | Python简介和环境搭建

Python入门教程 | Python简介和环境搭建

Python 简介 Python是一种高级编程语言&#xff0c;由荷兰人Guido van Rossum于1991年创建。它以其简单易学、可读性强和丰富的生态系统而受到广泛喜爱。它被广泛应用于各个领域&#xff0c;包括Web开发、科学计算、数据分析、人工智能等。 Python的特点 简洁易读&#xff1a…
阅读更多...
图数据库_Neo4j_Centos7.9安装Neo4j社区版3.5.4_基于jdk1.8---Neo4j图数据库工作笔记0011

图数据库_Neo4j_Centos7.9安装Neo4j社区版3.5.4_基于jdk1.8---Neo4j图数据库工作笔记0011

首先上传安装包,到opt/soft目录 然后看一下jdk安装的是什么版本的,因为在neo4j 4以后就必须要用jdk11 以上的版本,我这里还用着jdk1.8 所以 我这里用3.5.4的版本 关于下载地址: https://dist.neo4j.org/neo4j-community-3.5.4-unix.tar.gz 然后再去解压到/opt/module目录下 …
阅读更多...
vue3+vite+pinia

vue3+vite+pinia

目录 一、项目准备 1.1、Vite搭建项目 1.2、vue_cli创建项目 二、组合式API(基于setup) 2.1、ref 2.2、reactive 2.3、toRefs 2.4、watch和watchEffect 2.5、computed 2.6、生命周期钩子函数 2.7、setup(子组件)的第一个参数-props 2.8、setup(子组件)的第二个参数…
阅读更多...
Text-to-SQL小白入门（二）——Transformer学习

Text-to-SQL小白入门（二）——Transformer学习

摘要 本文主要针对NLP任务中经典的Transformer模型的来源、用途、网络结构进行了详细描述&#xff0c;对后续NLP研究、注意力机制理解、大模型研究有一定帮助。 1. 引言 在上一篇《Text-to-SQL小白入门&#xff08;一&#xff09;》中&#xff0c;我们介绍了Text-to-SQL研究…
阅读更多...
学习网络编程No.3【socket理论实战】

学习网络编程No.3【socket理论实战】

引言&#xff1a; 北京时间&#xff1a;2023/8/12/15:32&#xff0c;自前天晚上更新完文章&#xff0c;看了一下鹅厂新出的《扫毒3》摆烂至现在&#xff0c;不知道是长大了&#xff0c;还是近年港片就那样&#xff0c;给我的感觉不是很好&#xff0c;也可能是国内市场对港片不…
阅读更多...
ASP.NET WEB API通过SugarSql连接MySQL数据库

ASP.NET WEB API通过SugarSql连接MySQL数据库

注意&#xff1a;VS2022企业版可以&#xff0c;社区版可能存在问题。实体名称和字段和数据库中的要一致。 1、创建项目&#xff0c;安装SqlSugarCore、Pomelo.EntityFrameworkCore.MySql插件 2、文件结构 2、appsettings.json { “Logging”: { “LogLevel”: { “Default”: …
阅读更多...
7.maven

7.maven

1 初始Maven 1.1 什么是Maven Maven是Apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具。 官网&#xff1a;https://maven.apache.org/ Apache 软件基金会&#xff0c;成立于1999年7月&#xff0c;是目前世界上最大的最受欢迎的开源软件基金会&…
阅读更多...
Redis的数据结构

Redis的数据结构

Redis初始给了我们16个库&#xff0c;数据都是以键—值对来存储的&#xff0c;其中键的数据结构固定为string&#xff0c;值的数据类型有五种分别为&#xff1a;string、list、set、hash、zset。 1.string(字符串) string是最简单常用的数据结构&#xff0c;不同的类型有不同…
阅读更多...
最新文章

Copyright @ 2022~2023