H5 js锅打灰太狼
2016-08-11 本文已影响0人
三叶松
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 标签样式初始化 */
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;
}
/分数，进度条部分/
#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;
}
/游戏结束部分/
#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;
// 灰太狼出现的位置
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"}
];
// 随机函数
function rand(min,max){
return parseInt(Math.random() * (max - min)) + min;
}
//创建灰太狼
function createWolf(){
// 创建灰太狼元素对象
var wolf = document.createElement("img");
// 出现灰太狼和小灰灰的几率
wolf.type = rand(0, 100) > 80 ? "x" : "h";
// 初始化图片下标
wolf.index = 0;
// 根据随机值的结果，设置显示的图片(此处下标初始为0，也就是默认显示灰太狼或小灰灰的第一张图)
// wolf.src = "images/" + wolf.type + wolf.index + ".png";
// 获取所有狼
var wolfs = wolfBox.children;
// 是否出现多只狼
var bol = true;
// 循环处理狼出现的位置
while (bol) {
//随机生成狼出现的位置
var randomPos = rand(0, arrayPosition.length);
for (var i = 0; i < wolfs.length; i++) {
// 判断每个狼的图片左值 是否等同于数组中随机得到的值
if (wolfs[i].offsetLeft == parseInt(
arrayPosition[randomPos].left)) {
//当狼的坐标确认后，退出循环
break;
}
}
if (i == wolfs.length) {
//当狼的数量达到后，退出循环
bol = false;
}
}
//设置生成狼的坐标
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();
// 定时器,让狼每秒出现一次
createWolfTimer = setInterval(function() {
// 获取创建出来的狼的图片位置
var wolf = createWolf();
// 灰太狼出现
wolf.appearTimer = setInterval(function() {
wolf.index++;
// 如果出现到击打前最后一个状态，
// 清除出现定时器，同时调用狼消失的函数
if (wolf.index > 4) {
clearInterval(wolf.appearTimer);
wolf.disappear();
}
// 将数据源赋给wolf对象的src
wolf.src = "images/" + wolf.type + wolf.index + ".png";
}, 150);
//灰太狼消失
wolf.disappear = function() {
// 对象的自定义属性用于记录定时器
wolf.disappearTimer = setInterval(function() {
wolf.index--;
//消失到最后一个状态时，清空一次狼的容器
if (wolf.index <= 0) {
// 如果当前容器中的长度大于0,那么不清除容器.
// 否则清除容器
wolfBox.children.length > 0 && wolfBox.removeChild(wolf);
// 清除定时器
clearInterval(wolf.disappearTimer);
}
wolf.src = "images/" + wolf.type + wolf.index + ".png";
}, 150);
};
// 击打灰太狼
beatWolf(wolf);
},800);
}
createWolf();
// 进度条
function progressFn(){
// 获取当前进度条的宽度 ==> 180
var percent = progressBar.offsetWidth;
// 循环定时器 处理进度条
var percentTime = setInterval(function(){
// 每100毫秒,我让percent - 1
percent = percent - 1;
if (percent <= 0) {
// 游戏结束
gameOverFn();
// 清除定时器
clearInterval(percentTime);
}
// 更改进度条的宽度
progressBar.style.width = percent + "px";
// 通过时间控制在多少秒内,执行完180像素宽
// 100 * 180 / 1000 = 18秒
},100);
}
// 游戏结束
function gameOverFn(){
// 游戏结束 展示出来
gameover.style.display = "block";
startAgain.style.display="block";
oLeave.style.display="block";
// 清除创建灰太狼的方法
clearInterval(createWolfTimer);
}
// 击打灰太狼
function beatWolf(wolf){
// 先默认狼是未被击打的
wolf.beat = false;
// 添加击打狼的点击事件
wolf.onclick = function(){
// 判断条件,如果狼是被打的,那么直接返回
if (wolf.beat == true) {
return;
}
// 上面的代码如果不走,那么就需要将击打状态为true
wolf.beat = true;
// 击打了之后,需要计分
scoringFn(wolf);
// 重置
// 第五张图是狼完全出现的状态
wolf.index = 5;
// 清除狼出现时的定时器
clearInterval(wolf.appearTimer);
// 清除狼消失时的定时器
clearInterval(wolf.disappearTimer);
// 击打效果
wolf.clickTimer = setInterval(function(){
wolf.index++;
// 如果狼的图已经进入到最后一个状态.
if (wolf.index >= 9) {
// 清除定时器
clearInterval(wolf.clickTimer);
// 判断是否清空一次狼的容器
wolfBox.children.length > 0 && wolfBox.removeChild(wolf);
// 结束代码的执行
return;
}
// 将随机的得到的数据源赋给对象src
wolf.src = "images/" + wolf.type + wolf.index + ".png";
},150);
}
}
// 计分器
function scoringFn(obj){
// 获取当前积分对象的值
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";
// 分数清零
scoreBox.innerHTML=0;
// 红色计时条出现
progressBar.style.width=180+'px';
// 调用开始游戏方法
gameStartFn();
}
// 开始游戏
start.onclick = function(){
// 调用开始游戏方法
gameStartFn();
}
</script>
</body>
</html>
