* {
margin: 0
padding: 0;
}
#wrap {
width: 320px;
height: 480px;
background: url(img/game_bg.jpg) 0 0 no-repeat;
position: relative;
}
#scoring {
position: absolute;
font-weight: bold;
left: 64px;
top: 12px;
color: white;
}
#countDown {
position: absolute;
background: url(img/progress.png);
width: 180px;
height: 16px;
left: 63px;
top: 66px;
}
#wolfs img {
position: absolute;
}
#menu {
position: absolute;
width: 320px;
text-align: center;
border: 1px solid black;
left: 0;
top: 200px;
}
#start,
#handle,
#gameOver {
font-size: 30px;
font-weight: bold;
color: #F60;
text-decoration: none;
display: block;
text-shadow: 0 0 5px yellow;
}
#gameOver {
position: absolute;
width: 320px;
top: 200px;
left: 0;
text-align: center;
display: none;
}
function random(m, n) {
return Math.floor(Math.random() * (n - m) + m);
}
//当文档加载完成时(所有的界面资源)触发
window.onload = function() {
//显示分数对象
var scrolling = document.getElementById("scrollimg");
//倒计时对象
var countDown = document.getElementById("countDown");
//所有的灰太狼的父级div
var wolfs = document.getElementById("wolfs");
//开始菜单 开始 结束
var menu = document.getElementById("menu");
var start = document.getElementById("start");
var gameOver = document.getElementById("gameOver");
//封装一个函数,用来处理得分还是失分
function scoringFn(obj) {
//获取分数
var scores = parseInt(scoring.innerHTML);
//判断是灰太狼还是小灰灰
if (obj.type == "x") {
//减少10分
scoring.innerHTML = scores - 10;
} else {
//加10分
scoring.innerHTML = scores + 10;
}
}
//灰太狼随机出现的位置,使用数组来存储有对应关系的数据---狼所在的位置
//随机出现共有9个位置
var arrPosi = [{
l: "98px",
t: "115px"
}, {
l: "17px",
t: "160px"
}, {
l: "15px",
t: "220px"
}, {
l: "30px",
t: "293px"
}, {
l: "122px",
t: "273px"
}, {
l: "207px",
t: "295px"
}, {
l: "200px",
t: "211px"
}, {
l: "187px",
t: "141px"
}, {
l: "100px",
t: "185px"
}];
//灰太狼出现的定时器
var createWolfTime = null;
//获取倒计时图片的宽度
var countDownWidt = countDown.offsetWidth;
//设置倒计时的状态 是否开始倒计时
var countDownBol = false; //假设false未开始
//设置倒计时的定时器\n
var countDownTimer = setInterval(function() {
//假设开始游戏,则执行以下程序(倒计时减少)
if (countDownBol) {
//倒计时图片宽度,每次-2
countDownWidt -= 2;
//如果剩余时间为0(图片宽度为0)
if (countDownWidt <= 0) {
//结束游戏菜单显示
gameOver.style.display = "block";
//同时关闭创建灰太狼的定时器
clearInterval(createWolfTime);
}
//没执行一次定时器
countDown.style.width = countDownWidt + "px";
}
}, 100);
var previous = -7; //记录随机灰太狼位置的上次下标
//处理点击开始游戏的事件
start.onclick = function() {
//当点击开始游戏时,需要将倒计时定时器的状态设置true,便于计时
countDownBol = true;
//隐藏菜单
menu.style.display = "none";
//创建灰太狼,每隔一秒创建一次
createWolfTime = setInterval(function() {
//创建用来显示灰太狼的节点img
var wolf = document.createElement("img");
//随机是灰太狼还是小灰灰,随机设置类型即可,路径后缀h灰太狼x小灰灰
wolf.type = random(0, 100) > 80 ? "x" : "h";
//设置属性值 表明灰太狼出现时,此时属于第一张
wolf.index = 0; //初始值0,第一张
src = "img/h5.png";
//设置节点路径
wolf.src = "img/" + wolf.type + wolf.index + ".png";
//获取所有的灰太狼或者小灰灰
var nowWolfs = wolfs.children;
//随机下表位置
var r = random(0, arrPosi.length - 1);
//避免此次灰太狼的位置和上次的重复
var resultBol = true; //代表是否继续随机状态
while (resultBol) {
r = random(0, arrPosi.length - 1);
if (previous == r) {
//说明和上次位置相同
resultBol = true;
} else {
//不重复
resultBol = false;
}
}
// 为r下标对应的位置对象里的left和top值负给灰太狼的位置
wolf.style.left = arrPosi[r].l;
wolf.style.top = arrPosi[r].t;
// 将wolf插入到wolfs里
wolfs.appendChild(wolf);
//记录上次下表位置
var presIndex = r;
//处理灰太狼上升出来的定时器
wolf.upTimer = setInterval(function() {
wolf.index++;
if (wolf.index > 4) {
//清除灰太狼出现的定时器
clearInterval(wolf.upTimer);
//启动灰太狼躲藏的定时器
wolf.downFn();
}
wolf.src = "img/" + wolf.type + wolf.index + ".png";
}, 150);
//灰太狼躲藏的函数
wolf.downFn = function() {
//创建一个灰太狼躲藏的定时器
wolf.downTimer = setInterval(function() {
wolf.index--;
if (wolf.index <= 0) {
//移除定时器
clearInterval(wolf.downTimer);
//移出灰太狼所在的节点
wolfs.removeChild(wolf);
}
wolf.src = "img/" + wolf.type + wolf.index + ".png";
}, 150);
}
//记录点击的状态,假设true为已点击的灰太狼
wolf.clickBol = true;
//为所有的灰太狼添加点击事件
wolf.onclick = function() {
//如果状态值为false,则表明已点击
if (wolf.clickBol = false) {
return; //直接返回不作处理
}
wolf.clickBol = false; //每次点击之后改变状态
//处理灰太狼和小灰灰是得分还是失分
scoringFn(wolf);
//重置属性index为5目的是切换到击打灰太狼操作;
wolf.index = 5;
//清除灰太狼出现和躲藏的定时器
clearInterval(wolf.upTimer);
clearInterval(wolf.downTimer);
//点击灰太狼之后,创建一个定时器,用来处理击打灰太狼的动画
wolf.clickTimer = setInterval(function() {
wolf.index++;
if (wolf.index == 9) {
//清除击打灰太狼动画的定时器
clearInterval(wolf.clickTimer);
//移出灰太狼节点
wolfs.removeChild(wolf);
}
wolf.src = "img/" + wolf.type + wolf.index + ".png";
}, 150)
}
}, 1000);
}
}