如何基于如何基于javascript实现贪吃蛇游戏实现贪吃蛇游戏
这篇文章主要介绍了如何基于javascript实现贪吃蛇游戏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定
的参考学习价值,需要的朋友可以参考下
html代码:
<div class="content">
<div class="btn startBtn"> <!-- 开始按钮 -->
<button type="button"></button>
</div>
<div class="btn stopBtn"> <!-- 暂停按钮 -->
<button type="button"></button>
</div>
<div id="snakeWrap"></div> <!-- 主题内容 -->
</div>
css代码:
* {
margin: 0;
padding: 0;
}
body {
background-color: #565F65;
width: 100%;
height: 10vh;
overflow: hidden;
}
.content {
width: 500px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
background-color: #565F65;
border: 10px solid #E7E7E7;
box-shadow: inset 0px 0px 5px 2px #000;
}
.btn {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .3); /*游戏未开始时和暂停时的遮罩*/
z-index: 2;
}
.btn button {
background: none;
border: none;
background-size: 100% 100%;
cursor: pointer;
outline: none;
position: absolute;
left: 50%;
top: 50%;
}
.startBtn button{
width: 170px;
height: 80px;
background-image: url(img/startbtn.png);
margin-top: -40px;
margin-left: -85px;
}
.stopBtn {