本内容学习来自B站李立超老师 原文链接
本项目软件使用vscode,样式文件使用less,面对对象的TS,打包通过webpack进行制作。
上一节我们已经搭建好了项目的文件夹结构，这节我们来进行编写贪吃蛇游戏的html结构。
目录
编写贪吃蛇游戏的HTML结构
编写CSS样式
结语
编写贪吃蛇游戏的HTML结构
在之前建好的index.html编写如下代码
<!DOCTYPE html>
SCORE:
0
level:
1
编写CSS样式
在index.less中编写如下代码
@bg-color: #b7d4a8;
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: bold 20px 'Courier';
color: #000;
}
main {
width: 360px;
height: 420px;
background: @bg-color;
margin: 100px auto;
border: 10px solid #000;
border-radius: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
stage {
width: 304px;
height: 304px;
border: 2px solid #000;
position: relative;
#snake {
transition: left 0.1s ease-in-out, top 0.1s ease-in-out;
& > div {
width: 10px;
height: 10px;
background: #000;
border: 1px solid @bg-color;
position: absolute;
}
}
#food {
width: 10px;
height: 10px;
background: #fff;
border: 1px solid @bg-color;
position: absolute;
}
}
score-panel {
width: 300px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
编写完成后运行项目，即可看到效果。
如果css样式没生效的话检查是否在index.ts文件里引入了index.less
import './index.less'
结语
这节把贪吃蛇游戏的HTML结构编写了出来，下节我们进行编写贪吃蛇游戏逻辑TS代码。
