<html>
<head>
<title>tank</title>
<style type="text/css">
#map {
position: absolute;
width: 500px;
height: 500px;
top: 50px;
/*采用left:50%;margin-left=-0.5width;实现水平居中*/
left: 50%;
margin-left: -250px;
border: 5px solid green;
border-collapse: collapse;
}
span {
position: relative;
display: inline-block;
width: 90px;
height: 25px;
margin-left: 20px;
font-size: 14px;
text-align: center;
background-color: #4CAF50;
color: white;
cursor: pointer;
border-radius: 5px;
}
#ifo {
position: absolute;
width: 500px;
height: 40px;
top: 25px;
left: 50%;
margin-left: -250px;
}
#score {
background-color: white;
font-weight: bolder;
color: #4CAF50;
}
</style>
</head>
<body>
<div id="ifo">
<span id="stop">STOP</span>
<span id="restart">RESTART</span>
<span id="speed">SPEED</span>
<span id="score"></span>
</div>
<div id="map"></div>
</body>
<script type="text/javascript">
//map=地图对象;snake=存着蛇身体小方块的数组;food=食物对象;dir=蛇前进方向;score=得分;speed=蛇前行时间间隔;running=游戏状态
var m
原生html贪吃蛇
最新推荐文章于 2024-04-02 02:40:05 发布
本文将介绍如何利用纯HTML和JavaScript实现一个经典的贪吃蛇游戏。通过创建游戏网格,定义蛇和食物的移动规则,以及碰撞检测,你将了解到如何构建一个交互式的网页应用。这个项目适合初学者提升前端开发技能。
摘要由CSDN通过智能技术生成