JavaScript スネーク実装コード

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

まず、ヘビが持つべき機能を決定する必要がある

1.キーボードの上下左右のキーを使ってヘビの移動方向を制御します。

2. 境界の決定、つまり蛇の頭が境界を越えるとゲームは終了する

3. 衝突検出、つまりヘビの頭と食べ物のブロックが互いに接触する

4. 食べ物を食べるとポイントが1増えます

具体的な実装

1.htmlコード

<div class="コンテナ">
        <!--ヘビが動く遊び場-->
        <div id="遊び場">
            <!--リトルスネーク-->
            <div id="ヘビ"></div>
            <!--食べ物-->
            <div id="食べ物"></div>
        </div>
        <!--スコアを記録-->
        <div id="メニュー">
            <div>スコア<span id="score"></span></div>
        </div>
</div>

2.cssコード

<スタイル>
        * {
            パディング: 0;
            マージン: 0;
        }
 
        。容器 {
            幅: 800ピクセル;
            高さ: 600px;
            マージン: 0 自動;
        }
 
        #遊び場 {
            幅: 650ピクセル;
            高さ: 100%;
            背景色: cadetblue;
            フロート: 左;
            位置: 相対的;
        }
 
        #メニュー{
            幅: 150ピクセル;
            高さ: 100%;
            背景色: ダークシアン;
            フロート: 左;
        }
 
        ＃蛇 {
            幅: 20px;
            高さ: 20px;
            背景色: #d3e0d7;
            位置: 絶対;
            左: 0;
            上: 0;
        }
 
        ＃食べ物 {
            幅: 20px;
            高さ: 20px;
            背景色: #027766;
            位置: 絶対;
        }
 
        。体 {
            幅: 20px;
            高さ: 20px;
            背景色: #178b9a;
            位置: 絶対;
            ;
            上: 0;
            左: 0;
        }
 
        ＃スコア {
            フォントサイズ: 30px;
            フォントの太さ: 太字;
            色: 黒;
        }
 
        #メニューdiv{
            フォントサイズ: 20px;
            フォントの太さ: 太字;
            左マージン: 20px;
        }
 
        #hqx {
            幅: 100ピクセル;
            高さ: 50px;
            マージン: 0 自動;
 
        }
 
        #inp {
            境界線: 0;
            幅: 100ピクセル;
            高さ: 50px;
            背景色: コーラル;
        }
</スタイル>

3. 具体的な機能の実装を開始する

1. まずノードを取得し、グローバル変数を設定する

//ノードを取得します var snake = document.getElementById("snake");
        var food = document.getElementById("food");
        var 遊び場 = document.getElementById("遊び場");
        var スコア = document.getElementById('スコア');
        // var inp = document.getElementById('inp')
        /*グローバル変数を設定する*/
        var タイマー;
        var arr = []; // ヘビの位置を格納する配列 var num = 0; // 配列の長さ var snakeBody; // 食べ物を食べるたびに体が大きくなります

2. キーイベントを設定し、境界衝突を決定します。衝突が発生するとゲームは終了します。このコードで問題が発生しました。イベントから抜け出すために if(){return} を使用すると、すべてのコードが終了し、次のコードが実行されませんでした。その後、これを switch(){case: break;} に変更すると、動作しました。

 //キーイベントを設定する document.onkeydown = function (e) {
            var evt = window.evnet || e;
            スイッチ (evt.keyCode) {
                ケース 37: //左 clearInterval(timer);
                    timer = window.setInterval(runLeft, 10); //左に移動するタイマー function runLeft() {
                        （snake.offsetLeft > 0）の場合{
                            snake.style.left = snake.offsetLeft - 1 + 'px'; // 自己移動を実現する snake.style.top = snake.offsetTop + 'px'; // 高さは変化しない arr.push([snake.offsetLeft, snake.offsetTop]); // 1px 移動するたびに、その位置を配列に格納する num++; // 対応する配列の長さに 1 を加える
                        } それ以外 {
                            clearInterval(timer); //タイマーをクリア alert('you die') //失敗メッセージをポップアップ document.onkeydown = null //終了ボタン }
                    }
                    break; //現在のキーストロークを終了 case 38: //clearInterval(timer);
                    タイマー = window.setInterval(runTop, 10);
 
                    関数runTop() {
                        （snake.offsetTop > 0）の場合{
                            snake.style.top = snake.offsetTop - 1 + 'px';
                            snake.style.left = snake.offsetLeft + 'px';
                            arr.push([snake.offsetLeft, snake.offsetTop]);
                            数値++;
                        } それ以外 {
                            タイマーの間隔をクリアします。
                            警告('あなたは死にます')
                            document.onkeydown = null
                        }
                    }
                    壊す;
                ケース 39: //右 clearInterval(timer);
                    タイマー = window.setInterval(runRight, 10);
 
                    関数runRight() {
                        （snake.offsetLeft < 630）の場合{
                            snake.style.left = snake.offsetLeft + 1 + 'px';
                            snake.style.top = snake.offsetTop + 'px';
                            arr.push([snake.offsetLeft, snake.offsetTop]);
                            数値++;
                        } それ以外 {
                            タイマーの間隔をクリアします。
                            警告('あなたは死にます')
                            document.onkeydown = null
                        }
                    }
                    壊す;
                ケース40: //clearInterval(タイマー);
                    タイマー = window.setInterval(runBottom, 10);
 
                    関数runBottom() {
                        （snake.offsetTop < 580）の場合{
                            snake.style.top = snake.offsetTop + 1 + 'px';
                            snake.style.left = snake.offsetLeft + 'px';
                            arr.push([snake.offsetLeft, snake.offsetTop]);
                            数値++;
                        } それ以外 {
                            タイマーの間隔をクリアします。
                            警告('あなたは死にます')
                            document.onkeydown = null
                        }
                    }
                    壊す;
 
}

3. 食べ物の位置をランダムに生成する関数をカプセル化します。最初は不注意でユニットを追加するのを忘れましたが、Webページを見ても機能せず、ユニットを追加するのを忘れたことに気付きました。

関数pos() {
                food.style.left = parseInt(Math.random() * 630) + 'px';
                food.style.top = parseInt(Math.random() * 580) + 'px';
            }

4. 衝突判定機能をカプセル化して、衝突が発生すると餌が消え、ヘビの体の一部が追加されるようにします。ここでタイマーの問題がありました。初めて書いたとき、タイマークリアフラグが以前のタイマーフラグと同じだったので、ヘビが上下左右に揺れていました。修正を重ねて、ようやくエラーを見つけました。

var timer1 = setInterval(eat, 10); //衝突タイマーを設定する function eat() {
                snakeCrashFood(snake, food); //入力パラメータ function snakeCrashFood(obj1, obj2) {
                    var obj1Left = obj1.offsetLeft;
                    var obj1Width = obj1.offsetWidth + obj1.offsetLeft;
                    var obj1Top = obj1.offsetTop;
                    var obj1Height = obj1.offsetHeight + obj1.offsetTop;
                    var obj2Left = obj2.offsetLeft;
                    var obj2Width = obj2.offsetWidth + obj2.offsetLeft;
                    var obj2Top = obj2.offsetTop;
                    var obj2Height = obj2.offsetHeight + obj2.offsetTop;
                    if (!((obj1Width < obj2Left) || (obj2Width < obj1Left) || (obj1Height < obj2Top) || (
                            obj2Height < obj1Top))) {
                        snakeBody = document.createElement("div"); //新しいdivを生成する
                        snakeBody.setAttribute("class", "body"); //新しいdivにクラス名を追加します playground.appendChild(snakeBody); //新しいボディを追加します pos(); //食べ物がランダムに再表示されるようにします setInterval(follow, 10); //新しいボディの位置を動的に変更します }
                }
            }

5. 追従するヘビの体を設定し、ヘビの体の配列と、前の体の 20 番目の配列に対する新しい体の位置を取得します。ここで配列の範囲外の問題が発生しました。最初はnumの初期値が0、place=20なので、arr[num-place][0]の最初の増加前のインデックスは負の数から始まります。教師の指導により、この問題を解決するための判断が追加されます。

関数フォロー() {
                /*追加されたボディの配列を取得します*/
                var bodyNum = document.getElementsByClassName("body");
                スコア.innerHTML = bodyNum.length;
                var 場所 = 0;
                /*配列が1ピクセル移動するたびに、新しいボディの位置は前のボディに対する20番目の配列の位置になります。*/
                // コンソールログ("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1")
                // console.log("arr: ==" + arr)
                // console.log("num : ==" + num) //2
                (var i = 0; i < bodyNum.length; i++) {
                    // console.log("bodyNum.length: ==" + bodyNum.length)
                    場所 += 20;
                    // console.log("place : ==" + place)//20
                    // console.log("num - place : ==" + (num - place)) //-18
                    // bodyNum[i].style.left = arr[num - place][0] + 'px';
                    // bodyNum[i].style.top = arr[num - place][1] + 'px';
                    if (数 - 場所 > 0) {
                        bodyNum[i].style.left = arr[num - place][0] + 'px';
                        bodyNum[i].style.top = arr[num - place][1] + 'px';
                    }
 
                }
                // console.log("num555: ==" + num)
                // console.log("=========================================================================")
            }

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

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