第一步不用想太多,构建一个简单的游戏窗体即可。
屏幕不用设定的太大,600px足以。这里我们为了方便查看效果把窗口大小设死,但是后续我们会把大多数定死的数值放在js变量中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
#gameScreen{
/*屏幕初始化*/
border: gray 20px solid;
position: relative;
margin: auto;
width:600px;
height:600px;
}
#gameStart{
/*开始按钮初始化*/
width: 100px;
height: 50px;
margin: auto;
display: block;
}
#score{
/*积分初始化*/
position: relative;
left: 780px;
top:-35px;
width: 100px;
height: 50px;
font-size: 20px;
color: black;
}
</style>
</head>
<body>
<div id="gameScreen"></div>
<input type="button" id="gameStart" value="开始游戏">
<div id="score">积分:0</div>
</body>
</html>