調皮的字母-豎-封面.jpg

案例介紹

歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，制作提高打字速度的小游戲-調皮的字母，點擊與螢屏上字母相對應的按鍵，若按鍵與出現的字母一致，則可以獲得相應的分數，

案例演示

根據螢屏上隨機出現的字母來點擊鍵盤上對應的按鍵，可自行調節字母下落的速度以及時間間隔，還會有分數統計，

原始碼學習

進入核心代碼學習，我們先來看HTML中的核心代碼，

<!-- 有個小院-興趣編程 -->
<body>
    <!-- onkeydown 事件會在用戶按下一個鍵盤按鍵時發生keydown()事件 -->
    <input type="text" id="input" onkeydown="keydown()">
    <div id="ground">
        <label for="interval">生成間隔:</label>
        <input type="number" id="interval" value="https://www.cnblogs.com/xFeater/p/100">
        <br>
        <label for="speed">下落速度:</label>
        <input type="number" id="speed" value="https://www.cnblogs.com/xFeater/p/5">
        <input type="button" value="https://www.cnblogs.com/xFeater/p/重新開始" onclick="gameStart()">
        <input type="button" value="https://www.cnblogs.com/xFeater/p/重置時間" onclick="location.reload()">
        <p id="hint">3</p>
        <p id="score">分數: <span id="scorenum">0</span></p>
    </div>
    <!-- 主體部分 -->
    <div id="container"></div>
    <script src="https://www.cnblogs.com/xFeater/js/調皮的字母.js"></script>
</body>

然后再讓我們來看CSS核心代碼，CSS主要是對要頁面部件的樣式進行設定，

*{
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#input{
    display:block;
    width: 100%;
    height: 100%;
    position:absolute;
    cursor: default;
    background: rgb(156, 83, 83);
}
/* 底部的顯示 */
#ground{
    width: 100%;
    height:200px;
    position:absolute;
    padding-top: 80px;
    bottom:0;
    background-color: #4d292c;
}
/* 下落的字母 */
.stone{
    background-size: 100% 100%;
    position:absolute;
    bottom:1200px;
    width: 80px;
    height:80px;
    text-align: center;
    line-height:80px;
    font-size: 40px;
    color:white;
    overflow:hidden;
    transform-origin: center;
}
label{
    color: white;
    margin-left: 20px;
}
input[type="number"] {
    width:100px;
    height: 40px;
    font-size: 30px;
    margin-top: 30px;
}
input[type="button"] {
    padding-left:10px;
    width: 200px;
    padding-right: 10px;
    height: 50px;
    font-size: 18px;
    margin-left: 300px;
}
/* 提示 */
#hint{
    position: absolute;
    top:10px;
    right: 10px;
    font-size: 35px;
    color:red;
}
/* 分數的顯示 */
#score{
    position: absolute;
    top:60px;
    left:50%;
    text-align: center;
    font-size: 30px;
    color:white;
}

讓我們來撰寫核心的JavaScript代碼，首先宣告相關的變數，通過countdown()方法設定時間倒計時，分數初始化為0，getElementById()方法獲取id對應的組件，設定定時器，并在每次游戲重新開始前對定時器進行清除，random()方法獲取隨機字母以及隨機位置，并將字母添加到容器里，for()回圈遍歷每一個字母修改屬性，設定游戲結束的位置，removeChild()方法移除最前面的字母，更新分數，

//有個小院-興趣編程
// 生成字母的間隔
var interval = 50;
// 計數，如果和間隔一樣就下落
var time = interval;
// 下落的速度
var speed = 5;
// 判斷游戲是否結束
var gameOver = false;
// 生成的字符從這里隨機取
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// 作為setInterval的回傳值
var down;
// 分數
var score = 0;
// 開始倒計時
function countdown() {
    score = 0;
    document.getElementById('scorenum').innerHTML = score;
    // 倒計時3，2，1
    let hint = document.getElementById('hint');
    // 倒計時
    var countTime = 3;
    // 設定定時器
    let count = setInterval(() => {
        hint.innerHTML = countTime;
        if (!countTime) {
            clearInterval(count);
            hint.innerHTML = '游戲開始！';
            document.getElementById('input').focus();
            down = setInterval(fall, 20);
        }
        countTime -= 1;
    }, 500);
}
countdown();
// 字母下降
function fall() {
    let stones = document.getElementsByClassName('stone');
    // 如果次數達到設定的值，生成一個新的字母
    if (time == interval) {
        let newStone = document.createElement('div');
        newStone.setAttribute('class', 'stone');
        // 隨機字符
        newStone.innerHTML = str[Math.round(Math.random() * 25)];
        // 隨機位置
        newStone.style.left = `${Math.round(Math.random() * 80) + 10}%`
        // 獲取容器
        let container = document.getElementById('container');
        // 把生成的字母添加到容器里
        container.appendChild(newStone);
        time = 0;
    }
    // 遍歷每一個字母，修改屬性，實作下落
    for (let i = 0; i < stones.length; i++) {
             // 計算下落的距離，賦值給style.bottom
        let distance = parseInt(getComputedStyle(stones[i]).bottom) - speed;
        stones[i].style.bottom = `${distance}px`;
        // 距離小于 150px 表示接觸到地板，游戲結束
        if (distance < 260) {
            document.getElementById('hint').innerHTML = '游戲結束！'
            gameOver = true;
            clearInterval(down);
        }
    }
    time ++;
}
// 按下按鍵觸發的事件
function keydown() {
    // 晚1ms清空input里的字符，不然有可能清空失敗
    setTimeout(() => {
        document.getElementById('input').valuehttps://www.cnblogs.com/xFeater/p/= '';
    }, 1);
    // 如果游戲結束，停止觸發
    if (gameOver)
        return;
    // 遍歷所有的字母，如果和鍵盤輸入的值相同則移除最前面的字母
    let stones = document.getElementsByClassName('stone');
    for (let i = 0; i < stones.length; i++) {
        // 判斷字母的值是否和鍵盤輸入的值相同
        if (arguments.callee.caller.arguments[0].key.toUpperCase() == stones[i].textContent) {
            let die = stones[i];
            die.innerHTML = '';
            setTimeout(() => {
                die.parentElement.removeChild(die);
                die = null;
            }, 300);
            // 更新分數
            score ++;
            document.getElementById('scorenum').innerHTML = score;
            break;
        }
    }
}
// 按下 重新開始鍵 觸發的事件
function gameStart() {
    // 如果游戲沒結束則不能重新開始，防止下落抖動
    if (!gameOver)
        return;
    // 從輸入框獲取各項引數
    interval = document.getElementById('interval').value;
    time = interval;
    speed = document.getElementById('speed').value;
    // 清空容器里的字母
    let container = document.getElementById('container');
    while (container.children.length) {
        container.children[0].remove();
    }
    gameOver = false;
    countdown();
}

記得關注我，每天學習一點點

你覺得這個游戲，最吸引你的地方在哪里？

全網可搜：小院里的霍大俠，免費獲取簡單易懂的實戰編程案例，編程/就業/副業/創業/資源，
私微信：huodaxia_xfeater
二維碼： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公眾號：有個小院（微信公眾號：yougexiaoyuan）
github：yougexiaoyuan (視頻原始碼免費獲取)
（部分素材來源于互聯網，如有保護請聯系作者）

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

標籤：JavaScript

上一篇：教你用JavaScript實作乘法游戲

下一篇：教你用JavaScript實作搜索展開

教你用JavaScript實作調皮的字母

案例介紹

案例演示

原始碼學習

你覺得這個游戲，最吸引你的地方在哪里？