ネイティブ JS でスネークゲームを書く

この記事では、参考までに、JSでスネークゲームを書くための具体的なコードを紹介します。具体的な内容は次のとおりです。

私はちょうど js の学習を終えたところで、チュートリアルを真似て独自の js ネイティブアプレットを作成しました。

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>
    <link rel="スタイルシート" href="./css/index.css" >
</head>
<本文>
    <div class="content">
     <!-- ゲーム開始ボタン-->
        <div class="btn startBtn"><ボタン></ボタン></div>
        <!-- 蛇の体 -->
        <div id="snakeWrap"></div>
    </div>
    <!-- 外部 js ファイルをインポート-->
    <script src="./js/index.js"></script>
</本文>
</html>

CSS部分

/* 全体的なスタイル */
。コンテンツ{
    幅: 640ピクセル;
    高さ: 640px;
    マージン: 100px 自動;
    位置: 相対的;
}
 .btn{
    幅: 100%;
    高さ: 100%;
    位置: 絶対;
    左: 0;
    上: 0;
    背景色: rgba(0, 0, 0, 0.3);
    zインデックス: 2;
}

.btn ボタン{
    背景: なし;
    境界線: なし;
    背景サイズ: 100% 100%;

    カーソル: ポインタ;
    アウトライン: なし;

    位置: 絶対;
    左: 50%;
    上位: 50%;
}

.startBtn ボタン{
    幅: 200ピクセル;
    高さ: 80px;
    背景: url(../images/Snipaste_2021-05-08_08-52-45.png) 繰り返しなし;
    背景サイズ: 含む;
    左マージン: -100px;
    上マージン: 222px;
}

#スネークラップ{
    幅: 600ピクセル;
    高さ: 600px;
    背景: #73aad4;
    境界線: 20px 実線 #13649c;
    位置: 相対的;
}

.snakeHead{
    背景色: 黄緑;
    境界線の半径: 50%;
}

.snakeBody{
    背景色: 黒;
    境界線の半径: 50%;
}

。食べ物{
    背景色: 赤;
    境界線の半径: 50%;
}

js部分

var sw = 20, //ブロックの幅 sh = 20, //ブロックの幅 tr = 30, //行数 td = 30; //列数 var snake = null, //スネークインスタンスを生成 food = null; //フードインスタンスを生成 game = null; //ゲームインスタンスを作成 //全体を小さなブロックの移動として扱い、ブロックを作成および削除します（後続のブロックはすべて呼び出されます）
// 正方形コンストラクタ関数 Square(x,y,classname){ // CSS の 3 つの蛇のスタイル (蛇の頭、蛇の胴体、蛇の尾) に対応します
    sw を次のように書き換えます。
    y を y に置き換える
    this.class = クラス名;
    this.viewContent = document.createElement('div');
    this.viewContent.className = this.class; // 作成された div に対応する CSS スタイルを追加します。 this.parent = document.getElementById('snakeWrap');    
}

//ブロックコンストラクタのプロトタイプチェーンにcreateメソッドを作成し、新しいdivの特定の情報を決定します //これはSquareを指します
Square.prototype.create = 関数(){
    this.viewContent.style.position = '絶対';
    this.viewContent.style.width = sw + 'px';
    this.viewContent.style.height = sh + 'px';
    this.viewContent.style.left = this.x + 'px';
    this.viewContent.style.top = this.y + 'px';

    this.parent.appendChild(this.viewContent); // 新しく作成した div をページに追加します}

// ブロックコンストラクタのプロトタイプチェーンに削除メソッドを作成し、移動時にブロックを削除します。Square.prototype.remove = function(){
    this.parent.removeChild(this.viewContent);
}

//スネーク関数Snake(){
    this.head = null; // ヘビの頭の情報を保存します this.tail = null; // ヘビの尻尾の情報を保存します this.pos = []; // ヘビの各ブロックの位置を保存します this.directionNum = { // ヘビが歩いている方向を保存します left : {
            x : -1,
            年:0
        },
        右 ： {
            x : 1,
            年:0
        },
        上 ： {
            x : 0,
            y : -1
        },
        下 ： {
            x : 0,
            年:1
        }
    }
}

//これはSnakeを指します
Snake.prototype.init = function(){ // 初期化 // スネークヘッドを作成 var snakeHead = new Square(2,0,'snakeHead');
    スネークヘッドを作成します。
    this.head = スネークヘッド;
    this.pos.push([2,0]); // ヘビの頭の情報を保存する // ヘビの体 1 を作成する
    var snakeBody1 = new Square(1,0,'snakeBody');
    スネークボディ1を作成します。
    this.pos.push([1,0]); // ヘビの体の情報を保存します // ヘビのしっぽを作成します var snakeBody2 = new Square(0,0,'snakeBody');
    スネークボディ2を作成します。
    this.tail = snakeBody2;
    this.pos.push([0,0]); /ヘビの尻尾の信頼度を保存する//リンクリストの関係を形成する//ヘビの頭、胴体、尻尾の関係 snakeHead.last = null;
    スネークヘッドの次のコード

    スネークボディ1.last = スネークヘッド;
    ヘビのボディ1.next = ヘビのボディ2;

    スネークボディ2.last = スネークボディ1;
    スネークボディ2.next = null;

    // ヘビのデフォルトの方向を右に追加します。this.direction = this.directionNum.right;
}

// 蛇の頭の次の位置に対応する要素を取得します（これは蛇を指します）
// 次の点の座標を取得し、nextPos配列に格納します。Snake.prototype.getNextPos = function(){
    var 次の位置 = [
        this.head.x/sw + this.direction.x, //this.direction.x, y 以下は、方向をキーボードイベントにバインドして、次のポイントの位置を決定します this.head.y/sh + this.direction.y
    ]
    
    // 次のポイントはあなた自身です。自分自身と衝突するとゲームは終了します。var selfCollied = false;
    this.pos.forEach(function(value){ //forEachは配列を走査し、2つの配列を比較して重複する座標があるかどうかを確認します。if (value[0] == nextPos[0] && value[1] == nextPos[1]){
            自己コリッド = true;
        }
    })
 
 //自分自身を攻撃するとゲームは終了します if (selfCollied) {
        これ。、
        .die.call(これを);
        戻る;
    }

    // 次のポイントは壁ゲーム終了 if (nextPos[0] > 29 || nextPos[0] < 0 || nextPos[1] > 29 || nextPos[1] < 0) {
        this.strategies.die.call(これを);
        戻る;
    }

    // 次のポイントは食べる食べ物です if(food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]){
        this.strategies.eat.call(これを);
        戻る;
    }

    // 次のポイントは何もありませんので、this.strategies.move.call(this); に進みます。
}


// 衝突後に何をするか Snake.prototype.strategies = {
    move : function(format){ // パラメータは、蛇の尻尾を削除するかどうかを決定するために使用されます // 新しいボディを作成し、蛇の頭を削除します var newBody = new Square(this.head.x/sw,this.head.y/sh,'snakeBody')
        新しいボディーの次を this.head.next に置き換えます。
        新しいボディを次に示します。
        newBody.last = null;
        this.head.remove();
        新しいボディを作成します。

        // 新しいヘビの頭を作成します。var newx = this.head.x/sw + this.direction.x;
        var newy = this.head.y/sh + this.direction.y;
        var newHead = new Square(newx,newy,'snakeHead')
        新しいボディを作成します。
        新しいボディー.last = 新しいヘッド;
        newHead.last = null;
        新しいヘッドを作成します。

        // ヘビの体の座標を更新します this.pos.splice(0,0,[newx,newy]);
        this.head = newHead;

        //falseの場合は、if(!format){
            this.tail.remove();
            this.tail = this.tail.last;

            this.pos.pop();
        }
    },
    食べる:関数(){
        this.strategies.move.call(this,true);
        ゲームスコア++;
        フードを作成します。
    },
    死ぬ:関数(){
        ゲームオーバー（）;
    }
}


スネーク = 新しいSnake();


// 食べ物を作成する function createFood(){
    // 食品キューブの座標 var x = null;
    var y = null;

    var include = true;
    while(含める){
        x = Math.round(Math.random()*(td - 1));
        y = Math.round(Math.random()*(tr - 1));

        snake.pos.forEach(関数(値){
            if(x != 値[0] && y != 値[1]){
                含める = false;
            }
        });
    }
    // 食べ物を生成 food = new Square(x,y,'food');
    食べ物の位置 = [x,y];

    var foodDom = document.querySelector('.food');
    if(foodDom){
        foodDom.style.left = x * sw + 'px';
        foodDom.style.top = y * sh + 'px';
    }それ以外{
        food.create();
    }
}



// ゲームロジック関数を作成する Game(){
    this.timer = null;
    this.スコア = 0;
}

Game.prototype.init = 関数(){
    スネークを初期化します。
    フードを作成します。
 //以前のe.keycode e.whichはここで無効になっています。e.keyを使用してください
    window.addEventListener('keydown',function(e){
        if(e.key == 'ArrowLeft' && snake.direction != snake.directionNum.right){
            左から右へ
        }else if(e.key == 'ArrowUp' && snake.direction != snake.directionNum.down){
            方向 = 上方向;
        }それ以外の場合、e.key == 'ArrowRight' && snake.direction != snake.directionNum.left){
            ヘビの方向 = ヘビの方向Num.right;
        }else if(e.key == 'ArrowDown' && snake.direction != snake.directionNum.up){
            ヘビの方向 = ヘビの方向Num.down;
        }
    });
    これを開始();
}

Game.prototype.start = function(){
    this.timer = setInterval(関数(){
        スネークの次の位置を取得します。
    },0.00000000000000001)
}

Game.prototype.over = function(){
    タイマー間隔をクリアします。
    alert('あなたのスコアは' + this.score);


    // ゲームは初期状態に戻ります var snakeWrap = document.getElementById('snakeWrap');
    snakeWrap.innerHTML = '';

    スネーク = 新しいSnake();
    ゲーム = 新しいゲーム();

    var startBtnWrap = document.querySelector('.startBtn');
    startBtnWrap.style.display = 'ブロック';
}

// ゲームを開始します game = new Game();
var startBtn = document.querySelector('.startBtn ボタン');
startBtn.onclick = 関数(){
    startBtn.parentNode.style.display = 'なし';
    ゲームを初期化します。
}

これは簡単なゲームです。質問があれば、ぜひ教えてください。

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

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