You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
2 years ago | |
---|---|---|
config | 2 years ago | |
public | 2 years ago | |
src | 2 years ago | |
.eslintignore | 2 years ago | |
.eslintrc.js | 2 years ago | |
.gitignore | 2 years ago | |
README.md | 2 years ago | |
babel.config.js | 2 years ago | |
package.json | 2 years ago | |
tsconfig.json | 2 years ago |
README.md
贪吃蛇练习
使用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"
}
}
其他
视频讲解:
老师源码: