<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Document</title>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: "宋體";
}
#outer {
background: url(img/game_bg.jpg) 0 0 no-repeat;
height: 480px;
width: 320px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
#scoring {
position: absolute;
font-weight: bold;
font-size: 16px;
color: white;
left: 65px;
top: 13px;
}
#countDown {
position: absolute;
background: url(img/progress.png) 0 0 no-repeat;
width: 180px;
height: 16px;
left: 63px;
top: 66px;
}
#wolfs img {
position: absolute;
}
#menu {
position: absolute;
width: 320px;
text-align: center;
left: 0;
top: 200px;
}
#start,
#handle,
#gameOver,
#Rgame {
line-height: 50px;
font-size: 30px;
font-weight: bold;
color: #ff5500;
display: block;
text-shadow: 0 0 5px #ffaa00;
text-decoration: none;
}
#gameOver {
position: absolute;
width: 320px;
text-align: center;
top: 200px;
left: 0;
display: none;
}
#Rgame {
position: absolute;
width: 320px;
text-align: center;
top: 250px;
left: 0;
display: none;
}
</style>
</head>
<body>
<div id="outer">
<!--這是分數-->
<div id="scoring">0</div>
<!--倒計時-->
<div id="countDown"></div>
<!--灰太狼們-->
<div id="wolfs">
<!-- <img src="img/h5.png"/> -->
</div>
<div id="menu">
<a href="javascript:void(0)" id="start">開始</a>
<a href="javascript:void(0)" id="handle">游戲規則</a>
</div>
<div id="gameOver">游戲結束!</div>
<div id="Rgame">回傳</div>
</div>
<script type="text/javascript">
// 獲取按鈕
var startBtn = document.querySelector("#start");
// 選單
var menu = document.querySelector("#menu");
//倒計時
var countDownDiv = document.querySelector("#countDown");
// 存放狼的div
var wolfsDiv = document.querySelector("#wolfs");
// 游戲結束彈框gameOver
var gameOverDiv = document.querySelector("#gameOver");
var RgameDiv = document.querySelector("#Rgame");
// 獲取存放分數的div->scoring
var scoring = document.querySelector("#scoring");
// 用一個物件，存放灰太狼出現的位置
var wolfStartArr = [{
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"
}];
// 用來創建狼的定時器
var createWolfTimer = null;
// 給按鈕添加點擊事件
startBtn.onclick = function() {
// 隱藏menu選單
menu.style.display = "none";
// 開始倒計時
var countDownWidth = countDownDiv.offsetWidth;
var timer = setInterval(function() {
// 每10毫秒減一
countDownWidth--;
// 重新給倒計時div賦值寬度，實作倒計時效果
countDownDiv.style.width = countDownWidth + "px";
if (countDownWidth <= 0) {
// 游戲結束，清除定時器
clearInterval(timer);
// 清除創建狼的定時器
clearInterval(createWolfTimer);
// 顯示彈框
gameOverDiv.style.display = "block";
RgameDiv.style.display = "block";
}
}, 10)//游戲運行的時間
// 創建狼
// 用來記錄上一個亂數(洞口上一次出現的位置)
var num = -9999999;
createWolfTimer = setInterval(function() {
// 亂數
var rand = randFn(0, wolfStartArr.length - 1); //0 1 1
// 隨機0~100的數
var randType = randFn(0, 100);
if (num == rand) {
return;
}
num = rand;
var wolf = new Image();
//設定狼出現的位置
wolf.style.left = wolfStartArr[rand].left;
wolf.style.top = wolfStartArr[rand].top;
// 隨機狼的型別(小灰灰or灰太狼)
randType > 90 ? wolf.type = "x" : wolf.type = "h";
// 圖片的下標
wolf.index = 0;
wolf.src = "img/" + wolf.type + wolf.index + ".png";
// 插入到divs里面
wolfsDiv.appendChild(wolf);
//用來狼出現的影片(通過計時器刷圖，實作影片)
wolf.upTimer = setInterval(function() {
wolf.index++;
if (wolf.index <= 5) {
wolf.src = "img/" + wolf.type + wolf.index + ".png";
} else {
clearInterval(wolf.upTimer);
wolf.downTimer = setInterval(function() {
wolf.index--;
if (wolf.index <= 0) {
clearInterval(wolf.downTimer);
wolfsDiv.removeChild(wolf);
}
wolf.src = "img/" + wolf.type + wolf.index + ".png";
}, 100)
}
}, 150)
var bol = true;
// 給wolf添加點擊事件
wolf.onclick = function() {
wolf.index = 5;
if (bol == true) {
// 清除定時器(狼出現，狼消失)
clearInterval(wolf.upTimer);
clearInterval(wolf.downTimer);
wolf.hitTimer = setInterval(function() {
wolf.index++;
if (wolf.index >= 9) {
clearInterval(wolf.hitTimer);
// 移除wolf
wolfsDiv.removeChild(wolf);
}
wolf.src = "img/" + wolf.type + wolf.index + ".png";
}, 100)
}
bol = false;
if (wolf.type == "x") {
// 減10分
scoring.innerHTML = parseInt(scoring.innerHTML) - 10;
} else if (wolf.type == "h") {
// 加10分
scoring.innerHTML = parseInt(scoring.innerHTML) + 10;
}
}
}, 800)
}
//游戲規則、點擊
handle.onclick = function() {
alert("在兩分鐘內點擊露頭的灰太狼和小灰灰，每次點擊灰太狼加10分，每次點擊小灰灰減10分！！");
}
//點擊回傳開始選單
Rgame.onclick=function(){
}
// 隨機函式
function randFn(min, max) {
return parseInt(Math.random() * (max - min + 1) + min);
}
// 阻止默認事件
document.onmousedown = function(ev) {
var e = ev || window.ev;
e.preventDefault();
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/302037.html
標籤：其他
下一篇：C語言小游戲——掃雷