随笔- 6 文章- 0 评论- 0 阅读- 1006

javScript 打地鼠

`html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="app">
        <div class="title">
            <div class="left">
                总得分:0
            </div>
            <div class="right">
                剩余时间:10s
            </div>
        </div>
        <div class="img_list">
            <div class="img" onclick="changeImg(0)">
                <img src="./images/keng.gif" alt="">
            </div>
            <div class="img" onclick="changeImg(1)">
                <img src="./images/keng.gif" alt="">
            </div>
            <div class="img" onclick="changeImg(2)">
                <img src="./images/keng.gif" alt="">
            </div>
            <div class="img" onclick="changeImg(3)">
                <img src="./images/keng.gif" alt="">
            </div>
            <div class="img" onclick="changeImg(4)">
                <img src="./images/keng.gif" alt="">
            </div>
            <div class="img" onclick="changeImg(5)">
                <img src="./images/keng.gif" alt="">
            </div>
            <div class="img" onclick="changeImg(6)">
                <img src="./images/keng.gif" alt="">
            </div>
            <div class="img" onclick="changeImg(7)">
                <img src="./images/keng.gif" alt="">
            </div>
            <div class="img" onclick="changeImg(8)">
                <img src="./images/keng.gif" alt="">
            </div>      
        </div>
    </div>
</body>
<script src="./js/pool.js"></script>
</html>

css部分

.app{
    width:300px;
    height:350px;
    background-image: url(../images/beijing.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color:#fff;
    margin: 100px auto;
}

.title{
    height: 50px;
    line-height: 50px;
    display: flex;
    padding: 0 2%;
    justify-content: space-between;  
}

.img_list{
    width: 300px;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
}

.img{
    width: 100px;
    height: 100px;
    display: flex;
    align-items: flex-end;
}

img{
    width: 100%;
}

javaScript部分

// 获取到所有的图片元素
let img = document.querySelectorAll('img');
// 获取到时间的元素

let right = document.querySelector('.right');

// 获取到分数的元素
let left = document.querySelector('.left')

// console.log(img[0].src);

// img[0].src = './images/dishu.gif';

// console.log(img[0].src);

// 定义一个变化图片的空计时器
let clearInt = null;
// 定义一个变化图片的空倒计时器
let setTime = null;
// 定义一个变化时间的空计时器
let startTime = null;
// 定义一个初始的时间10s
let beginTime = 10;
// 定义一个初始的分数
let partCount = 0;

start_change();
function start_change(){
    setInter = setInterval(function (){
        // 创建一个img长度的随机数；
        let num = Math.floor(Math.random() * img.length)
        // 改变相应随机数下的图片地址
        img[num].src = './images/dishu.gif';
        setTime = setTimeout(function (){
            // 图片变成地鼠之后生成一个新的倒计时器，让地鼠的图片变成坑
            img[num].src = './images/keng.gif';
        },1000)   
    },1000)
}
changeTime()
// 时间变化的方法
function changeTime(){
    startTime = setInterval(function (){
        beginTime--;
        right.innerText = '剩余时间' + beginTime + 's';
        if(beginTime == 0){
            clearInterval(startTime);       
        }
    },1000)
}

// 加分方法
function addCound(){
    partCount ++;
    left.innerText = '总得分：' + partCount
}

// 点击相应的图片变成地鼠被打后的图片
// 参数 接收当前点击的是哪张图片(数组下标)
function changeImg(index){
    if(beginTime == 0){
        alert('游戏已经结束了');
        alert('您的总得分为：' + partCount)
        return
    }
    if(img[index].src == 'file:///E:/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A02/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/4_JavaScript/%E4%BD%9C%E4%B8%9A/5%E6%9C%8824%E6%97%A5%E6%89%93%E5%9C%B0%E9%BC%A0/%E6%89%93%E5%9C%B0%E9%BC%A02/images/keng.gif'){
        alert('打错了');
        // 清除图片变化定时器
        clearInterval(setInter);
        // 让时间停止(清除时间变化定时器)
        clearInterval(startTime);
        // 让时间归零
        beginTime = 0;
        right.innerText = '剩余时间' + beginTime + 's';
    }else{
        // 让被点击的图片路径立刻改变成地鼠被打后的图片路径
        img[index].src = './images/shang.gif';
        addCound();//调用一下加分方法
        resetTime();//调用一下时间重置
        clearTimeout(setTime);//清除上面变成坑的倒计时器
        setTimeout(function (){
            //   500ms后给地鼠收尸(把这张图片路径改成坑)
            img[index].src = './images/keng.gif'
        },500)
    }
}

// 时间重置方法
function resetTime(){
    // beginTime = 10;
    right.innerText = '剩余时间' + beginTime + 's';
    // 先清除时间变化的定时器，以免会出现时间错乱问题
    clearInterval(startTime);
    // 重启时间变化方法
    changeTime()
}