使用html和css实现简单的打地鼠游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>打地鼠游戏</title>
<!-- 设置样式 -->
<style type="text/css">
/* 设置整体页面的样式 */
#content {
margin: 0 auto;
widows: 1000px;
text-align: center;
margin-top: 40px;
background-image: url(image/bg.jpg);
}
# form1 {
margin: 20px 0;
}
/* 设置表格样式 */
table {
margin: 0 auto;
/* cursor: pointer; */
cursor: url("image/cursor.png") ,auto;
}
td {
margin: 0 auto;
width: 274px;
height: 140px;
/* background-image: url(image/hole.png); */
/* background-repeat: no-repeat; */
}
</style>
<script>
var td = new Array(), //设置一个数组保存每个格子中的地鼠
playing = false, // 设置游戏开始的值
score = 0, //游戏分数 打中一次积一分
beat = 0, //鼠标点击的次数 用于计算命中率
success = 0, //命中率
knock = 0, //击中老鼠的次数 用于计算命中率
countDown = 30, //倒计时
interId = null, // 定义周期性定时器
timeId = null; //设置一次性定时器
// 设置游戏函数
// 游戏结束
function GameOver() {
timeStop(); //直接停止 清空
playing = false
clearMouse() //清空老鼠
alert("游戏结束!\n 你获得的分数为:" + score + "\n 命中率为:" + success);
}
// 显示当前游戏所剩时间
function timeSho