JS实现锅打灰太狼小游戏，点击动画以及加分减分
Posted Aurora_sm
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现锅打灰太狼小游戏，点击动画以及加分减分相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于JS实现锅打灰太狼小游戏，点击动画以及加分减分的主要内容，如果未能解决你的问题，请参考以下文章