JavaScript+CSS+HTML实现锅打灰太狼小游戏

简介：这款小游戏类似于打地鼠，点击开始游戏时会随机出现灰太狼和小灰灰，同时时间进度条开始启动；打到灰太狼时分数加十分，打到小灰灰时分数减十分；其实这款游戏的击打状态就只是改变了狼的图片。

主要思路及部分代码如下：

1.HTML+CSS完成页面布局

这一部分先创建页面所需要的一些标签，让后设置样式就好，这个没什么可说的（在布局的时候需要把狼出现的位置提前找好，方便JS里使用）。

布局完成后注意要先把结束页面隐藏等游戏结束时再显示；

布局成功后页面显示如下：



2.游戏开始时需要随机出现狼以及随机狼的种类，所以需要先创建一个随机函数以及创建狼并且计算狼出现的概率（灰太狼和小灰灰出现的概率），并且写循环判断一个洞口不能重复出现狼。

（这里确定狼出现的位置时就需要前面布局时记录的位置了）

将狼的位置放到数组中随机取

随机数的函数：

var wolf_ = document.querySelector(".wolf_")
//随机函数
function rand(min, max) {
return(parseInt(Math.random() * (max - min) + min));
}

创建狼的函数：

//狼的位置 数组
var wolfArr = [
[98, 115],
[20, 160],
[188, 140],
[16, 220],
[100, 190],
[200, 210],
[20, 290],
[110, 270],
[200, 290]
];
function createWolf() {
var wolf = document.createElement('img');
wolf.type = rand(0, 100) > 80 ? "x" : "h"; //狼的概率（三目运算符）
wolf.index = 0; //初始化图片的 索引
wolf.src = "img/" + wolf.type + wolf.index + ".png";

//所有狼��
var wolfs = wolf_.children;

var bol = true; //是否出现多只狼
while(bol) {
//随机洞口函数
var ran = rand(0, wolfArr.length);

for(var i = 0; i < wolfs.length; i++) {
if(wolfs[i].offsetLeft == wolfArr[ran][0]) {
break;
} //当狼的坐标确认后，退出循环
}
if(i == wolfs.length) {
bol = false;
//当狼的数量达到后，退出循环
}
}

//设置生成狼的坐标
wolf.style.left = wolfArr[ran][0] + 'px';
wolf.style.top = wolfArr[ran][1] + 'px';
wolf_.appendChild(wolf);
return wolf;
}

3.狼创建好了之后得让狼动起来，这里就需要定时器去控制了，每多少毫秒改变一次图片这里就看大家的喜好了，狼出现和消失的基本一样，这里要注意如果展示到打击前最后一个状态 清除出现时的定时器，同样再消失到最后一个状态时清除消失时的定时器并且清空一次狼的容器。

主要代码如下：

function gameStartFn() {
//创建狼
createwolfTimer = setInterval(function() {
var wolf = createWolf(); //获取到创建的狼的对象
//灰太狼出现
wolf.showTimer = setInterval(function() {
wolf.index++;
if(wolf.index > 4) { //如果展示到打击前最后一个状态 清除定时器
clearInterval(wolf.showTimer);
//                      wolf.disHide();
}
wolf.src = "img/" + wolf.type + wolf.index + '.png';
}, 80);
//灰太狼消失
wolf.disHide = function() {
wolf.downTimer = setInterval(function() {
wolf.index--;
if(wolf.index <= 0) { //消失到最后一个的时候 清空一次狼的容器
wolf_.removeChild(wolf);
clearInterval(wolf.downTimer)
}
wolf.src = "img/" + wolf.type + wolf.index + '.png';
}, 80)
}
beatwolf(wolf);//击打狼的函数
}, 800)

}

4.狼既然出现了那么下一步自然是去击打狼并且判断打到的是小灰灰还是灰太狼，打到灰太狼加分打到小灰灰则减分，在这里需要注意的是得加一个开关，判断狼被打了没，如果被打了就在不能打击了，若果没打就执行击打的效果。

代码如下：

var score = document.querySelector(".score");
//击打狼����效果
function beatwolf(wolf) {

wolf.beat = false;
wolf.onclick = function() {
if(wolf.beat === true) {
return;
}
wolf.beat = true; //设置状态为击打
var scoring = parseInt(score.innerHTML)
//积分
if(wolf.type == 'h') {
score.innerHTML = scoring + 10;
}
if(wolf.type == 'x') {
score.innerHTML = scoring - 10;
}
//重置
wolf.index = 5;
clearInterval(wolf.showTimer);//清除狼出现的计时器
clearInterval(wolf.downTimer);//清除狼消失的计时器
//击打效果
wolf.clickTimer = setInterval(function() {
wolf.index++;
if(wolf.index >= 9) { //狼的最后一个状态
clearInterval(wolf.clickTimer);
wolf_.removeChild(wolf)
return;
}
wolf.src = "img/" + wolf.type + wolf.index + '.png';//改变狼的图片
}, 80)
}
}

5，到这里比较难的部分就已经做完了，现在就需要给它一个时间，在规定的时间完成后结束游戏，也就是时间的进度条跑完之后游戏就结束，在进度条这个地方首先获取进度条的可见宽度，给一个定时器，让进度条的宽度减少并且更新进度条宽度，当进度条跑完之后也就是进度条的宽度小于等于零是游戏结束。

代码如下：

function daojishi() {
jindutiaoTimer = setInterval(function() {
jingdutiaoWidth -= 1;//宽度每100毫秒减一
jingdutiao.style.width = jingdutiaoWidth + 'px';//每一百毫秒更新一次进度条的宽度
if(jingdutiaoWidth <= 0) {//判断当进度条宽度小于等于0时游戏结束，并且清除图片；
gameoverFn();
wolf_.innerHTML = ''
}

}, 100);
}

6.进度条结束游戏结束，游戏结束时就要清除所有的定时器，并且让结束的界面显示出来还要使进度条的的计时器也要清楚；

代码如下：

function clearTimer() {
//找出所有定时器
var timer = setInterval(function() {}, 10);
//循环清除定时器
for(var i = 0; i < timer; i++) {
clearInterval(i);
}
}
//游戏结束函数
var gameover = document.querySelector(".gameover")
function gameoverFn() {

gameover.style.display = 'block';//显示游戏结束界面
clearInterval(jindutiaoTimer);//清除进度条计时器
clearTimer();//调用清除所有定时器的方法
}

7.最后游戏重新开始，点击按钮使分数为零并且重新给进度条一个宽度（原始宽度），使结束页面隐藏并且执行游戏开始时的方法以及进度条的计时器，使游戏重新开始。

代码如下：

var restart = document.querySelector(".restart");
restart.onclick = restart_;//给按钮绑定点击事件

function restart_() {
gameover.style.display = 'none';//隐藏游戏结束的页面
jingdutiaoWidth = 180;//给进度条重新赋值
score.innerHTML = '0';//分数置零
gameStartFn();//调用游戏开始函数
daojishi()//调用进度条的函数
}

源码如下：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.canvas {
width: 320px;
height: 480px;
background: url(img/game_bg.jpg);
margin: auto;
position: relative;
}

.score {
position: absolute;
left: 60px;
top: 15px;
font-size: 1.4em;
color: white;
}

.jindutiao {
position: absolute;
top: 65px;
left: 63px;
width: 180px;
height: 17px;
border-radius: 10px;
background: red;
}

.wolf_ img {
position: absolute;
}

.wolfmenu {
position: absolute;
left: 0px;
top: 0px;
width: 320px;
height: 480px;
background: rgba(0, 0, 0, 0.5);
}

.wolfmenu .gamestart {
position: absolute;
left: 100px;
top: 200px;
width: 120px;
height: 50px;
border-radius: 10px;
text-align: center;
line-height: 50px;
background: peru;
color: powderblue;
}

.gameover {
position: absolute;
left: 0px;
top: 0px;
width: 320px;
height: 480px;
background: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 480px;
font-size: 2em;
color: white;
display: none;
}

.gameover .restart {
display: inline-block;
width: 120px;
height: 50px;
border-radius: 10px;
background: peru;
position: absolute;
left: 100px;
top: 300px;
font-size: 0.8em;
color: white;
line-height: 50px;
}
</style>
</head>

<body>
<div class="canvas">
<!--积分-->
<div class="score">
0
</div>
<!--时间进度条-->
<div class="jindutiao">

</div>
<!--狼��-->
<div class="wolf_">

</div>
<!--开始页面-->
<div class="wolfmenu">
<span class="gamestart">开始</span>
</div>
<!--结束页面-->
<div class="gameover">
GAMEOVER!!!!
<span class="restart">重新开始</span>
</div>
</div>
</body>
<script type="text/javascript">
//
var wolfmenu = document.querySelector(".wolfmenu");
var gamestart = document.querySelector(".gamestart")
//狼的位置 数组
var wolfArr = [
[98, 115],
[20, 160],
[188, 140],
[16, 220],
[100, 190],
[200, 210],
[20, 290],
[110, 270],
[200, 290]
];
//按钮
gamestart.onclick = gamestart_;

function gamestart_() {
wolfmenu.style.display = 'none';
gameStartFn();
daojishi();
}
var createwolfTimer;
var jingdutiao = document.querySelector(".jindutiao")
//游戏开始
function gameStartFn() {
//创建狼
createwolfTimer = setInterval(function() {
var wolf = createWolf(); //获取到创建的狼的对象
//灰太狼出现
wolf.showTimer = setInterval(function() {
wolf.index++;
if(wolf.index > 4) { //如果展示到打击前最后一个状态 清除定时器
clearInterval(wolf.showTimer);
//                      wolf.disHide();
}
wolf.src = "img/" + wolf.type + wolf.index + '.png';
}, 80);
//灰太狼消失
wolf.disHide = function() {
wolf.downTimer = setInterval(function() {
wolf.index--;
if(wolf.index <= 0) { //消失到最后一个的时候 清空一次狼的容器
wolf_.removeChild(wolf);
clearInterval(wolf.downTimer)
}
wolf.src = "img/" + wolf.type + wolf.index + '.png';
}, 80)
}
beatwolf(wolf);
}, 800)

}
var score = document.querySelector(".score");
//击打狼����效果
function beatwolf(wolf) {

wolf.beat = false;
wolf.onclick = function() {
if(wolf.beat === true) {
return;
}
wolf.beat = true; //设置状态为击打
var scoring = parseInt(score.innerHTML)
//积分
if(wolf.type == 'h') {
score.innerHTML = scoring + 10;
}
if(wolf.type == 'x') {
score.innerHTML = scoring - 10;
}
//重置
wolf.index = 5;
clearInterval(wolf.showTimer);
clearInterval(wolf.downTimer);
//击打效果
wolf.clickTimer = setInterval(function() {
wolf.index++;
if(wolf.index >= 9) { //狼的最后一个状态
clearInterval(wolf.clickTimer);
wolf_.removeChild(wolf)
return;
}
wolf.src = "img/" + wolf.type + wolf.index + '.png'; //改变狼的图片
}, 80)
}
}
var wolf_ = document.querySelector(".wolf_")
//随机函数
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; //初始化图片的 索引
wolf.src = "img/" + wolf.type + wolf.index + ".png";

//所有狼��
var wolfs = wolf_.children;

var bol = true; //是否出现多只狼
while(bol) {
//随机洞口函数
var ran = rand(0, wolfArr.length);

for(var i = 0; i < wolfs.length; i++) {
if(wolfs[i].offsetLeft == wolfArr[ran][0]) {
break;
} //当狼的坐标确认后，退出循环
}
if(i == wolfs.length) {
bol = false;
//当狼的数量达到后，退出循环
}
}

//设置生成狼的坐标
wolf.style.left = wolfArr[ran][0] + 'px';
wolf.style.top = wolfArr[ran][1] + 'px';
wolf_.appendChild(wolf);
return wolf;
}
//游戏结束函数
var gameover = document.querySelector(".gameover")

function gameoverFn() {

gameover.style.display = 'block';
clearInterval(jindutiaoTimer);
clearTimer();
}
var jingdutiaoWidth = jingdutiao.offsetWidth;
console.log(jingdutiaoWidth)
//开始计时
function daojishi() {
jindutiaoTimer = setInterval(function() {
jingdutiaoWidth -= 1;
jingdutiao.style.width = jingdutiaoWidth + 'px';
if(jingdutiaoWidth <= 0) {
gameoverFn();
wolf_.innerHTML = ''
}

}, 100);
}
//清除所有定时器
function clearTimer() {
//找出所有定时器
var timer = setInterval(function() {}, 10);
//循环清除定时器
for(var i = 0; i < timer; i++) {
clearInterval(i);
}
}
//重新开始
var restart = document.querySelector(".restart");
restart.onclick = restart_;

function restart_() {
gameover.style.display = 'none';
jingdutiaoWidth = 180;
score.innerHTML = '0';
gameStartFn();
daojishi()
}
</script>

</html>

图片的素材暂时还没上传，最迟10月1号之前上传！！！！！望见谅