一款原生JS益智小游戏贪吃蛇,通过方向键来控制蛇的运动轨迹,不停的吞吃指定区域内出现的蓝色蛋,只要不超出区域就可以一直玩下去。
页面的head部分,需简单设置页面元素的样式,代码如下:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
text-align: center;
}
#map {
width: 800px;
height: 600px;
background-color: #ccc;
position: relative;
margin: 20px auto;
}
#map img{
position: absolute;
height: 600px;
left:-209px;
top: 0;
z-index: 99;
}
#goal {
margin: 30px;
float: left;
}
.btn {
padding: 0 5px;
margin: 10px 10px 10px 0;
height: 38px;
border: 1px solid #0094ff;
font-size: 22px;
text-align: center;
line-height: 38px;
color: #0094ff;
cursor: pointer;
transition: all 0.3s;
}
.btn:hover {
background-color: #0094ff;
color: #fff;
}
</style>
页面的body部分,需设置好页面元素的容器,代码如下:
<p id="goal">得分:0</p>
<input type="button" value="老年人手速" class="btn"/>
<input type="button" value="单身手速" class="btn"/>
<div id="map"><img src="./img/snake.jpg" alt=""/></div>
页面的底部,需引入必要的JS文件,并启用对应的插件,代码如下:
<script type="text/javascript" src="js/food.js"></script>
<script type="text/javascript" src="js/snake.js"></script>
<script type="text/javascript" src="js/game.js" charset="utf-8"></script>
<script type="text/javascript">
var game = new Game();
game.food = new Food();
game.snake = new Snake();
game.chooseDifficulty();
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791