js打地鼠游戏
- 时间：2019年9月5日
- 类型：js练习
- 人员：魏欣怡
本案例素材联系魏欣怡或下载
效果图
案例说明
大地鼠，达到一个加10分，没有打到生命值减1
第一步：实现布局效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打地鼠</title>
</head>
<body>
<div class="game">
<div class="ground">
<div class="score">
<img src="images/score.png">
<span class="scoreCon">0</span>
</div>
<div class="life">
<span>生命:</span>
<span class="lifeCon">10</span>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="wxy.js"></script>
</html>
第二步：布局样式
*{
margin:0;
padding:0;
}
.game{
position: relative;
width:750px;
height:600px;
margin:100px auto;
}
.ground{
position: relative;
width: 750px;
height:550px;
background:url('./images/bg_canvas.png');
cursor:url("./images/hammer.png"),auto;
}
.score{
position: absolute;
width:300px;
height:30px;
left:420px;
top:180px;
}
.life{
position: absolute;
top:180px;
right:100px;
}
.score span,
.life span{
color:#fff;
line-height:30px;
font-size:24px;
vertical-align: top;
margin-left:10px;
}
.mask{
position: absolute;
width:140px;
height:125px;
/*border:1px solid #000;*/
overflow: hidden;
}
.mouse{
position: absolute;
width:110px;
height:110px;
overflow: hidden;
left:0;
top:20px;
background-position: 50% 50%;
background-repeat: no-repeat;
transition: top 0.5s;
overflow: hidden;
}
@keyframes moveTop {
0% {
top: 70px;
}
100% {
top: 20px;
}
}
第三步：完成js的效果
var ground;
// 地鼠出现位置坐标
var coordinate = [{x: 130, y:173}, {x: 320, y:171}, {x: 515, y:175}, {x: 105, y: 265}, {x: 320, y: 256}, {x: 522, y: 256}, {x: 96, y: 350}, {x: 320, y: 355}, {x: 540, y: 358}];//洞口坐标
// 地鼠出现定时器
var gameTimer;
var mask = [];
var mouse = new Array(9);
// 最大地鼠数
var maxCount = 2;
// 分数 点中一个加10
var score = 0;
// 生命 自由下落一个减一
var life = 10;
window.onload = function(){
ground = document.getElementsByClassName('ground')[0];
ground.onmousedown = function(){
//光标的改变
ground.style.cursor = 'url("./images/hammer2.png"), auto'
};
ground.onmouseup = function(){
ground.style.cursor = 'url("./images/hammer.png"), auto'
};
init();
}
function init(){
// 创建地鼠出现位置
createMask();
// 每隔一段时间出现一个地鼠
gameTimer = setInterval(function(){
// 创建每一个地鼠
// createMouse();
controlMouse();
// 每次生成后判断是否结束
if(life <= 0){
clearInterval(gameTimer);
alert('游戏结束：得分：' + score);
}
document.getElementsByClassName('scoreCon')[0].innerHTML = score;
document.getElementsByClassName('lifeCon')[0].innerHTML = life;
console.log(life);
// 最大数++
maxCount = score / 100 + 1;
},50);
}
function createMask(){
// 根据坐标生成洞穴位置
for(var i = 0; i < coordinate.length;i ++){
// 创建div 将来插入地鼠
var temp = document.createElement('div');
temp.classList.add('mask');
// 确定每一个地鼠巢穴位置
temp.style.left = coordinate[i].x + 'px';
temp.style.top = coordinate[i].y + 'px';
// 创建草坪遮盖
var img = document.createElement('div');
img.classList.add('mask');
// 设置遮罩层背景 每一个洞穴背景不一样
img.style.background = 'url("./images/mask'+i+'.png")';
// 控制层级 草坪在地鼠身上
// img.style.zIndex = 100;
img.style.zIndex = i * 2 +1;
// 将元素放置在数组中
mask[i] = temp;
temp.appendChild(img);
// 将创建div插入父级
ground.appendChild(temp);
// 记录点击的位置
temp.index = i;
// 点击每一个消失
temp.onclick = function(){
disappear(this.index,true);
}
}
}
// 创建地鼠
function createMouse(i){
// 随机的背景图片
var num = Math.floor(Math.random() * 4);
var temp = document.createElement('div');
temp.classList.add('mouse');
temp.num = num;
// 设置地鼠出现的背景图片
temp.style.background = 'url("./images/mouse'+num+'.png")';
// 每一个地鼠需要出现在指定的位置 在对应洞穴上出现一只地鼠
// 用两个数组对应 一个存放着洞穴 一个存放地鼠
mouse[i] = temp;
temp.style.zIndex = i * 2 ;
temp.style.animation = "moveTop 0.5s linear";
mask[i].appendChild(temp);
var timer = setTimeout(function(){
disappear(i,false);
},2000);
temp.timer = timer;
}
// 控制地鼠的条件
function controlMouse(){
// 随机出现位置 并且同时出现的地鼠个数不大于最大个数 同一个位置不能出现两只
var num = Math.floor(Math.random()*9);
if(mouse.filter(function (item){
return item;
// 限制出现的最大数和出现的位置
}).length < maxCount && mouse[num] == null){
createMouse(num);
}
}
// 消失函数
function disappear(i,isHit){
if(mouse[i]){
// 无论是否被打均缩回洞里 通过改变top值
mouse[i].style.top = '70px';
// 被打 改变样式 添加打懵圈的小星星 改变背景图片
if(isHit){
// 打中分数加十
score += 10;
// 创建包含懵圈小星星的元素
var bomp = document.createElement('img');
bomp.classList.add('mouse');
bomp.style.top = '-40px';
// 添加gif动图为背景显示
bomp.src = "./images/bomb.gif";
// 替换掉当前老鼠的图片
mouse[i].style.background = "url('./images/hit" + mouse[i].num + ".png')";
// 插入到当前点击的位置
mouse[i].appendChild(bomp);
// 清除自身的下落
clearTimeout(mouse[i].timer);
}else{
// 没有被打 自己缩回生命减一
life -= 1;
}
setTimeout(function(){
if(mouse[i]){
mask[i].removeChild(mouse[i]);
}
mouse[i] = null;
},500);
}
}
评论区