// webpack
const path = require("path")
module.exports = {
entry: './src/index.ts',
output: {
path: path.resolve(__dirname, "dist"),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: [/* {
loader: 'babel-loader',
options: {
// 设置预定义的环境
presrts: [
[
// 指定环境插件
'@babel/preset-env',
// 配置信息
{
// 要兼容的目标浏览器
targets: {
"chrome":"88"
},
// 指定corejs的版本
"corejs": "3",
// 使用corejs的方式“usage”表示按需加载
"useBuiltIns":"usage"
}
]
]
}
}, */
'ts-loader'],
exclude: /node-modules/
},
// 设置less文件的处理
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
browsers:'last 2 versions'
}
]
]
}
}
},
'less-loader'
]
}
]
}
}
结构文件
<!DOCTYPE html>
<html lang="en">
<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">
<title>贪吃蛇</title>
</head>
<body>
<!-- 创建游戏的主容器 -->
<div id="main">
<!-- 设置游戏的舞台 -->
<div id="stage">
<!-- 设置蛇 -->
<div id="snake">
<div></div>
</div>
<!-- 设置食物 -->
<div id="food">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- 设置游戏的积分牌 -->
<div id="score-panel">
<div>
SCORE: <span id="score">0</span>
</div>
<div>
level: <span id="level">1</span>
</div>
</div>
</div>
<script src="./bundle.js"></script>
</body>
</html>
样式文件
// index.less
// 设置变量
@bg-color:#b7d4a8;
// 清除默认样式
*{
margin: 0;
padding: 0;
// 改变盒子模型的计算方式
box-sizing: border-box;
}
body{
font: bold 20px "Courier";
}
// 设置主窗口的样式
#main{
width: 360px;
height: 420px;
background-color: @bg-color;
margin: 100px auto;
border: 10px solid black;
border-radius: 40px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: space-around;
// 游戏舞台
#stage{
width: 304px;
height: 304px;
border: 2px solid black;
position: relative;
// 设置蛇的样式
#snake {
&>div{
width: 10px;
height: 10px;
background-color: #000;
border: 1px solid @bg-color;
position: absolute;
}
}
// 设置食物
#food{
position: absolute;
width: 10px;
height: 10px;
left: 40px;
top: 100px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: space-between;
&>div{
width: 4px;
height: 4px;
background-color: black;
transform: rotate(45deg);
}
}
}
// 记分牌
#score-panel{
width: 300px;
display: flex;
justify-content: space-between;
}
}
开始文件
import './style/index.less'
import GameControl from './modules/GameControl';
new GameControl();