シンプルなスネークゲームを実現するネイティブjs

この記事では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

最初の写真

さっそく、コードをご紹介します。気に入ったら、ぜひ星を付けてください♥(ˆ◡ˆՅ)

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <タイトル></タイトル>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
 
        .l {
            フロート: 左;
        }
 
        .r {
            フロート: 右;
        }
 
        .clear_fix::after {
            コンテンツ： '';
            高さ: 0;
            幅: 100%;
            表示: ブロック;
            クリア: 両方;
            オーバーフロー: 非表示;
            可視性: 非表示;
        }
 
        。体 {
            マージン: 50px 0 0 50px;
            幅: 700ピクセル;
        }
 
        .続き{
            幅: 500ピクセル;
            高さ: 500px;
            境界線: 1px 緑;
            右マージン: 8px;
            位置: 相対的;
        }
 
        .cont div {
            位置: 絶対;
            幅: 10px;
            高さ: 10px;
            背景色: オレンジ;
            境界線: 1px実線 #000;
            ボックスのサイズ: 境界線ボックス;
        }
 
        .cont .snakeHead {
            境界線の半径: 50%;
        }
 
        .cont スパン {
            位置: 絶対;
            表示: インラインブロック;
            幅: 10px;
            高さ: 10px;
            境界線: 1px実線 #000;
            ボックスのサイズ: 境界線ボックス;
            境界線の半径: 50%;
            背景: 緑;
 
        }
 
        。スコア {
            幅: 188ピクセル;
            高さ: 500px;
            境界線: 1px 実線の赤;
 
        }
 
        .スコア p {
            テキスト配置: 中央;
            高さ: 50px;
            行の高さ: 50px;
            フォントサイズ: 30px;
            マージン: 20px 0;
            色: ブラウン
        }
        .スコア .時間{
            色:シャルトリューズ;
            フォントサイズ: 20px;
        }
        .btn{
            左余白: 50px
        }
 
        .btn .active {
            背景色: 緑;
        }
 
        ボタン {
            幅: 100ピクセル;
            高さ: 30px;
            フォントサイズ: 24px;
        }
    </スタイル>
</head>
 
<本文>
    <div id="wrap">
        <div class="body clear_fix">
            <div class="cont l">
            </div>
            スコア：
                </br>
                <p>0 ポイント</p>
                <時間>
                時間：
                <p class="time"></p>
            </div>
        </div>
        <div class="btn">
            <button>開始</button>
            <button class="active">通常</button>
            <button>難しい</button>
            <button>地獄</button>
        </div>
    </div>
    <スクリプト>
        var スネーク = {
            /* グローバルイベントを初期化し、初期イベントリスナーを追加します*/
            初期化: 関数 () {
                this.btns = document.querySelectorAll('ボタン');
                this.score = document.querySelector('p');
                this.cont = document.querySelector('.cont');
                // 時間表示用のコンテナ this.time = document.querySelector('.time');
                // ヘビの方向、「r」は右を意味します。this.dir = 'r';
 
                /* タイマー */
                this.timer = '';
                /* 初期の蛇の頭の位置 */
                this.head = {
                    l: 30,
                    10: 10 秒
                }
                // 蛇のしっぽ this.ender = {
                    l: ''、
                    t: ''
                };
                this.foodItem = {
                    l: ''、
                    t: ''
                };
                //開始状態 this.isStart = false;
                /* スコアカウンター */
                this.counter = 0;
                //簡単な状態は 1、難しい状態は 2、地獄状態は 3
                this.status = 1;
                この速度 = 10
                this.btns[0].onclick = this.startFn //開始または一時停止 this.btns[1].onclick = this.simpleFn //シンプルモードのリスニング this.btns[2].onclick = this.difcultFn //難しいモードのリスニング this.btns[3].onclick = this.hardFn //ヘルモードのリスニング this.initCreate();
                this.getTime()
                //ランダムな食べ物 this.getfood()
            },
            initCreate() {
                //初期の蛇の頭と3つの蛇の体を作成します for (let i = 0; i <= 3; i++) {
                    item = document.createElement('div'); を作成します。
                    オブジェクト.assign(item.style, {
                        左: this.head.l - 10 * i + 'px'、
                        上: this.head.t + 'px',
                        /* 境界半径: '50%' */
                    })
                    (i == 0) の場合 {
                        アイテム.className = 'snakeHead'
                    }
                    snake.cont.appendChild(アイテム);
                }
            },
            /* ヘビの体のセクションを追加します*/
            スネークを作成: 関数 (obj) {
                クリアインターバル(snake.timer)
                var div = document.createElement('div');
                div.style.left = snake.ender.l;
                div.style.top = snake.ender.t;
                div 要素を追加します。
                コンソールにログ出力します。
                スネークを移動します。
                /* コンソール.log(snake.cont); */
            },
            /* 開始時刻かどうかをチェックする*/
            startFn: 関数() {
                開始の場合
                    スネークを移動します。
                    snake.btns[0].innerHTML = '一時停止';
                    開始するには、次の手順を実行します。
                } それ以外 {
                    スネークを停止します。
                    snake.btns[0].innerHTML = '開始';
                    スネークが開始しない場合は false を返します。
                }
 
            },
            /* コアモジュールの移動開始 */
            移動: 関数 () {
                document.onkeydown = snake.controlFn;
                var itemsAll = snake.cont.children;
                /* console.log(アイテムすべて);
                console.log(itemsAll,itemsAll[0].nodeName); */
                /* ヘビの体の各セクションを格納する配列*/
                var アイテム = [];
                var スパン;
                /* var items = Array.from(itemsAll).filter(function (v, k) {
                    v.nodeName === 'DIV' を返します
                }); */
                /* コンソール.log(アイテム); */
                /* div (ヘビの体) と span (食べ物) をフィルターします */
                (var j = 0; j < itemsAll.length; j++) {
                    if (itemsAll[j].nodeName == 'DIV') {
                        アイテムをプッシュ(itemsAll[j])
                    } それ以外 {
                        スパン = itemsAll[j]
                    }
                }
                /* ヘビの頭の位置を取得します */
                var l = snake.head.l;
                var t = snake.head.t;
                コンソールにログ出力します。
                console.log(アイテム)
                クリアインターバル(snake.timer)
                /* キーボード監視 */
                document.onkeydown = snake.controlFn
                /* 移動開始 */
                snake.timer = setInterval(関数() {
                    /* ヘビの尻尾の位置を記録し、ヘビの尻尾を格納しているオブジェクトに更新します*/
                    snake.ender.l = items[items.length - 1].style.left;
                    snake.ender.t = items[items.length - 1].style.top;
                    /* ヘビの位置を更新します*/
                    (var i = items.length - 1; i > 0; i--) {
                        アイテム[i].style.left = アイテム[i - 1].style.left;
                        アイテム[i].style.top = アイテム[i - 1].style.top;
                    }
 
                    /* ヘビの頭の方向を決定し、その位置を更新します*/
                    （snake.dir == 'l'）の場合{
                        l -= ヘビの速度;
                    }
                    （snake.dir == 'r'）の場合{
                        l += ヘビの速度;
                    }
                    （snake.dir == 't'）の場合{
                        t -= ヘビの速度;
                    }
                    （snake.dir == 'b'）の場合{
                        t += ヘビの速度;
                    }
                    /* 境界 y 外 */
                    (l < 0 || l > 490 || t < 0 || t > 490) の場合 {
                        クリアインターバル(snake.timer)
                        snake.reStart(confirm('スネークモンスター、壁にぶつかりました！最初からやり直しますか？'))
                    }
 
                    アイテム[0].style.left = l + 'px';
                    アイテム[0].style.top = t + 'px';
                    /* ヘビの頭を記録するオブジェクトを更新します*/
                    ヘビの頭l = l
                    ヘビの頭t = t
                    /* コンソール.log(items[0].style); */
                    /* ヘビの頭を挿入 */
                    snake.cont.appendChild(アイテム[0])
                    (var k = 1; k < items.length; k++) の場合 {
                        /* ヘビの頭が自分自身を噛んでいるかどうかを判定する*/
                        if (items[0].style.left == items[k].style.left && items[0].style.top == items[k]
                            .style.top) {
                            snake.reStart(confirm('ヘビの怪物、あなたは自分自身を噛み殺しました、最初からやり直しますか？'))
                            /* console.log(items[0].style.left,items[0].style.top);
                            console.log(items[0].style.left,items[0].style.top); */
                            クリアインターバル(snake.timer)
                            /* alert('ゲームオーバー!');
                            ウィンドウの位置を再読み込み(true) */
                            戻る
                        }
                        /* ヘビの体を挿入します */
                        snake.cont.appendChild(アイテム[k])
                    }
                    /* 食べ物を食べた */
                    コンソールにログ出力します。
                    /* console.log(l, '食べ物を食べる'); */
                    l == parseInt(span.style.left) && t == parseInt(span.style.top) の場合 {
                        ヘビを食べる()
                    }
                }, parseInt(300 / snake.status))
            },
            食べる（） {
                スネーク.createSnake()
                ヘビ.getfood()
                スネークカウンター++;
                snake.score.innerHTML = `${snake.counter*100} ポイント`
            },
            /* ゲームが終了し、再開するかどうかを決定します*/
            reStart: 関数 (値) {
                if (値) {
                    ウィンドウの位置を再読み込み(true)
                }
            },
            /* 食料を生産する */
            getfood: 関数 () {
                document.querySelector('span') の場合 {
                    console.log('入って来なさい');
                    document.querySelector('span').remove();
                }
 
                var span = document.createElement('span');
                var l = snake.randM(0, 49) * 10
                var t = snake.randM(0, 49) * 10
                console.log('食べ物を手に入れる', l, t);
 
                span.style.left = l + 'px';
                span.style.top = t + 'px';
 
                スネークの子要素を追加します。
                （snake.isStart）の場合{
                    ヘビを移動します()
                }
            },
            /* 乱数を生成する */
            取得時間() {
                時間、h、m、s
                
                setInterval(関数() {
                    時間 = 新しい日付()
                    h = 時間.getHours()
                    m = time.getMinutes();
                    s = time.getSeconds();
                     （h < 10）の場合{
                         h = '0' + h
                     }
                     （m < 10）の場合{
                         m = '0' + m
                     }
                     （s < 10）の場合{
                         s = '0' + s
                     }
                    snake.time.innerHTML = `${h}: ${m}: ${s}`
                }, 1000)
            },
            randM: 関数 (最小値, 最大値) {
                Math.round(Math.random() * (max - min) + min) を返します。
            },
            /* 一時停止*/
            停止: 関数 () {
                クリアインターバル(snake.timer)
            },
            /* シンプルモード */
            単純な関数: 関数 () {
                スネークのステータス = 1;
                ヘビ.btnFn()
                snake.btns[1].className = 'アクティブ'
            },
            /* 複合モード */
            差関数: 関数() {
                スネークのステータス = 3;
                ヘビ.btnFn()
                snake.btns[2].className = 'アクティブ'
            },
            /* ヘルモード */
            ハード関数: 関数() {
                スネークのステータス = 5;
                ヘビ.btnFn()
                snake.btns[3].className = 'アクティブ'
            },
            btnFn: 関数() {
                snake.btns.forEach(関数(v, k) {
                    v.className = ''
                });
                （snake.isStart）の場合{
                    スネークを移動します。
                }
            },
            /* ヘビを動かすボタン*/
            コントロール関数: 関数 (el) {
                var el = el || window.event;
                var code = el.keycode || el.which;
                console.log(コード);
                if ((コード == 40 || コード == 83)&&snake.dir != 't') {
                    スネーク.dir = 'b'
                }
                if ((コード == 39 || コード == 68)&&snake.dir != 'l') {
                    スネーク.dir = 'r'
                }
                if ((コード == 38 || コード == 87)&&snake.dir != 'b') {
                    スネーク.dir = 't'
                }
                if ((コード == 37 || コード == 65)&&snake.dir != 'r') {
                    スネーク.dir = 'l'
                }
            }
        }
        スネークを初期化します。
    </スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: