TypeScript案例-贪吃蛇

使用TypeScript + Webpack + Less实现贪吃蛇的案例

一、项目搭建

1、导入配置文件

• tsconfig.json
• package.json
• webpack.config.js

2、项目依赖

TypeScript

• typescript
• ts-loader

Webpack

• webpack
• webpack-cli
• webpack-dev-server
• html-webpack-plugin
• clean-webpack-plugin

Babel

• core-js
• babel-loader
• @babel/core
• @babel/preset-env

Less & CSS资源

• style-loader
• css-loader
• less
• less-loader
• postcss
• postcss-loader
• postcss-preset-env

二、项目使用

1、编译运行
在确保已经正确安装node和npm的前提下，分别执行下面的命令安装依赖并编译项目：

安装依赖

npm i

编译打包

npm run build

2、使用npm run start进入开发模式

默认使用Chrome浏览器打开，可以修改package.json中的值：

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"
  }
}

注意：在macOS上要换成：

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  }
}

详细解答（转载）

三、要点

1. 获得食物坐标
2. 食物自动刷新
3. 范围控制
4. 分数、等级限制（等级随着分数增加而增加，同时蛇的速度也会得到提升）
5. 侦听键盘事件
6. 蛇头移动
7. 蛇头吃食检测
8. 蛇身增加
9. 蛇身跟随移动
10. 蛇头撞墙检测
11. 蛇头撞身体检测

四、效果图

五、其他

其他细节将在项目代码中注释，项目代码已上传至Gitee，如需查看，请转：
项目地址