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

シンプルなスネークゲームを実現するネイティブ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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSはスネークゲームを実装する
  • スネークゲームのアイデアを実現するためのJavaScript
  • 古典的なスネークゲームの JavaScript 実装
  • jsを使用して簡単なスネークゲームを書く
  • JavaScript スネーク実装コード
  • スネークゲームのウェブ版を実装するためのJavaScript
  • JavaScript でスネーク ゲームを実装する
  • ネイティブ JS でスネーク ゲームを書く
  • コメント付きのスネークゲームを実装する js
  • JavaScript の絶妙なスネーク実装プロセス

<<:  MySQL で二重引用符の位置が誤っていたために起きた殺人事件の詳細な分析

>>:  EasyUEFI を使用して Windows 10 で USB ドライブなしで Ubuntu 18 をインストールする

推薦する

JavaScript で簡単なモグラ叩きゲームを実装する

この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...

MySQLのグループカウントと範囲集計を実装する2つの方法

1つ目:通常動作 選択 SUM(ddd) AS count_days、 場合 aa.days >...

Dockerコンテナのデータを復元する方法

プロジェクトのテスト環境データベースのデータが失われてしまったので、記録しておきたいと思います。当時...

HTMLにリンクを挿入する方法

各 Web ページには、URL () で識別されるアドレスがあります。通常、Web サイト内でリンク...

CSS グリッドレイアウトの完全ガイド

Grid は 2 次元のグリッド レイアウト システムです。これを使用すると、本質的にはハック メソ...

vscode dockerプラグインのdocker.socket権限問題を解決する

解決策: システム内のすべての .vscode 関連プロセスを終了します (または、remote-s...

MAC で Mysql5.7.10 のルートパスワードを変更する方法

まず、MySQLをskip-grant-tablesモードで起動します: mysqld --skip...

MySQL でデータ復旧に binlog を使用する方法

序文最近、オンラインでデータが誤って操作されました。データベースが直接変更されたため、それを回復する...

Nodejs は JSON 文字列を JSON オブジェクトに変換するエラー解決法

JSON 文字列を JSON オブジェクトに変換するにはどうすればいいですか? JSON.parse...

IE6 で JS エラーが発生し、CSS が適用されない HTML エンコードの問題の解決策

テストでは、ページ定義がutf-8でエンコードされている場合、 js ファイルに中国語などのマルチバ...

MySQL ルートパスワードエラー番号 1045 の解決方法

MySQLサービスを停止するWindowsでは、マイコンピュータを右クリック--管理--サービスと...

ReactのPropsの簡単な比較

目次クラスコンポーネントのプロパティ比較浅い同等の浅い比較機能コンポーネントの簡単な比較先週面接に行...

要素 el-button ボタンコンポーネントの使用の詳細な説明

1. 背景ボタンは非常によく使われており、Element のボタン機能は非常に包括的です。この記事で...

Linuxでバージョン情報を表示する方法

Linux でバージョン情報を表示する方法。ビット数、バージョン情報、CPU コア情報、CPU 固有...

Docker イメージのエクスポート、インポート、コピーの例の分析

最初の解決策は、イメージを公開イメージリポジトリにプッシュし、それをプルダウンすることです。 2 番...