贪吃蛇JS实现(超详细,万字解析版)

贪吃蛇JS实现(超详细,万字解析版)

前言

小伙伴们好呀,本人这次呕心沥血为大家带来一个做了绝对收获满满的项目。
分析到位,也是第一次写这么长的文章,十分期望大家的反馈✨✨

本文是对B站尚硅谷TypeScript贪吃蛇项目的完整解析。
原视频对TypeScript讲的很好,很建议有时间去观看。对于时间不充裕的小伙伴
此文的目的就是让大家以少的时间得到大的收获。
项目环境搭建是一个难点,小伙伴们看不明白可以视频研究,保证视频中会提到相关知识点。因为这对于代码的编写过程起到较大的帮助,但是不会影响到最终代码的产出。(意思就是看不懂直接拿我整合好的代码往上扔就行)。
可以直接评论区留言,或者私信我直接发你完整项目方便对照研究。

目录

• 前言
• 1.准备阶段:
• 2.项目分析:
• • • 1.场景模块需求
    • 2.食物模块需求
    • 3.蛇模块需求
    • 4.控制模块需求
• 3.项目搭建
• • • • 1.TS转JS的配置文件
      • 2.准备Node.js
      • 3.package.json包配置文件
      • fig.js打包工具配置
• 4.CSS,HTML搭建
• • • • 1.HTML
      • 2.CSS
• 5.JavaScript注入灵魂
• • • • 1.食物模块
      • 2.计分板模块
      • 3.蛇模块
      • 4.控制器模块
      • 5.index
• 6.收尾
• 往期文章同样精彩哦

1.准备阶段:

编写程序用的是VSCode。
需要大致了解基本的html,css,javascript相关知识。
对Typescript,node.js有初步理解。
掌握预处理器less
打包工具webpack整理代码
该项目不会对过旧浏览器进行兼容,尽量使用chrome浏览器验证效果

2.项目分析:

总共有三个类对象:蛇,食物,场景。并设置控制模块
要准备4个js子模块,最后在设置一个index模块做整合

Sound.js是我设置的BGM，大家也可以自己设置一个作为点缀

1.场景模块需求

样式和结构:
1.具有长和宽的容器,容器内分成蛇移动的场景和记分牌上下两个板块
2.蛇移动的场景设置边界线
3.记分牌记录蛇吃到食物的分数以及等级(等级越高蛇速度越快)
逻辑:
1.蛇吃到食物分数涨一分,每涨一定分数等级提高一级
2.等级设有上限
3.等级和蛇移动速度有关

2.食物模块需求

样式和结构:处于蛇移动的场景中
逻辑:
1.开局自动生成在场景中任意位置
2.蛇吃掉以后消失并刷新在新的位置

3.蛇模块需求

样式和结构:
1.蛇整体在移动的场景中
2.蛇分成蛇头和蛇身体两个部分
逻辑:
1.开局只有蛇头,蛇身体每吃一个食物涨一节
2.蛇头碰到自己身体或者场景模块中的边界线游戏结束
3.蛇持续前进只能改变方向,不能停下。

4.控制模块需求

逻辑:
1.按任意键开始游戏
2.只能通过四个方向键改变蛇前进的方向
3.能检测蛇死亡,蛇是否吃到食物
4.控制分数和等级是否相应增长,食物是否刷新等逻辑

以上是大致要实现的需求,作者这里给出一些优化方向,各位可自行实现:
1.蛇,食物,场景,页面自身的美化
2.加入暂停功能,
3.加入BGM,音效等
4.场景复杂度提升:如随机生成地刺,动态调整场景大小等
5.按空格建加速功能
6.加入自动重开功能
7.随着分数的提高出现鼓励文字,死亡出现游戏结束文字样式
8.改成吃豆人

3.项目搭建

1.TS转JS的配置文件

 //拥有了该文件,一个tsc指令即可直接编译所有ts文件，该文件就是ts的配置文件//extends定义继承哪个//路径:**表示任意目录*表示任意文件
{//include(指定哪些ts文件需要被编译)//路径:**表示任意目录,*表示任意文件"include":["./'你要被编译的ts的文件根目录路径'/**/*"],//编译器的选项"compilerOptions":{//指定要使用的模块化的规范"module":"ES2015",//target:用来被编译的ES的版本"target":"ES2015",//严格模式开启"strict":true,//错误代码不进行编译"noEmitOnError":false}
}

要点:
1.我们要在项目中创建一个名称为tsconfig.json的文件作为配置文件
2.其作用是当我们以集成终端形式打开项目并输入tsc指令时,将项目下我们所有的ts文件转换成js文件。
3.该文件主要是指定一些ts转译js的规范
4.如果不写任何内容,光创建这个文件也可以，因为这个文件不创建就无法使用tsc命令。
5.tsc命令只能编译一次, tsc -w表示持续监视,后续会自动编译
6.使用webpack不必用tsc命令进行编译。下面会讲到

2.准备Node.js

在node.js官网上下载Node.js放入和项目相同的硬盘中,
效果如下：

并建议node_modules文件夹复制一份放入项目中
要点:
1.我们需要通过node.js下载webpack以及其它模块
2.国内下载可能网速缓慢,可以尝试使用一些镜像服务器下载。

3.package.json包配置文件

使用webpack打包工具同样需要名为package.json的文件,进行打包的配置。
如告诉该项目需要哪些依赖。
首先

{"name": "snake","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo "Error: no test specified" && exit 1","build": "webpack","start": "node E:/VScode/贪吃蛇项目/list/bundle.js"},"keywords": [],"author": "","license": "ISC","dependencies": {"express": "^4.17.1"},# 下列显示的是开发依赖"devDependencies": {# css-loader用于整合css和webpack"css-loader": "^6.5.1","html-webpack-plugin": "^4.5.0",# style-loader用于整合css和webpack"style-loader": "^3.3.1",# ts-loader用于整合typescript和webpack"ts-loader": "^9.2.6",# ts核心包"typescript": "^4.4.4",# 下载完后可以在集成终端中使用webpack的命令"webpack": "^5.64.0","webpack-cli": "^4.9.0"}
}

要点:
1.确保你的Node.js安装好了
2.在Vscode中右键本项目选择在集成终端中打开并输入代码npm init -y 进行项目初始化,一般这个时候就会在你的项目中生成一个初步的package.json文件,然后我们进一步完善
3.该json文件是不能写注释的,粘贴代码时,请删去我的注释
4.在集成终端中输入指令npm i -D webpack webpack-cli typescript ts-loader用来下载相关依赖(如果可以看见package.json的depDependencies中更新了你下载的依赖表示下载成功)。i表示install下载的意思,-D意思是下载的作为依赖使用
5.继续输入指令npm i -D css-loader 等依赖,这些后面都有用
6.请注意上述代码中scripts中的"build": "webpack"键值对，这个设置说明我们可以用npm run build的代码来启用webpack打包工具(详情见视频09的15分钟到20分钟)

fig.js打包工具配置

// 引入一个包
const path = require('path')
//引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin')
//webpack中所有的配置信息都要写在ports中
ports = {//指定入口文件entry:"./src/index.ts",//指定打包文件所在的目录output:{//指定打包文件的目录solve("E:/VScode/贪吃蛇项目/list"),//filename打包后文件的名字一般叫bundle.jsfilename:"bundle.js",},//指定webpack打包时要使用模块module:{//指定要加载的数据rules:[{//test指定规则生效的文件 即所有以.ts结尾的文件test:/.ts$/,use:'ts-loader',//指定要排除的文件exclude:/node-modules/},{//匹配哪些文件test: /.css$/,//使用哪些loader进行处理use:[//use数组中的执行顺序是从后往前依次执行//创建一个style标签将js中的样式资源插入进行,添加到head中生效'style-loader',//将css文件变成commonjs模块加载js中,里面内容是样式字符串'css-loader']},]},plugins:[new HTMLWebpackPlugin({template:'./src/index.html'}) ,],//告诉webpack哪些文件可以作为模块被引入resolve:{extensions:['.ts','.js']},mode:'development'
}

要点:
1.最后是关于webpack打包工具的相关配置,同样命名一个fig.js
的文件并粘贴上述代码
2.由于webpack相关使用不是本文重点,不过我在几个重要的配置上做了注释,感兴趣的小伙伴可以参考视频09-11
3.output中放入的是打包输出后的文件

至此,TypeScript编译配置,Node.js配置和webpack配置完毕,可以正式撸代码啦！O(∩_∩)O

4.CSS,HTML搭建

1.HTML

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv