ホワイトボードを踏まないようにするゲームを実装するための HTML+CSS+JS

<div class="wrapper">
        <div id="go">
            <a href="javaScript:void(0)" id="go">ゲーム開始</a>
        </div>
        <div id="メイン">
</div></div>

*{
    マージン:0;
    パディング:0;
}

.ラッパー{
    マージン:150px 自動;
    幅:400ピクセル;
    高さ:600px;
    境界線:1px実線 #ccc;
    位置: 相対的;
    オーバーフロー: 非表示;
}

＃行く{
    幅:100%;
    位置: 絶対;
    トップ:0;
    テキスト配置: 中央;
    zインデックス:99;
}

#行く{
    表示:ブロック;
    高さ:100px;
    幅:400ピクセル;
    色:シアン;
    背景色: #000000;
    テキスト装飾: なし;
    border-bottom:3px 破線 #eee;
    フォントサイズ:60px;
    フォントの太さ:600;
}

＃主要{
    幅:400ピクセル;
    高さ:600px;
    位置: 相対的;
    上:-150px;
    /* 境界線:1px 黒一色; */
}

。行{
    幅:400ピクセル;
    高さ:150px;
}

.行div{
   幅:99px;
   高さ:149px;
   左境界線:1px 実線 #222;
   ボーダー下部:1px 実線 #222;
   フロート: 左;
   カーソル: ポインタ;
}

var main = document.getElementById('main'); // DOM 要素を取得します。 var go = document.getElementById('go'); 
var speed = 5, num = 0, timer, flag = true; // 初期変数を設定します var colors = ['red', 'green', 'black', 'blue']; // 色を格納する配列を設定します

関数cDiv() {
    var oDiv = document.createElement('div'); // 乱数を取得し、各行のランダムな div を見つけてその色を設定します。 var index = Math.floor(Math.random() * 4);
    
    oDiv.setAttribute('class', 'row'); // 行クラス名を設定します for (var j = 0; j < 4; j++) { // for ループは 4 つの div の行を生成します
        var iDiv = document.createElement('div');
        oDiv.appendChild(iDiv); //各行に小さなdivを挿入します}
    
    if (main.childNodes.length == 0) { // 親に子要素があるかどうかに基づいて、新しく生成された行を挿入します main.appendChild(oDiv); // 親が空の場合は、直接挿入します } else {
        main.insertBefore(oDiv, main.childNodes[0]); // 親に要素がある場合は、新しく生成された行を既存の行数の先頭に挿入します} 
    var clickDiv = main.childNodes[0].childNodes[index]; // 乱数に従って行に色付きのdivを設定します
    clickDiv.setAttribute('class', 'i'); // この要素のクラス名をクリックするマークとして設定します clickDiv.style.backgroundColor = colors[index]; // 同時に背景色も設定します}

関数bindEvent() {
    main.addEventListener('click', function (event) { // main にクリック イベントを追加しますif (flag) { // フラグ値に基づいてクリック可能かどうかを判断しますvar tar = event.target; // クリックのソース イベントを取得しますif (tar.className == 'i') { // クリックされたブロックが色付きかどうかを判断しますtar.style.backgroundColor = '#bbb'; // 背景色を変更しますtar.classList.remove('i'); // クラス名を削除しますnum++; // Count++
            } それ以外 {                
                alert('ゲームオーバー、スコア: ' + num); // 白いブロックをクリックすると、ゲームオーバーになります clearInterval(timer);
                フラグ = false;
            }            
            if (num % 10 == 0) { // 現在のスコアが10の倍数の場合、speed++
                スピード++;
            }
        }
    })
}

関数move() {
    タイマーの間隔をクリアします。 
    timer = setInterval(function () { // タイマーを設定します var step = parseInt(main.offsetTop) + speed; // 上の値を使用してメイン領域を移動します main.style.top = step + 'px';
        if (parseInt(main.offsetTop) >= 0) { // メイン領域が表示領域に移動した場合は、要素の新しい行を作成します cDiv();
            main.style.top = '-150px'; // メイン領域も表示領域の上に移動}
        var len = main.childNodes.length; // メイン領域の行数を取得します。if (len == 6) { // メイン領域の行数が 6 の場合、表示領域の 4 行の上下に新しい行が生成されます。for (var i = 0; i < 4; i++) { // 最後の行の各 div をトラバースします。
                
                if (main.childNodes[len - 1].children[i].classList.contains('i')) { // クリックされていないゲームオーバーを含むものがある場合 alert('ゲームオーバー、スコア: ' + num);
                    タイマーの間隔をクリアします。
                    flag = false; // ゲーム終了後は再度クリックできません}
            }
            
            main.removeChild(main.childNodes[len - 1]); // 表示後に各行を削除します}
    }, 20)
    bindEvent(); // クリックイベント}

// 開始ボタンをクリックして移動を開始し、各行の要素を作成します。 function clickStart() {
    go.addEventListener('click', 関数() {
        go.style.display = 'なし';
        動く（）;
    });
}
クリックスタート();