html5游戏猪打狼,H5 js锅打灰太狼

Document

/* 标签样式初始化 */

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;

}

0

开始

游戏操作说明

game over!

重新开始

退出游戏

//获取元素

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.οnclick=function(){

outer.style.display="none";

}

// 重新开始

startAgain.οnclick=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();

}