页面这里就贴上代码和效果图好了
游戏界面
// src/index.html
<!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">
<!-- snake中div是一节一节的蛇 -->
<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>
</body>
</html>
// src/styles/index.less
@bg-color: #b7d4a8;
* {
padding: 0;
margin: 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: 20px;
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;
// 开启绝对定位(相对于stage)
position: absolute;
}
}
#food {
width: 10px;
height: 10px;
// 开启绝对定位(相对于stage)
position: absolute;
top: 100px;
left: 40px;
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;
}
}
可以看到，#snake里面的div和#food相对于#stage绝对定位，我们后面将通过更改他们的left和top的值，实现蛇的移动。
页面开发告一段落，下一节，将开始用到ts，设计记分牌、蛇、食物以及游戏控制器这几个类。
