<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
font-size: 14px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
#map {
width: 1024px;
height: 768px;
margin: 0 auto;
background: url(./games/bg.jpg) no-repeat;
position: relative;
}
#holes li {
position: absolute;
background-color: red;
border-radius: 50%;
cursor: url(./games/cur.png), auto;
}
#holes li img {
position: absolute;
width: 80%;
left: 10%;
bottom: 10px;
}
#holes li:nth-child(1),
#holes li:nth-child(2),
#holes li:nth-child(3) {
width: 124px;
height: 46px;
top: 223px;
}
#holes li:nth-child(1) {
left: 258px;
}
#holes li:nth-child(2) {
left: 448px;
}
#holes li:nth-child(3) {
left: 638px;
}
#holes li:nth-child(4),
#holes li:nth-child(5),
#holes li:nth-child(6) {
width: 145px;
height: 52px;
top: 357px;
}
#holes li:nth-child(4) {
left: 217px;
}
#holes li:nth-child(5) {
left: 436px;
}
#holes li:nth-child(6) {
left: 656px;
}
#holes li:nth-child(7),
#holes li:nth-child(8),
#holes li:nth-child(9) {
width: 162px;
height: 56px;
top: 508px;
}
#holes li:nth-child(7) {
left: 183px;
}
#holes li:nth-child(8) {
left: 428px;
}
#holes li:nth-child(9) {
left: 673px;
}
#startBtn {
width: 80px;
height: 80px;
background: url(./games/start.png) no-repeat;
position: absolute;
left: 893px;
top: 650px;
background-size: 100% 100%;
}
#progress {
position: absolute;
width: 200px;
height: 20px;
border: 2px solid #ff3301;
border-radius: 10px;
left: 50%;
top: 58px;
margin-left: -102px;
}
#showProgress {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: #ff3301;
width: 0;
overflow: hidden;
font-style: normal;
color: #fff;
text-align: right;
}
#score {
position: absolute;
left: 142px;
top: 63px;
height: 20px;
line-height: 20px;
color: #ff3301;
font-size: 20px;
font-weight: bold;
}
#order {
position: absolute;
right: 10px;
top: 50px;
border: 1px solid #ddd;
width: 249px;
border-radius: 4px;
}
#order li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ddd;
padding: 0 10px;
}
#order li .score {
float: right;
color: #ff3301;
}
#order li .num {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background: #ddd;
border-radius: 50%;
margin-right: 15px;
}
#order li:nth-child(1) .num {
background-color: gold;
}
#order li:nth-child(2) .num {
background-color: silver;
}
#order li:nth-child(3) .num {
background-color: lightcoral;
}
#order li:last-child {
border-bottom: 0;
}
</style>
</head>
<body>
<div id="map">
<ul id="holes">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" id="startBtn"></a>
<div id="progress"><i id="showProgress">0%</i></div>
<div id="score">0</div>
</div>
<div id="order"></div>
<script>
var holes = document.querySelectorAll("#holes>li");
var startBtn = document.querySelector("#startBtn");
var showProgress = document.querySelector("#showProgress");
var score = document.querySelector("#score");
var order = document.querySelector("#order");
var gameConfig = {
isPlay: false, //游戏的状态 true 正在游戏中
gameTime: 10, //总的游戏时间
playTime: 0, //游戏已经玩的时间
score: 0, //当局的分数
sucessScore: 5, //打中地鼠加分
failScore: 2, //没有打中地鼠减分
mouseOutTime: 500, //老鼠出动时间
mouseInTime: 2000, //老鼠自动消失的时间
mouseImgs: ['games/0.png', 'games/1.png', 'games/2.png', 'games/3.png', 'games/4.png', 'games/5.png'] //老鼠图片资源
}
var gameTimer = null;
var mouseTimer = null;
var userData = [];
window.onload = function() {
//页面加载时从本地存储中拿数据。如果本地存储还没有存userData,就是空数组。
userData = localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : [];
//显示在页面上：
orderList();
//给每个老鼠洞绑定一个点击事件
for (var i = 0; i < holes.length; i++) {
holes[i].onclick = function() {
//判断是否在游戏中 .不在游戏中，不能点
if (!gameConfig.isPlay) return;
//判断当前被点的li里面是否有图片，如果有图片，就表示打中了老鼠，加分，如果没有图片，没有打中老鼠，就减分
if (this.children.length > 0) {
this.innerHTML = ""; //打中了，图片消失
//加分：
gameConfig.score += gameConfig.sucessScore;
} else {
gameConfig.score -= gameConfig.failScore;
}
//显示分数
score.innerHTML = gameConfig.score;
}
}
}
//初始化
function init() {
gameConfig.score = 0;
showProgress.style.width = "0%";
showProgress.innerHTML = "0%";
score.innerHTML = "";
gameConfig.playTime = 0;
}
//开始游戏
startBtn.onclick = function() {
init();
if (gameConfig.isPlay) return;
gameConfig.isPlay = true; //正在游戏中
gameControl();
mouseOutFun()
}
//游戏总控制进度条
function gameControl() {
gameTimer = setInterval(function() {
gameConfig.playTime++;
var per = (gameConfig.playTime / gameConfig.gameTime * 100).toFixed(2);
showProgress.style.width = per + "%";
showProgress.innerHTML = per + "%";
if (gameConfig.playTime >= gameConfig.gameTime) {
//游戏结束：
//结束老鼠出动
clearInterval(mouseTimer);
//结束进度条
clearInterval(gameTimer);
gameConfig.isPlay = false;
//保存玩家信息
saveInfo();
}
}, 1000)
}
//保存玩家的信息
function saveInfo() {
var uname = prompt("请输入昵称");
if (!uname) {
return;
}
//先判断是否有这个昵称的玩家
var n = -1;
for (var i = 0; i < userData.length; i++) {
if (userData[i].uname == uname) { //如果
n = i;
break;
}
}
if (n == -1) { //之前没有玩家时
userData.push({
uname: uname,
uscore: gameConfig.score
});
} else { //之前有玩家。当现在的分数大于之前的分数，重新赋值
userData[n].uscore = userData[n].uscore < gameConfig.score ? gameConfig.score : userData[n].uscore;
}
localStorage.setItem("userData", JSON.stringify(userData));
//把玩家数据显示在页面上：
orderList();
}
//把玩家数据显示在页面上：
function orderList() {
//数组排序:降序
userData.sort(function(a, b) {
return b.uscore - a.uscore;
})
var orderHTML = "<ul>";
for (var i = 0; i < userData.length; i++) {
orderHTML += `<li>排名：${i+1},姓名：${userData[i].uname} ,分数：${userData[i].uscore}</li>`;
}
orderHTML += '</ul>';
order.innerHTML = orderHTML;
}
//老鼠出动：
function mouseOutFun() {
mouseTimer = setInterval(function() {
while (true) {
//随机一个洞 0-8
var index = Math.floor(Math.random() * 9);
//判断这个洞里面是否有老鼠,如果有，重新生成洞，如果没有退出while,去添加
if (holes[index].children.length == 0) {
break;
}
}
//生成一个图片对象(老鼠)
var mouse = document.createElement("img");
//随机一张图：
mouse.src = gameConfig.mouseImgs[Math.floor(Math.random() * 6)];
//图片对象添加到洞里面holes[index].
holes[index].appendChild(mouse);
setTimeout(function() {
//没有打中的时候自动消失
if (mouse.parentNode) { //判断这个图片是否还在li中。
mouse.parentNode.removeChild(mouse);
// 减分：
gameConfig.score -= gameConfig.failScore;
//显示分数
score.innerHTML = gameConfig.score;
}
}, gameConfig.mouseInTime);
}, gameConfig.mouseOutTime);
}
</script>
</body>
</html>
扫一扫
1221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
