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

前言

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

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

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分钟)

4.webpack.config.js打包工具配置

// 引入一个包
const path = require('path')
//引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin')
//webpack中所有的配置信息都要写在module.exports中
module.exports = {
   
    //指定入口文件
    entry:"./src/index.ts",
    
    
    
    //指定打包文件所在的目录
    output:{
   
        //指定打包文件的目录
        path:path.resolve("E:/VScode/贪吃蛇项目/list"),
        //filename打包后文件的名字一般叫bundle.js
        filename:"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打包工具的相关配置,同样命名一个webpack.config.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="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     //这里引入下面的css
    <link rel="stylesheet" href="./style/index.css">
    <title>贪吃蛇</title>
</head>
<body>
    <!--游戏主容器-->
    <div id="main"