javScript 打地鼠

阿新 • • 發佈：2022-05-31

`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()
}