js经典项目打地鼠如何利用js来实现打地鼠呢？
首先是游戏页面的制作
<!-- 游戏背板 -->
<div class=" backdrop">
<!-- 游戏积分器 -->
<div class="score">0</div>
<!-- 游戏计时器 -->
<div class="timebar"></div>
<!-- 狼 -->
<div class="wolves"></div>
<!-- 开始游戏 -->
<div class="menu1">
<div class="start">开始游戏</div>
<div class="intro">游戏说明</div>
</div>
<!-- 游戏说明介绍 -->
<div class="introGame">
<p>游戏说明</p>
<p>
在30秒内, 尽可能多的去打灰太狼, 每打1只灰太狼加10分, 每打1只小灰灰减10分, 请在30秒内尽可能的多得分
</p>
</div>
<!-- 游戏结束 -->
<div class="menu2">
<div class="gameOver">游戏结束</div>
<div class="newStart">重新开始</div>
</div>
</div>下一步写css加点样式让页面变的更好看
<style>
* {
margin: 0;
padding: 0;
}
/* 背景 */
.backdrop {
width: 320px;
height: 480px;
background: url("image/game_bg.jpg");
background-repeat: no-repeat;
background-size: 100%;
margin: 50px auto;
position: relative;
}
.score {
width: 100px;
line-height: 20px;
font-size: 15px;
color: white;
font-weight: bolder;
background: red;
position: absolute;
top: 15px;
left: 58px;
}
/* 计时器 */
.timebar {
width: 180px;
height: 16px;
background: url("image/progress.png");
position: absolute;
top: 66px;
left: 63px;
}
/* 设置狼 */
.wolvesDiv {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* 开始游戏 */
.menu1,
.menu2 {
width: 100%;
height: 200px;
position: absolute;
left: 0;
top: 190px;
}
.menu1 div,
.menu2 div {
text-align: center;
line-height: 50px;
font-size: 30px;
color: orange;
}
.menu2 {
display: none;
}
/* 游戏说明 */
.introGame {
width: 300px;
height: 200px;
background: rgba(0, 0, 0, 0.7);
color: white;
line-height: 40px;
position: absolute;
left: 10px;
top: 140px;
display: none;
}
.introGame p:nth-child(2) {
text-indent: 32px;
}
</style>然后重头戏来了
整体思路
先要写入的标签
再建立每个坑的位置的二维数组
在一个函数里面写狼的所有要干的事情
在另外一个函数写狼消失的函数
然后创建多个狼函数
定义当狼点击后判断狼的类型分数的操作
<script type="text/javascript">
var score = document.querySelector('.score');
var timebar = document.querySelector('.timebar');
var wolves = document.querySelector('.wolves');
var menu1 = document.querySelector('.menu1');
var start = document.querySelector('.start');
var intro = document.querySelector('.intro');
var introGame = document.querySelector('.introGame');
var menu2 = document.querySelector('.menu2');
var gameOver = document.querySelector('.gameOver');
var newStart = document.querySelector('.newStart');
var posArr = [
['98px', '115px'],
['17px', '160px'],
['15px', '220px'],
['30px', '293px'],
['122px', '273px'],
['207px', '295px'],
['200px', '211px'],
['187px', '141px'],
['100px', '185px']];//二维数组[[left,top],[left,top]...]
var carateTimer;//创建多个狼的计时器；
var score = 0;//记录分数；
// 游戏说明
intro.onclick = function () {
introGame.style.display = 'block';
}
introGame.onclick = function () {
this.style.display = 'none';
}
//游戏开始
start.onclick = function () {
menu1.style.display = 'none';
//倒计时开始；
changeTiming();
//创建狼
creatMoreWolvev()
}
function changeTiming() {
var timer = setInterval(function () {
var timeWidth = timebar.offsetWidth;
//当timeDiv的宽度小于0时需要停止计时器；
if (timeWidth > 0) {
timebar.style.width = timeWidth - 1 + 'px';
} else {
clearInterval(timer);
// 游戏结束
gameOverFn();
}
}, 100);
}
//游戏结束函数
function gameOverFn() {
//停止狼的计时器
clearInterval(carateTimer);
//清除页面所有的计时器；
var timer = setInterval(function () { }, 1000);
for (i = 0; i < timer; i++) {
clearInterval(i)
}
//显示游戏界面；
menu2.style.display = 'block';
}
//先创建一个狼；
function createWolf() {
var wolf = new Image();
wolf.type = randomFn(1, 100) > 80 ? 'x' : 'h';
wolf.index = 0;//狼显示图片的下标；
wolf.src = 'image/' + wolf.type + wolf.index + '.png';
wolf.clickAble = true;//狼能否被点击，默认是true；
wolf.style.position = 'absolute';
//随机狼的位置的下标；
var posInd;
var isHave = true;
//选择没有狼的位置
while (isHave) {
posInd = randomFn(0, 8);
var wolvesArr = wolves.children;
for (var i = 0; i < wolvesArr.length; i++) {
if (wolvesArr[i].style.left == posArr[posInd][0]) {
//表示该位置没有狼，需要重新随机
break;
}
}
if (i == wolvesArr.length) {
//表示该位置上没有狼，则结束while循环
isHave = false;
}
}
wolf.style.left = posArr[posInd][0];
wolf.style.top = posArr[posInd][1];
wolves.appendChild(wolf);
return wolf;
}
function randomFn(n1, n2) {
return Math.round(Math.random() * (n2 - n1) + n1);
}
//狼显示和消失的动画；
function wolfAnimateFn() {
var wolf = createWolf();
//狼显示的动画；
wolf.appearTimer = setInterval(function () {
if (wolf.index < 5) {
wolf.index++;
wolf.src = 'image/' + wolf.type + wolf.index + '.png';
} else {
//停止狼显示的动画,创建狼消失的动画；
clearInterval(wolf.appearTimer);
wolf.disappearTimer = setInterval(function () {
if (wolf.index > 0) {
wolf.index--;
wolf.src = 'image/' + wolf.type + wolf.index + '.png';
} else {
wolf.remove();
//停止狼消失动画的计时器；
clearInterval(wolf.disappearTimer);
}
}, 150);
}
}, 150);
// 执行狼被打的函数
clickWolf(wolf);
}
//创建多头狼
function creatMoreWolvev() {
carateTimer = setInterval(wolfAnimateFn, 1000);
}
// 狼被点击的函数
function clickWolf(wf) {
wf.onclick = function () {
if (wf.clickAble) {
// 停止狼出现和消失的计时器
clearInterval(wf.appearTimer);
clearInterval(wf.disappearTimer);
// 创建狼被打的动画
wf.index = 6;
wf.src = 'image/' + wf.type + wf.index + '.png';
wf.clickTimer = setInterval(function () {
if (wf.index < 9) {
wf.index++;
wf.src = 'image/' + wf.type + wf.index + '.png';
} else {
clearInterval(wf.clickTimer);
wf.remove();
}
}, 200);
// 狼被点击后，判断点击狼的类型
if (wf.type == 'h') {
score += 10;
} else {
score -= 10;
}
score.innerText = score;
}
wf.clickAble = false;//禁止狼再次被打
}
}
//定义游戏结束函数
//重新开始
newStart.onclick = function () {
// 强制刷新当前页面
history.go(0);
}
</script>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
