打字小游戲（二）-有解無憂

/* 瀏覽器和標簽都有默認的樣式 清除默認樣式 */
*{
    margin: 0;padding: 0
}
/* 清除加粗標簽的默認樣式 */
b,strong{
    font-weight: normal
}
/* 清除傾斜標簽的默認樣式 */
i,em{
    font-style: normal
}
/* 清除默認下劃線 */
a,u{
    text-decoration: none
}
/* 清除串列的默認符號樣式 */
ul,ol,li{
    list-style: none
}
/* 萬能清除法 解決高度塌陷 */
.clear-fix::after{
    content: '';
    display: block;
    width: 100%;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
/* 兼容寫法 */
.clear-fix{
    zoom: 1 /* 兼容IE */
}

<!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">
    <link rel="stylesheet" href="./02-reset.css">
    <title>Document</title>
</head>
<style>
    body,
    html {
        height: 100%;
    }
    
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #000;
    }

    .div {
        width: 1000px;
        height: 350px;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: center;

    }

    .row {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .row:nth-child(2) {
        width: 90%;
    }

    .row:nth-child(3) {
        width: 80%;
    }

    .row li {
        width: 80px;
        height: 80px;
        background-color: #fff;
        font-size: 22px;
        font-weight: 600;
        text-align: center;
        line-height: 80px;
        border-radius: 15px;
    }

    .row li.li1 {
        background-color: #c91a35;
    }

    .row li.li2 {
        background-color: #e36947;
    }

    .row li.li3 {
        background-color: #e67a36;
    }

    .row li.li4 {
        background-color: #f7d847;
    }

    .row li.li5 {
        background-color: #ede886;
    }

    .row li[name="xz"] {
        transform-style: preserve-3d;
        /* transform: scale(1.1); */
        background: none;
        color: #c91a35;
        border: 1px solid #e36947;
        animation: xz .3s infinite;
    }

    @keyframes xz {
        0% {
            transform: translate(0);
        }

        20% {
            transform: translate(-2px, 2px);
        }

        40% {
            transform: translate(-2px, -2px);
        }

        60% {
            transform: translate(2px, -2px);
        }

        80% {
            transform: translate(-2px, -2px);
        }

        100% {
            transform: translate(0);
        }
    }

    h2 {
        width: 100px;
        height: 30px;
        background-color: pink;
        position: absolute;
        top: 50px;
        left: calc(50% - 50px);
        text-align: center;
        line-height: 30px;
    }

    p {
        width: 300px;
        height: 50px;
        background-color: pink;
        position: absolute;
        top: 100px;
        left: calc(50% - 150px);
        text-align: center;
        line-height: 50px;
        font-size: 20px;
    }

    h3 {
        width: 200px;
        height: 30px;
        background-color: pink;
        position: absolute;
        top: 150px;
        left: calc(50% - 100px);
        text-align: center;
        line-height: 30px;
    }
</style>

<body>
    <h2></h2>
    <p>分數每累計 5 分，速度會提升</p>
    <h3></h3>
    <div class="div">
        <ul class="row">
            <li class="li1">Q</li>
            <li class="li2">W</li>
            <li class="li3">E</li>
            <li class="li4">R</li>
            <li class="li5">T</li>
            <li class="li5">Y</li>
            <li class="li4">U</li>
            <li class="li3">I</li>
            <li class="li2">O</li>
            <li class="li1">P</li>
        </ul>
        <ul class="row">
            <li class="li1">A</li>
            <li class="li2">S</li>
            <li class="li3">D</li>
            <li class="li4">F</li>
            <li class="li5">G</li>
            <li class="li4">H</li>
            <li class="li3">J</li>
            <li class="li2">K</li>
            <li class="li1">L</li>
        </ul>
        <ul class="row">
            <li class="li1">Z</li>
            <li class="li2">X</li>
            <li class="li3">C</li>
            <li class="li4">V</li>
            <li class="li3">B</li>
            <li class="li2">N</li>
            <li class="li1">M</li>
        </ul>
    </div>
</body>
<script src="./utils.js"></script>
<script>
    // 獲取所有 li 標簽
    var lis = document.querySelectorAll("li");
    // 定義一個26個字母
    var str = "ABCDEFGHIJKLNMOPQISTUVWXYZ"

    randomkey()

    // 創建函式 - 隨機獲得按鍵
    function randomkey() {
        //呼叫亂數
        var randomletter = getRandom(0, 26);
        // 遍歷所有 li 標簽
        for (var i = 0; i < lis.length; i++) {
            // 判斷 隨機字符 與 哪個 li 內容對等
            if (str[randomletter] === lis[i].innerText) {
                // console.log(str[randomletter])
                for (var j = 0; j < lis.length; j++) {
                    lis[j].setAttribute("name", "")
                }
                lis[i].setAttribute("name", "xz")
            }
        }
    }



    //定義一個計數器 - 分數
    var num = 0;
    // 定義一個變數a,接收定時器的執行時間
    var a = 3000;
    // 定義一個全域變數的timerId接收定時器 - 便于呼叫
    var timerId;
    // 定義定時器，每三秒換個鍵
    timerId = setInterval(randomkey, a)
    //獲取h2標簽
    document.querySelector("h2").innerText = "分數:" + num
    //獲取 h3 標簽 
    document.querySelector("h3").innerText = "現在速度:" + a + "毫秒"



    // 創建鍵盤按下事件
    document.addEventListener("keydown", function () {
        // 獲取事件物件
        var evt = window.event
        // 獲取鍵盤輸出的字母
        var keyboard = String.fromCharCode(evt.keyCode)
        // 獲取被選中的 li
        var li = document.querySelector(".row li[name=xz]")


        // 判斷鍵盤輸入的字母是否與選中li內容相等
        if (keyboard === li.innerText) {
            // 如果相等則分數+1
            //運行一次函式，更換下個鍵位
            randomkey();
            num++
            // 116 對應鍵盤上的 F5鍵
        }

        // 判斷，如果輸入的鍵位不符合則游戲失敗
        // 116 對應鍵盤上的 F5鍵
        else if (evt.keyCode != 116) {
            clearInterval(timerId)
            num = 0
            a = 3000
            alert("游戲失敗")
        }
        // // 如果分數夠 30 則游戲通過
        // if (num === 30) {
        //     clearInterval(timerId)
        //     num = 0
        //     a = 3000
        //     alert("游戲通關")
        // }
        // 將分數放在 h2 中
        document.querySelector("h2").innerText = "分數:" + num
    })

    //創建鍵盤抬起事件
    document.addEventListener("keyup", function () {
        //每五次加速
        if (num % 5 == 0 && num !== 0) {
            if (a > 1000 ) {
                a -= 500
            } else if (a <= 1000) {
                a -= 100
                if (a === 200) {
                    a = 200
                }
            }
        }
        //獲取 h3 標簽 
        document.querySelector("h3").innerText = "現在速度:" + a + "毫秒"
        // 先停止定時器 -  解決定時器會造成 鍵位 的頻繁切換
        clearInterval(timerId)
        // 從新定義新的定時器，繼續回圈
        timerId = setInterval(randomkey, a)
    })
</script>

</html>

/**
 * 獲取亂數的函式
 * @param {number} a 代表范圍的數字
 * @param {number} b 代表范圍的數字
 * @return {number} 回傳范圍內的隨機整數
 */
function getRandom(a, b){
    var max = a>b?a:b
    var min = a>b?b:a
    return parseInt(Math.random() * (max - min)) + min
}
/**
 * 獲取16進制的隨機顏色值
 */
function getColor(){
    var color = '#'
    for(var i=0;i<3;i++){
        var num = getRandom(0, 256)
        var hex = num.toString(16)
        hex = hex.length === 1 ? '0' + hex : hex;
        color += hex
    }
    return color
}
/**
 * 批量設定樣式的函式
 * @param {node} ele 被設定樣式的標簽物件
 * @param {object} styleObj 要設定的樣式組成的鍵值對
 */
function setStyle(ele, styleObj){
    for(var key in styleObj){
        ele.style[key] = styleObj[key]
    }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/397484.html

標籤：其他

上一篇：打字游戲（一）

下一篇：Unity Shader Graph 制作Grid網格效果