0. 前言
現(xiàn)在網上的小游戲太多了许师，4399啊房蝉，7k7k啊什么的，就有這鍋打灰太狼的游戲微渠，覺得挺有意思搭幻，就做一個看看，哈哈３雅琛Ｌ刺！！
timg.jpg
1. 簡介
鍋打灰太狼是一款老少通吃云芦，男女皆宜的益智游戲俯逾，哈哈！
2. 思路
- 把靜態(tài)頁面做出來
- 找到每個洞穴
- 隨機出現(xiàn)灰太狼和小灰灰讓它們隨機從洞穴出現(xiàn)
- 點擊事件：打灰太狼加分舅逸，打小灰灰減分
- 添加時間桌肴，時間到了停止游戲
- 最終結果
3. 代碼實現(xiàn)
3.1 靜態(tài)頁面
HTML結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>灰太狼</title>
<link rel="stylesheet" type="text/css" href="灰太狼.css">
</head>
<body>
<div id="outer">
<audio id="music" src="網絡歌手貓咪寶貝.mp3"></audio>
<div id="fraction">0</div>
<div id="time"></div>
<div id="wolfs"></div>
<div id="startMenu">
<a href="#" id="start">Start</a>
</div>
<div id="endMenu"></div>
<a href="#" id="reload">重新開始</a>
</div>
<script type="text/javascript" src="Base.js"></script>
<script type="text/javascript" src="灰太狼.js"></script>
</body>
</html>
CSS樣式
*{
margin: 0;
padding: 0;
font-family: "微軟雅黑";
}
#outer{
background:url(game_bg.jpg) 0 0 no-repeat;
position: relative;
width: 320px;
height: 480px;
margin: 0 auto;
}
#fraction{
position: absolute;
left: 65px;
top: 13px;
color: white;
}
#time{
position: absolute;
width: 180px;
height: 16px;
left: 63px;
top: 66px;
background: url(progress.png) 0 0 no-repeat;
}
#wolfs{
position: absolute;
}
#wolfs img{
position:absolute;
}
#startMenu{
position: absolute;
width: 320px;
text-align: center;
left: 0;
top: 200px;
}
#start,#endMenu,#reload{
line-height:50px;
font-size:30px;
font-weight:bold;
color:#F00;
display:block;
text-decoration:none;
}
#endMenu{
position: absolute;
width: 320px;
text-align: center;
top: 200px;
left: 0;
display: none;
}
#reload{
position: absolute;
bottom: 0px;
left: 0px;
display: none;
}
圖片.png
3.2 找到洞穴
//洞穴坐標
arrPos = [["98px","115px"],["17px","160px"],["15px","221px"],["30px","294px"],["122px","274px"],["207px","296px"],["200px","212px"],["187px","142px"],["100px","192px"]];
3.3 隨機出現(xiàn)灰太狼和小灰灰讓它們隨機從洞穴出現(xiàn)
function creatWolf() {
wolfHouse.onclick = null;
//創(chuàng)建img顯示狼
var wolfImg = document.createElement("img");
//設置狼的種類
var wolfType = randomNum(0, 10) > 3 ? "h" : "x";
//隨機獲取狼窩的位置
var a = randomNum(0, 9);
var position = arrPos[a];
//設置初始圖片編號
wolfHouse.index = 0;
//設置未被點擊
wolfHouse.clicked = false;
//設置img的src屬性
wolfImg.src = wolfType + wolfHouse.index + ".png";
//將狼添加到頁面
wolfHouse.appendChild(wolfImg);
//設置位置
wolfHouse.style.left = position[0];
wolfHouse.style.top = position[1];
// 讓狼動起來
var tmp = -1;
var showTime = setInterval(function(){
tmp++;
if(tmp < liftCircle.length){
wolfHouse.index = liftCircle[tmp];
wolfImg.src = wolfType + wolfHouse.index + ".png";
}else{
clearInterval(showTime);
wolfHouse.removeChild(wolfImg);
}
},80);
3.4 點擊事件：打灰太狼加分，打小灰灰減分
wolfHouse.onclick = function() {
clearInterval(timer);
//如果執(zhí)行了點擊就不要在點擊了
if (this.clicked) {
return;
}
//分數
if (wolfType == "h") {
fraction.innerHTML = parseInt(fraction.innerHTML) + 10;
} else {
fraction.innerHTML = parseInt(fraction.innerHTML) - 10;
}
//關掉動畫
wolfHouse.index = 5;
clearInterval(showTime);
var hitWolf = setInterval(function(){
if(wolfHouse.index < 10){
console.log(wolfHouse.index);
wolfImg.src = wolfType + wolfHouse.index + ".png";
wolfHouse.index++;
}else{
clearInterval(hitWolf);
wolfHouse.removeChild(wolfImg);
timer = setInterval(func, 1000)
}
}, 100);
this.clicked = true;
}
}
GIF.gif
3.5 添加時間
function timeLineRun(){
var timeLineTimer = setInterval(function(){
if(timeLine.offsetWidth > 0) {
timeLine.style.width = timeLine.offsetWidth - 1 + "px";
} else {
//清除計時器
clearInterval(timeLineTimer);
clearInterval(timer);
//關閉背景音樂
jsMusic.pause();
//出現(xiàn)結束語
endMenu.innerHTML = "game over!<br/>你的得分是:" + fraction.innerHTML
endMenu.style.display = "block";
//出現(xiàn)重新開始
reloadBtn.style.display = "block";
}
}, 200);
}
3.6 最終結果
//進度條
var timeLine = document.getElementById("time");
//開始按鈕
var startBtn = document.getElementById("start");
//開始菜單
var startMenu = document.getElementById("startMenu");
//結束菜單
var endMenu = document.getElementById("endMenu");
//分數
var fraction = document.getElementById("fraction");
//重新開始按鈕
var reloadBtn = document.getElementById("reload");
//狼窩
var wolfHouse = document.getElementById("wolfs");
//背景音樂
var jsMusic = document.getElementById("music");
//動畫周期
var liftCircle = [0,1,2,3,4,5,4,3,2,1,0],
//洞穴坐標
arrPos = [["98px","115px"],["17px","160px"],["15px","221px"],["30px","294px"],["122px","274px"],["207px","296px"],["200px","212px"],["187px","142px"],["100px","192px"]];
var timer = 0;
//點擊開始
startBtn.onclick = function() {
startMenu.style.display = "none";
//進度條開始讀條
timeLineRun();
//背景音樂
// jsMusic.play();
timer = setInterval(func, 1000);
};
function func() {
if (timeLine.offsetWidth > 0) {
//創(chuàng)建灰太狼
creatWolf();
} else {
clearInterval(timer);
}
}
function timeLineRun(){
var timeLineTimer = setInterval(function(){
if(timeLine.offsetWidth > 0) {
timeLine.style.width = timeLine.offsetWidth - 1 + "px";
} else {
//清除計時器
clearInterval(timeLineTimer);
clearInterval(timer);
//關閉背景音樂
jsMusic.pause();
//出現(xiàn)結束語
endMenu.innerHTML = "game over!<br/>你的得分是:" + fraction.innerHTML
endMenu.style.display = "block";
//出現(xiàn)重新開始
reloadBtn.style.display = "block";
}
}, 200);
}
//重新開始
reloadBtn.onclick = function() {
window.location.reload();
}
function creatWolf() {
wolfHouse.onclick = null;
//創(chuàng)建img顯示狼
var wolfImg = document.createElement("img");
//設置狼的種類
var wolfType = randomNum(0, 10) > 3 ? "h" : "x";
//隨機獲取狼窩的位置
var a = randomNum(0, 9);
var position = arrPos[a];
//設置初始圖片編號
wolfHouse.index = 0;
//設置未被點擊
wolfHouse.clicked = false;
//設置img的src屬性
wolfImg.src = wolfType + wolfHouse.index + ".png";
//將狼添加到頁面
wolfHouse.appendChild(wolfImg);
//設置位置
wolfHouse.style.left = position[0];
wolfHouse.style.top = position[1];
// 讓狼動起來
var tmp = -1;
var showTime = setInterval(function(){
tmp++;
if(tmp < liftCircle.length){
wolfHouse.index = liftCircle[tmp];
wolfImg.src = wolfType + wolfHouse.index + ".png";
}else{
clearInterval(showTime);
wolfHouse.removeChild(wolfImg);
}
},80);
//給狼設置點擊事件
wolfHouse.onclick = function() {
clearInterval(timer);
//如果執(zhí)行了點擊就不要在點擊了
if (this.clicked) {
return;
}
//分數
if (wolfType == "h") {
fraction.innerHTML = parseInt(fraction.innerHTML) + 10;
} else {
fraction.innerHTML = parseInt(fraction.innerHTML) - 10;
}
//關掉動畫
wolfHouse.index = 5;
clearInterval(showTime);
var hitWolf = setInterval(function(){
if(wolfHouse.index < 10){
wolfImg.src = wolfType + wolfHouse.index + ".png";
wolfHouse.index++;
}else{
clearInterval(hitWolf);
wolfHouse.removeChild(wolfImg);
timer = setInterval(func, 1000)
}
}, 100);
this.clicked = true;
}
}
GIF.gif
4. 結束語
最后的效果也就是這樣了堡赔，如果你覺得哪里寫的不夠好识脆，有什么好的建議设联，可以給我留言告訴我善已，謝謝，三克油＠肜；煌拧！
