贪吃蛇练习

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

项目依赖

TypeScript：

• typescript；
• ts-loader；
• any-touch；

Webpack：

• webpack；
• webpack-cli；
• webpack-dev-server；
• html-webpack-plugin；
• eslint-webpack-plugin；

Babel：

• core-js；
• babel-loader；
• @babel/core；
• @babel/preset-env；
• @babel/plugin-transform-runtime；

Less & CSS资源：

• style-loader；
• css-loader；
• less；
• less-loader；
• postcss；
• postcss-loader；
• postcss-preset-env；
• mini-css-extract-plugin；
• css-minimizer-webpack-plugin；

项目使用

编译运行

在确保已经正确安装node和npm的前提下：

分别执行下面的命令安装依赖并编译项目：

# 安装依赖
npm i
# 编译打包
npm run build

编译完成后，使用浏览器打开dist目录下的index.html即可游玩；

根据老师的例子优化部分逻辑，及增加食物刷新时与蛇身重叠规避的逻辑，同时使用any-touch兼容移动端滑动手势事件，欢迎提出意见或建议

继续开发

使用npm run start进入开发模式；

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

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

其他

视频讲解：

• 尚硅谷2021版TypeScript教程（李立超老师TS新课）

老师源码：

• JasonkayZK/typescript-learn