<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 標(biāo)簽樣式初始化 */
body{margin:0;padding:0;background:#fff;font-size:14px;font-family:Arial,Helvetica,'STHeiti','Microsoft YaHei','sans-serif'}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
img{border:0;}
ul,li{list-style-type:none;}
a{color:#00007F;text-decoration:none;}
a:hover{text-decoration:none;}
/* 自定義樣式 */
#outer{
position: relative;
width: 320px;
height: 480px;
background: url("images/game_bg.jpg") 0 0 no-repeat;
margin: 50px auto 0;
}
/分?jǐn)?shù)，進(jìn)度條部分/
#score_box{
position: absolute;
top: 13px;
left: 65px;
font-weight: bold;
font-size: 16px;
color: white;
}
#progress_bar{
position: absolute;
top: 66px;
left: 63px;
width: 180px;
height: 16px;
background: url("images/progress.png") 0 0 no-repeat;
}
#wolf_box img{
position: absolute;
}
/菜單部分/
#menu{
position: absolute;
top: 200px;
left: 0;
width: 320px;
text-align: center;
}
#start,#handle,#gameOver{
display: block;
line-height: 50px;
font-size: 30px;
font-weight: bold;
color: #f60;
text-shadow: 0 0 5px #ffff00;
text-decoration: none;
}
/游戲結(jié)束部分/
#gameOver{
position: absolute;
top: 150px;
left: 0;
width: 320px;
text-align: center;
display: none;
}
#startAgain{
position: absolute;
top: 220px;
left: 100px;
width: 120px;
font-size: 30px;
font-weight: bold;
color: #f60;
text-align: center;
display: none;
}
#leave{
position: absolute;
top: 260px;
left: 100px;
width: 120px;
font-size: 30px;
font-weight: bold;
color: #f60;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div id="outer">
<div id="score_box">0</div>
<div id="progress_bar"></div>
<div id="wolf_box"></div>
<div id="menu">
<a href="javascript:;" id="start">開始</a>
<a href="javascript:;" id="handle">游戲操作說明</a>
</div>
<div id="gameOver">game over!</div>
<div id="startAgain">重新開始</div>
<div id="leave">退出游戲</div>
</div>
<!-- 行為-->
<script>
//獲取元素
var scoreBox = document.getElementById("score_box");
var progressBar = document.getElementById("progress_bar");
var wolfBox = document.getElementById("wolf_box");
var menu = document.getElementById("menu");
var start = document.getElementById("start");
var gameover = document.getElementById("gameOver");
var startAgain=document.getElementById("startAgain");
var oLeave=document.getElementById('leave');
// 開始游戲定時器
var createWolfTimer = null;
// 灰太狼出現(xiàn)的位置
var arrayPosition = [
{left:"98px",top:"115px"},
{left:"17px",top:"160px"},
{left:"15px",top:"220px"},
{left:"30px",top:"293px"},
{left:"122px",top:"273px"},
{left:"207px",top:"295px"},
{left:"200px",top:"211px"},
{left:"187px",top:"141px"},
{left:"100px",top:"185px"}
];
// 隨機(jī)函數(shù)
function rand(min,max){
return parseInt(Math.random() * (max - min)) + min;
}
//創(chuàng)建灰太狼
function createWolf(){
// 創(chuàng)建灰太狼元素對象
var wolf = document.createElement("img");
// 出現(xiàn)灰太狼和小灰灰的幾率
wolf.type = rand(0, 100) > 80 ? "x" : "h";
// 初始化圖片下標(biāo)
wolf.index = 0;
// 根據(jù)隨機(jī)值的結(jié)果，設(shè)置顯示的圖片(此處下標(biāo)初始為0，也就是默認(rèn)顯示灰太狼或小灰灰的第一張圖)
// wolf.src = "images/" + wolf.type + wolf.index + ".png";
// 獲取所有狼
var wolfs = wolfBox.children;
// 是否出現(xiàn)多只狼
var bol = true;
// 循環(huán)處理狼出現(xiàn)的位置
while (bol) {
//隨機(jī)生成狼出現(xiàn)的位置
var randomPos = rand(0, arrayPosition.length);
for (var i = 0; i < wolfs.length; i++) {
// 判斷每個狼的圖片左值 是否等同于數(shù)組中隨機(jī)得到的值
if (wolfs[i].offsetLeft == parseInt(
arrayPosition[randomPos].left)) {
//當(dāng)狼的坐標(biāo)確認(rèn)后，退出循環(huán)
break;
}
}
if (i == wolfs.length) {
//當(dāng)狼的數(shù)量達(dá)到后，退出循環(huán)
bol = false;
}
}
//設(shè)置生成狼的坐標(biāo)
wolf.style.left = arrayPosition[randomPos].left;
wolf.style.top = arrayPosition[randomPos].top;
//添加到容器中
wolfBox.appendChild(wolf);
return wolf;
}
//游戲開始
function gameStartFn(){
// 隱藏元素
menu.style.display = "none";
gameover.style.display = "none";
// 開始計時
progressFn();
// 定時器,讓狼每秒出現(xiàn)一次
createWolfTimer = setInterval(function() {
// 獲取創(chuàng)建出來的狼的圖片位置
var wolf = createWolf();
// 灰太狼出現(xiàn)
wolf.appearTimer = setInterval(function() {
wolf.index++;
// 如果出現(xiàn)到擊打前最后一個狀態(tài)，
// 清除出現(xiàn)定時器，同時調(diào)用狼消失的函數(shù)
if (wolf.index > 4) {
clearInterval(wolf.appearTimer);
wolf.disappear();
}
// 將數(shù)據(jù)源賦給wolf對象的src
wolf.src = "images/" + wolf.type + wolf.index + ".png";
}, 150);
//灰太狼消失
wolf.disappear = function() {
// 對象的自定義屬性用于記錄定時器
wolf.disappearTimer = setInterval(function() {
wolf.index--;
//消失到最后一個狀態(tài)時，清空一次狼的容器
if (wolf.index <= 0) {
// 如果當(dāng)前容器中的長度大于0,那么不清除容器.
// 否則清除容器
wolfBox.children.length > 0 && wolfBox.removeChild(wolf);
// 清除定時器
clearInterval(wolf.disappearTimer);
}
wolf.src = "images/" + wolf.type + wolf.index + ".png";
}, 150);
};
// 擊打灰太狼
beatWolf(wolf);
},800);
}
createWolf();
// 進(jìn)度條
function progressFn(){
// 獲取當(dāng)前進(jìn)度條的寬度 ==> 180
var percent = progressBar.offsetWidth;
// 循環(huán)定時器 處理進(jìn)度條
var percentTime = setInterval(function(){
// 每100毫秒,我讓percent - 1
percent = percent - 1;
if (percent <= 0) {
// 游戲結(jié)束
gameOverFn();
// 清除定時器
clearInterval(percentTime);
}
// 更改進(jìn)度條的寬度
progressBar.style.width = percent + "px";
// 通過時間控制在多少秒內(nèi),執(zhí)行完180像素寬
// 100 * 180 / 1000 = 18秒
},100);
}
// 游戲結(jié)束
function gameOverFn(){
// 游戲結(jié)束 展示出來
gameover.style.display = "block";
startAgain.style.display="block";
oLeave.style.display="block";
// 清除創(chuàng)建灰太狼的方法
clearInterval(createWolfTimer);
}
// 擊打灰太狼
function beatWolf(wolf){
// 先默認(rèn)狼是未被擊打的
wolf.beat = false;
// 添加擊打狼的點(diǎn)擊事件
wolf.onclick = function(){
// 判斷條件,如果狼是被打的,那么直接返回
if (wolf.beat == true) {
return;
}
// 上面的代碼如果不走,那么就需要將擊打狀態(tài)為true
wolf.beat = true;
// 擊打了之后,需要計分
scoringFn(wolf);
// 重置
// 第五張圖是狼完全出現(xiàn)的狀態(tài)
wolf.index = 5;
// 清除狼出現(xiàn)時的定時器
clearInterval(wolf.appearTimer);
// 清除狼消失時的定時器
clearInterval(wolf.disappearTimer);
// 擊打效果
wolf.clickTimer = setInterval(function(){
wolf.index++;
// 如果狼的圖已經(jīng)進(jìn)入到最后一個狀態(tài).
if (wolf.index >= 9) {
// 清除定時器
clearInterval(wolf.clickTimer);
// 判斷是否清空一次狼的容器
wolfBox.children.length > 0 && wolfBox.removeChild(wolf);
// 結(jié)束代碼的執(zhí)行
return;
}
// 將隨機(jī)的得到的數(shù)據(jù)源賦給對象src
wolf.src = "images/" + wolf.type + wolf.index + ".png";
},150);
}
}
// 計分器
function scoringFn(obj){
// 獲取當(dāng)前積分對象的值
var scoringNum = parseInt(scoreBox.innerHTML);
// 判斷如果打到的是灰太狼,那么積分+10;
if (obj.type == "h") {
scoreBox.innerHTML = scoringNum + 10;
}else{
// 打到小灰灰,積分-10;
scoreBox.innerHTML = scoringNum - 10;
}
}
// 退出游戲
oLeave.onclick=function(){
outer.style.display="none";
}
// 重新開始
startAgain.onclick=function(){
gameOver.style.display="none";
startAgain.style.display="none";
oLeave.style.display="none";
// 分?jǐn)?shù)清零
scoreBox.innerHTML=0;
// 紅色計時條出現(xiàn)
progressBar.style.width=180+'px';
// 調(diào)用開始游戲方法
gameStartFn();
}
// 開始游戲
start.onclick = function(){
// 調(diào)用開始游戲方法
gameStartFn();
}
</script>
</body>
</html>
