原生js簡單打地鼠遊戲

標籤：family   block   footer   cas   box   splay   img   order   border   

js部分內容

——————————————————————————————————————————————————————

var start = document.getElementById("start");   /*遊戲開始按鈕*/
var diglettLocation = document.getElementsByClassName("anmint");
var gameImg = [‘img/ds01.png‘, ‘img/ds03.png‘, ‘img/ds05.png‘, ‘img/tz01.png‘, ‘img/tz03.png‘]; /*會出現的gameImg存入數組*/
var setIn;  /*清空圖片樣式定時器*/
var grade = 0;  /*儲存當前得分*/
var gradePanel = document.getElementById("gradePanel");
var gradeMax = document.getElementById("gradeMax");
var imgOnclick = document.getElementsByClassName("img");    /*點擊切換對應圖片*/
var showResult = document.getElementsByClassName("showResult"); /*即時加減數值*/
var timeKeep = document.getElementById("timeKeep"); /*計時設定*/
var setInTime;  /*倒計時定時器*/
function startGame() {
    ClearTest.clearGameImg();
    var gameImgIndex = "";  /*儲存src地址*/
    var holeNum = parseInt(Math.random() * 9);  /*隨機執行holeNum次產生目標*/
    if (holeNum < 1) {
        holeNum = 0;
    }
    for (var i = 0; i < holeNum; i++) {
        var index = parseInt(Math.random() * 9);    /*儲存隨機下標*/
        gameImgIndex = gameImg[parseInt(Math.random() * gameImg.length)];   /*隨機取出gameImg圖片*/
        diglettLocation[index].src = gameImgIndex;
        diglettLocation[index].classList.add("diglett");    /*啟動動畫*/
    }
}   /*開始遊戲*/
start.onclick = function () {
    if (start.innerText === "開始遊戲") {
        grade = 0;
        setIn = setInterval(startGame, 1500);
        start.innerText = "結束遊戲";
        timeKeep.innerHTML = 60;
        setInTime = setInterval(time,1000);
    } else {
        ClearTest.endTest();
    }
};
for (var i = 0; i < imgOnclick.length; i++) {
    imgOnclick[i].onclick = function () {
        switch (this.src) {
            case ‘http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/ds01.png‘:
                this.src = ‘img/ds02.png‘;
                grade = parseInt(grade * 1.1);
                gradePanel.innerHTML = grade;
                showResult[0].innerHTML = "+10%";
                break;
            case ‘http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/ds03.png‘:
                this.src = ‘img/ds04.png‘;
                grade += 100;
                gradePanel.innerHTML = grade;
                showResult[0].innerHTML = "+100";
                break;
            case ‘http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/ds05.png‘:
                this.src = ‘img/ds06.png‘;
                grade += 50;
                gradePanel.innerHTML = grade;
                showResult[0].innerHTML = "+50";
                break;
            case ‘http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/tz01.png‘:
                this.src = ‘img/tz02.png‘;
                grade = parseInt(grade / 2);
                gradePanel.innerHTML = grade;
                showResult[0].innerHTML = "÷2";
                break;
            case ‘http://localhost:63342/JSJQuery%E6%89%93%E6%96%B9%E5%9D%97%E6%B8%B8%E6%88%8F/img/tz03.png‘:
                this.src = ‘img/tz04.png‘;
                grade -= 100;
                if (grade < 0) {
                    grade = 0;
                }
                gradePanel.innerHTML = grade;
                showResult[0].innerHTML = "-100";
                break;
            default:
                break;
        }
    }
}   /*迴圈綁定圖片點擊事件*/
function time() {
    timeKeep.innerHTML = parseInt(timeKeep.innerHTML - 1);
    if(parseInt(timeKeep.innerHTML)<0){
        ClearTest.endTest();
    }
}   /*計時器*/
var ClearTest = {
    endTest:function () {
        this.clearGameImg();
        clearInterval(setIn);
        clearInterval(setInTime);
        start.innerText = "開始遊戲";
        if (parseInt(gradePanel.innerHTML) > parseInt(gradeMax.innerHTML)) {
            gradeMax.innerHTML = gradePanel.innerHTML;
        }
        showResult[0].innerHTML = "";
        gradePanel.innerHTML = "";
        timeKeep.innerHTML = 0;
    },  /*結束時執行的函數方法*/
    clearGameImg:function () {
        for (var i = 0; i < diglettLocation.length; i++) {
            diglettLocation[i].src = "";
            diglettLocation[i].classList.remove("diglett")
        }
    }   /*清空圖片方法*/
};  /*ClearTest對象*/

html部分
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>打地鼠遊戲</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div>
    <marquee>趣味打地鼠</marquee>
    <main>
        <!--遊戲區-->
        <ul>
            <!--i代表坑，div代表地鼠-->
            <li><i><img src="" class="anmint img"></i></li>
            <li><i><img src="" class="anmint img"></i></li>
            <li><i><img src="" class="anmint img"></i></li>
            <li><i><img src="" class="anmint img"></i></li>
            <li><i><img src="" class="anmint img"></i></li>
            <li><i><img src="" class="anmint img"></i></li>
            <li><i><img src="" class="anmint img"></i></li>
            <li><i><img src="" class="anmint img"></i></li>
            <li><i><img src="" class="anmint img"></i></li>
        </ul>
        <footer>
            <div>
                <span id="start">開始遊戲</span>
            </div>
            <!--計分板-->
            <div>
                <!--左側計分-->
                <div class="scoring">
                    <div>當前分數：<span id="gradePanel">0</span><b class="showResult"></b></div>
                    <div>曆史最高分：<span id="gradeMax">0</span></div>
                </div>
                <!--右側計時-->
                <div class="timekeeping">
                    <div>剩餘時間：<span id="timeKeep">60</span>秒</div>
                    <div>圖片源自網路。</div>
                </div>
            </div>
        </footer>
    </main>
</div>
<script src="js/index.js"></script>
</body>
</html>

css部分
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————

*{margin: 0;padding: 0}
html{height: 100%}
body{background: linear-gradient(to top left,#f5f7fa, #c3cfe2);}
body>div{padding-top: 50px;}
main{
    width: 550px;
    height: 600px;
    margin: 0 auto;
    padding-top: 20px;
    background: linear-gradient(0,#a1c4fd, #c2e9fb);
    border-radius: 15px;
    cursor: url(‘../img/mous.png‘) 20 30,auto
}
ul{
    overflow: hidden;
    margin-left: 35px;
}
li{
    width: 150px;
    height: 120px;
    list-style: none;
    float: left;
    position: relative;
    margin-right: 10px;
    overflow: hidden;
}
i{
    position: absolute;
    display: block;
    width: 150px;
    height: 50px;
    border: solid #ccc;
    border-radius: 50%;
    bottom: 0;
    box-shadow: 0 0 10px inset;
    background: linear-gradient(to top left,#f6d365,#fda085);
}
.diglett{
    position: absolute;
    margin: 0 auto;
    left: 30px;
    bottom: 5px;
    opacity: 0;
    animation: diglett 1.5s ease-in-out infinite;
}
footer{
    margin-top: 50px;
}
footer>div>span{
    display: block;
    font-family: "微軟雅黑 Light","宋體";
    color: #676767;
    font-size: 36px;
    font-weight: 900;
    background: #be9568;
    border-radius: 5px;
    margin: 0 auto;
    width: 160px;
    text-align: center;
    background: linear-gradient(to top left,#fee140,#e2d1c3);
    border: 2px solid burlywood;
    box-shadow: 0 0 5px;
}
/*地鼠動畫*/
@keyframes diglett {
    50%{
        bottom: 20px;
        opacity: 1;
    }
    100%{
        bottom: 5px;
        opacity: 0;
    }
}
#start:hover{
    color: #e8e8e8;
    background: linear-gradient(to top left,#fee140,#fa709a);
    box-shadow: 0 0 25px  inset;
}
/*計時，計分樣式*/
.scoring,.timekeeping{
    width: 250px;
    height: 120px;
    border: 1px solid #be9568;
    float: left;
    margin: 10px 0 0 15px;
    border-radius: 5px;
    background: linear-gradient(to top left,#fbc2eb,#a6c1ee);
    box-shadow: 0 0 3px;
    font-weight: 600;
    font-size: 18px;
    color: #74348f;
    text-indent: 10px;
}
.scoring>div,.timekeeping>div{
    height: 50px;
    line-height: 50px;
}
.scoring>div:first-child{
}
.scoring>div:first-child>b{
    display: block;
    width: 90px;
    height: 50px;
    float: right;
}
marquee{
    position: absolute;
    font-size: 26px;
    top: 5px;
    color: #8f1d32;
    animation: fontBlink 3s linear infinite;
}
@keyframes fontBlink {
    10%{color: #cccccc}
    20%{color: #cc0d25}
    30%{color: #1c11cc}
    40%{color: #20cc19}
    50%{color: #cc0cbe}
    60%{color: #09cacc}
    70%{color: #ccb609}
    80%{color: #807b7f}
    90%{color: #000000}
    100%{color: #7f5d4b}
}

原生js簡單打地鼠遊戲