目 录CONTENT

文章目录

打地鼠游戏

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 6540 阅读 / 7054 字

js打地鼠游戏

  • 时间:2019年9月5日
  • 类型:js练习
  • 人员:魏欣怡

本案例素材联系魏欣怡或下载

效果图

image.png

案例说明

大地鼠,达到一个加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);
    }
}

0

评论区