ネイティブ JS オブジェクト指向タイピングゲーム

この記事では、JSオブジェクト指向タイピングゲームの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

デモの紹介

落下するボールに表示されている数字をキーボードでクリックすると、ボールは更新され、任意の位置に再び落下します。さらに、ボールが 5 個落ちるごとに、落下速度が上がり、ボールの位置とサイズが更新され、色がランダムになります。デモソースコードは、オブジェクト指向クラスメソッドを実装することで直接使用できます。 HTMLファイルに割り当てて開いて使用します。学校のコースデザインとして使用できます。

ソースコード

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<スタイル>
    。タイトル{
        幅: 1200ピクセル;
        高さ: 80px;
        マージン:400px 自動;
        色: ダークブルー;
        テキストシャドウ: 3px 3px 3px 黒;
        フォントサイズ: 80px;
        フォントの太さ: 太字;
        テキスト配置: 中央;
        font-family: "楷体";

    }
    。名前{
        幅: 1000ピクセル;
        高さ: 40px;
        マージン:0 自動;
        色: スカイブルー;
        テキストシャドウ: 3px 3px 3px 黒;
        フォントサイズ: 40px;
        フォントの太さ: 太字;
        テキスト配置: 中央;
        font-family: "楷体";
    }
</スタイル>

<本文>
    <div style="font-size: 40px;">現在のスコア<div class="score" >0</div></div>
    <div class="title">ネイティブ js の小さなデモ: タイピング練習ゲーム</div>
    <div class="name">著者: lz</div>
</本文>
<スクリプト>
    クラス TypingGame {
        コンストラクタ() {
            this.oSpan
            this.speed = 2;
            this.timer = "";
            この.word;
            this.colors = ["red", "orange", "purple", "black", "pink", "blue", "skyblue", "yellowgreen", "brown", "tomato", "indianred", "orchid", "peru", "aqua", "slateblue", "gray", "grey", "crimson", "green"]//カラーコレクション this.createWord(this.speed);
            document.onkeydown = e => {
                var e = e || window.event;
                var キーコード = e.keyCode || e.which;
                // TypingGame.oSpan = this.$$("span");
                var キーワード = String.fromCharCode(キーコード)。
                    小文字に変換()
                if (this.word === キーワード) {
                    // 1 つ倒す - スコア // 元のスコアを取得する var score = this.$('.score', false).innerText - 0
                    // スコアを+1する
                    スコア++
                    // 1 を加えた後のスコアを div に入れます。 document.querySelector('.score').innerText = score
                    （スコア === 5）の場合{
                        this.speed += 2 // 5文字ごとに落下速度が速くなります}
                    this.oSpan.親要素の子要素を削除します(this.oSpan)
                    this.createWord(this.speed)
                }
            }


        }
        createWord(スピード) {
            let wh=this.getRandom(30,80);//ランダムサイズ this.oSpan = this.creEle('span');
            // コンソールログ(this.oSpan)
            this.setStyle(this.oSpan, {
                幅: wh+"px",
                高さ: wh+"px",
                位置: '絶対'、
                上: 0,
                左: this.getRandom(document.documentElement.clientWidth - 30) + "px",
                境界半径: "50%",
                行の高さ: '30px'、
                テキスト配置: 'center'、
                背景色: this.colors[this.getRandom(18)],
                色: "白",
                フォントの太さ: "太字",
                テキスト配置:"center",
                行の高さ:wh+"px"
            })

            document.body.appendChild(this.oSpan)
            // ランダムな文字: 97~122
            var randomNum = this.getRandom(97, 123)
            this.word = String.fromCharCode(randomNum);

            this.oSpan.innerText = this.word
            // このラベルはゆっくりと下に移動します this.elementsMove(this.speed);
        }
        要素を移動します() {
            // コンソールログ(this.oSpan)
            // タイマー clearInterval(this.timer)
            this.timer = setInterval(() => {
                // 高さを取得します var t = this.oSpan.offsetTop;
                // 高さを増やす t += this.speed;
                console.log(このスピード)
                // このタグがブラウザの下部に到達したらゲームオーバー
                t >= document.documentElement.clientHeight - 30 の場合 {
                    クリア間隔(this.timer)
                    if (confirm("ゲームオーバーです。もう一度プレイしますか?")) {
                        location.reload(); // 更新してもう一度再生します}
                }
                // 拡大後のラベルの上部を設定する
                this.oSpan.style.top = t + "px"
            }, 50)
        }
        setStyle(ele, styleObj) {
            (var attr in styleObj) {
                ele.style[属性] = styleObj[属性]
            }
        }
        $(タグ、すべて = false) {
            すべてを返しますか? document.querySelectorAll(tag) : document.querySelector(tag);
        }
        creEle(タグ) {
            document.createElement(タグ) を返します。
        }
        ランダム値を取得します(a, b = 0) {
            var max = Math.max(a, b);
            var min = Math.min(a, b)
            Math.floor(Math.random() * (max - min)) + min を返します。
        }
    }
    新しいタイピングゲーム;
</スクリプト>

</html>

デモのスクリーンショット