锅打灰太狼游戏

来源：互联网发布：淘宝店铺招牌怎么上传编辑：程序博客网时间：2024/06/07 07:07

<!DOCTYPE html>

<html>

<head>

<title>锅打灰太狼游戏</title>

<style>

* {

margin: 0

padding: 0;

}

#wrap {

width: 320px;

height: 480px;

background: url(img/game_bg.jpg) 0 0 no-repeat;

position: relative;

}

#scoring {

position: absolute;

font-weight: bold;

left: 64px;

top: 12px;

color: white;

}

#countDown {

position: absolute;

background: url(img/progress.png);

width: 180px;

height: 16px;

left: 63px;

top: 66px;

}

#wolfs img {

position: absolute;

}

#menu {

position: absolute;

width: 320px;

text-align: center;

border: 1px solid black;

left: 0;

top: 200px;

}

#start,

#handle,

#gameOver {

font-size: 30px;

font-weight: bold;

color: #F60;

text-decoration: none;

display: block;

text-shadow: 0 0 5px yellow;

}

#gameOver {

position: absolute;

width: 320px;

top: 200px;

left: 0;

text-align: center;

display: none;

}

</style>

</head>

<body>

</div>

<a id="handle" href="###">游戏操作说明</a>

</div>

<div id="gameOver">gameOver</div>

</div>

</body>

function random(m, n) {

return Math.floor(Math.random() * (n - m) + m);

}

//当文档加载完成时（所有的界面资源）触发

window.onload = function() {

//显示分数对象

var scrolling = document.getElementById("scrollimg");

//倒计时对象

var countDown = document.getElementById("countDown");

//所有的灰太狼的父级div

var wolfs = document.getElementById("wolfs");

//开始菜单开始结束

var menu = document.getElementById("menu");

var start = document.getElementById("start");

var gameOver = document.getElementById("gameOver");

//封装一个函数，用来处理得分还是失分

function scoringFn(obj) {

//获取分数

var scores = parseInt(scoring.innerHTML);

//判断是灰太狼还是小灰灰

if (obj.type == "x") {

//减少10分

scoring.innerHTML = scores - 10;

} else {

//加10分

scoring.innerHTML = scores + 10;

}

//灰太狼随机出现的位置，使用数组来存储有对应关系的数据---狼所在的位置

//随机出现共有9个位置

var arrPosi = [{

l: "98px",

t: "115px"

}, {

l: "17px",

t: "160px"

}, {

l: "15px",

t: "220px"

}, {

l: "30px",

t: "293px"

}, {

l: "122px",

t: "273px"

}, {

l: "207px",

t: "295px"

}, {

l: "200px",

t: "211px"

}, {

l: "187px",

t: "141px"

}, {

l: "100px",

t: "185px"

}];

//灰太狼出现的定时器

var createWolfTime = null;

//获取倒计时图片的宽度

var countDownWidt = countDown.offsetWidth;

//设置倒计时的状态是否开始倒计时

var countDownBol = false; //假设false未开始

//设置倒计时的定时器\n

var countDownTimer = setInterval(function() {

//假设开始游戏，则执行以下程序（倒计时减少）

if (countDownBol) {

//倒计时图片宽度，每次-2

countDownWidt -= 2;

//如果剩余时间为0（图片宽度为0）

if (countDownWidt <= 0) {

//结束游戏菜单显示

gameOver.style.display = "block";

//同时关闭创建灰太狼的定时器

clearInterval(createWolfTime);

}

//没执行一次定时器

countDown.style.width = countDownWidt + "px";

}

}, 100);

var previous = -7; //记录随机灰太狼位置的上次下标

//处理点击开始游戏的事件

start.onclick = function() {

//当点击开始游戏时，需要将倒计时定时器的状态设置true，便于计时

countDownBol = true;

//隐藏菜单

menu.style.display = "none";

//创建灰太狼，每隔一秒创建一次

createWolfTime = setInterval(function() {

//创建用来显示灰太狼的节点img

var wolf = document.createElement("img");

//随机是灰太狼还是小灰灰，随机设置类型即可,路径后缀h灰太狼x小灰灰

wolf.type = random(0, 100) > 80 ? "x" : "h";

//设置属性值表明灰太狼出现时，此时属于第一张

wolf.index = 0; //初始值0，第一张

src = "img/h5.png";

//设置节点路径

wolf.src = "img/" + wolf.type + wolf.index + ".png";

//获取所有的灰太狼或者小灰灰

var nowWolfs = wolfs.children;

//随机下表位置

var r = random(0, arrPosi.length - 1);

//避免此次灰太狼的位置和上次的重复

var resultBol = true; //代表是否继续随机状态

while (resultBol) {

r = random(0, arrPosi.length - 1);

if (previous == r) {

//说明和上次位置相同

resultBol = true;

} else {

//不重复

resultBol = false;

}

//为r下标对应的位置对象里的left和top值负给灰太狼的位置

wolf.style.left = arrPosi[r].l;

wolf.style.top = arrPosi[r].t;

//将wolf插入到wolfs里

wolfs.appendChild(wolf);

//记录上次下表位置

var presIndex = r;

//处理灰太狼上升出来的定时器

wolf.upTimer = setInterval(function() {

wolf.index++;

if (wolf.index > 4) {

//清除灰太狼出现的定时器

clearInterval(wolf.upTimer);

//启动灰太狼躲藏的定时器

wolf.downFn();

}

wolf.src = "img/" + wolf.type + wolf.index + ".png";

}, 150);

//灰太狼躲藏的函数

wolf.downFn = function() {

//创建一个灰太狼躲藏的定时器

wolf.downTimer = setInterval(function() {

wolf.index--;

if (wolf.index <= 0) {

//移除定时器

clearInterval(wolf.downTimer);

//移出灰太狼所在的节点

wolfs.removeChild(wolf);

}

wolf.src = "img/" + wolf.type + wolf.index + ".png";

}, 150);

}

//记录点击的状态，假设true为已点击的灰太狼

wolf.clickBol = true;

//为所有的灰太狼添加点击事件

wolf.onclick = function() {

//如果状态值为false,则表明已点击

if (wolf.clickBol = false) {

return; //直接返回不作处理

}

wolf.clickBol = false; //每次点击之后改变状态

//处理灰太狼和小灰灰是得分还是失分

scoringFn(wolf);

//重置属性index为5目的是切换到击打灰太狼操作；

wolf.index = 5;

//清除灰太狼出现和躲藏的定时器

clearInterval(wolf.upTimer);

clearInterval(wolf.downTimer);

//点击灰太狼之后，创建一个定时器，用来处理击打灰太狼的动画

wolf.clickTimer = setInterval(function() {

wolf.index++;

if (wolf.index == 9) {

//清除击打灰太狼动画的定时器

clearInterval(wolf.clickTimer);

//移出灰太狼节点

wolfs.removeChild(wolf);

}

wolf.src = "img/" + wolf.type + wolf.index + ".png";

}, 150)

}

}, 1000);

}

</script>

</html>

阅读全文

0 0