看了人家视频上写的贪吃蛇,瞬间觉得自己low爆了。。。。就学他写了三遍,以我的记性,觉得还是有必要记录下过程,以便记忆。
先看下截图:
首先html分析:
注:下列的id是用在js里的,class是用在css里的
<div class="startPage" id="startPage"> <!-- 这是开始页的大页面 -->
<div class="startBtn" id="startBtn"></div> <!-- 载在大页面上的开始按钮键 -->
</div>
<div class="wrapper"> <!-- 开始后的大页面 -->
<div class="left-side"> <!-- 将大页面分出一个左边,用来承载暂停和计分的按键 -->
<div class="header"> <!-- 在这个左边的开头写个用来载计分的框 -->
<div class="score"> <!-- 显示“分数” -->
分数:
<span id="score"></span> <!-- 用在之后js里的动态计分操作 -->
</div>
</div>
<img src="img/zanting.png" id="startP" alt=""> <!-- 显示暂停按钮,这个按钮用图片代替 -->
</div>
<div class="main"> <!-- 大页面中的主页面,和左边的区分下 -->
<div class="content" id="content"></div> <!-- 游戏区域,在js里控制 -->
</div>
</div>
<div class="lose" id="lose"> <!-- 游戏结束的大页面 -->
<div class="con"> <!-- 游戏结束后的计分清单 -->
<span class="loseScore" id="loseScore"> <!-- js动态计分 -->
</span>
<div class="close" id="close"></div> <!-- 游戏结束计分上的关闭按钮 -->
</div>
</div>
上述是贪吃蛇的全部html代码,将贪吃蛇游戏的大致界面划分出来。
接下来是css代码:
*{ /* css的书写习惯,先将所有的margin和padding的默认值都去掉 */
margin: 0;
padding: 0;
}
.startPage{ /* 开始游戏的大页面设置 */
width: 100%;
height: 640px; /* 游戏界面高度,这是我按自己电脑浏览器大小设置的 */
position: absolute; /* 给它个绝对定位 */
z-index: 999; /* 显示在界面最前头 */
}
.startBtn{ /* 游戏开始按键的设置 */
width: 200px; /* 设置按键图片的宽和高 */
height: 50px;
position: absolute; /* 从这到margin:auto,这几行放在一起,表示居中在大页面的正中间 */
top: 0;
left: 0;
bottom: 0;
right: 0;
margin:auto;
background-image: url(img/begin.png); /* 把开始按键的图片放入 */
background-size: 100% 100%; /* 将图片平摊开 */
cursor: pointer; /* 鼠标划入时,箭头变成小手 */
}
.wrapper{ /* 游戏开始后的大页面 */
width: 100%;
height: 640px; /* 同上含义 */
background-image: url('img/bj1.png'); /* 放入游戏背景图片 */
background-size: 100% 100%; /* 平摊 */
position: relative; /* 相对定位 */
top: 0px;
left: 0px;
}
.left-side{ /* 在大页面上划分出的左边部分 */
width: 14%; /* 占大页面的14%宽度 */
height: 640px; /* 高度 */
position: absolute; /* 绝对定位 */
top: 0;
left: 0;
}
.left-side img{ /* 显示暂停按键图片的设置 */
width: 120px; /* 设置图片的宽高 */
height: 40px;
position: absolute; /* 绝对定位 */
left: 15%; /* 该图片在左边划分框中,距离左边距15% */
top: 100px; /* 图片距离上边距100px */
}
.header{ /* 用来承载计分的框 */
width: 100%;
height: 40px;
margin-top: 30px; /* 外边距30px */
position: