<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01锅打灰太狼</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<!--整个游戏界面-->
<div class="gameFace">
<!--大的背景图-->
<img src="img/game_bg.jpg"/>
<!--分数-->
<div id="score">0</div>
<!--时间进度条-->
<img src="img/progress.png" id="progress"/>
<!--开始菜单-->
<div class="begin">
<a href="###" id="start">开始</a>
<a href="###">游戏说明</a>
</div>
<!--结束菜单-->
<div class="over">
<span>GAME OVER!</span>
<a href="###" id="again">再来一局</a>
</div>
</div>
</body>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>
*{
margin: 0;
padding: 0;
}
img{
vertical-align: top;
}
/*游戏界面*/
.gameFace{
width: 320px;
margin: 50px auto 0;
position: relative;
}
/*分数*/
#score{
position: absolute;
left: 60px;
top: 10px;
font-size: 20px;
color: white;
}
/*时间进度条*/
#progress {
width: 180px;
height: 16px;
position: absolute;
left: 63px;
top: 66px;
}
/*开始菜单/结束菜单*/
.begin,
.over
{
position: absolute;
left: 0;
right: 0;
top: 200px;
text-align:center ;
}
.begin a,
.over a,
.over span {
display: block;
text-decoration: none;
font-size: 40px;
color: red;
}
.over{
display: none;
}
/*将来用于给 JS生成 狼(img) 设置 class*/
.wolf {
width: 80px;
position: absolute;
}
// 获取 gameFace
var gameFace = document.getElementsByClassName("gameFace")[0];
// 获取分数
var scoreDiv = document.getElementById("score");
// 获取时间进度条
var progressDiv = document.getElementById("progress");
// 获取 开始菜单
var beginDiv = document.getElementsByClassName("begin")[0];
// 获取 开始按钮
var startBtn = document.getElementById("start");
// 获取 结束菜单
var overDiv = document.getElementsByClassName("over")[0];
// 获取 再来一局按钮
var againBtn = document.getElementById("again");
// 开始按钮点击事件
startBtn.onclick = function() {
// 1, 隐藏开始菜单
beginDiv.style.display = "none";
// 2, 出狼(游戏开始)
wolfOut();
// 3, 时间变化
changeTime();
}
// 再来一局按钮点击事件
againBtn.onclick = function() {
// 1, 隐藏结束菜单
overDiv.style.display = "none";
// 2, 分数清零
scoreDiv.innerHTML = 0;
// 3, 出狼(游戏开始)
wolfOut();
// 3, 时间变化
changeTime();
}
/*
* 出狼(游戏开始)
*/
var wolfTimer;
function wolfOut () {
// 控制出狼的频率
wolfTimer = setInterval(function() {
// 一, 创建 img
var img = creatWolf();
// 1, 随机狼的名字
var name = randomNum(0, 100) > 20 ? "h" : "x";
// 2, 切换 img 的素材
var imgIndex = 0;
var flagImg = true;// 判断狼是否反向
var timer2 = setInterval(function() {
img.src = "img/" + name + imgIndex + ".png";
if (imgIndex >= 5) {
flagImg = false
}
if (flagImg) {
imgIndex++
} else{
imgIndex--
}
// 如果反向播放完毕
if (imgIndex < 0) {
// 删除 img
gameFace.removeChild(img);
// 清除计时器
clearInterval(timer2);
}
}, 100);
// 二, 给 img 关联点击事件
var isClick = true;
img.onclick = function () {
if (isClick) {
isClick = false;
//1,分数变化
if (name == "x") {
scoreDiv.innerHTML -=10;
} else{
scoreDiv.innerHTML = parseInt(scoreDiv.innerHTML) +10
}
//2,图片变化
var hitImg = 6;
//清除没有被打时的 计时器
clearInterval(timer2);
var timer3 = setInterval(function() {
img.src = "img/" + name + hitImg + ".png";
hitImg++;
if (hitImg > 9) {
//删除 img
gameFace.removeChild(img);
//清除计时器:
clearInterval(timer3);
}
},200);
}
}
}, 1000);
}
// 定义二维数组, 存储洞口的位置
var points = [
[110, 137],
[30, 182],
[30, 245],
[195, 166],
[114, 216],
[210, 236],
[41, 318],
[130, 298],
[219, 319]
];
// 定义函数生成随机数
function randomNum (x, y) {
return Math.floor(Math.random() * (y - x + 1) + x);
}
// 定义函数 完成狼的创建
function creatWolf () {
// 创建
var img = document.createElement("img");
// 配置 img
img.className = "wolf";
// 随机下标
var ran = randomNum(0, 8);
// 从 points 中取出随机的洞口(点)
var point = points[ran];
img.style.left = point[0] + "px";
img.style.top = point[1] + "px";
gameFace.appendChild(img);
return img;
}
/*
* 时间变化
*/
function changeTime () {
var width = 180;
var timer1 = setInterval(function(){
width--;
progressDiv.style.width = width + "px"
if (width <= 0) {
// 清除计时器
clearInterval(timer1);
//停止出狼
clearInterval(wolfTimer);
// 显示结束菜单
overDiv.style.display = "block";
}
}, 100)
}