jsを使用して簡単なスネークゲームを書く

この記事では、参考までに、jsで書かれたシンプルなスネークゲームの具体的なコードを紹介します。具体的な内容は次のとおりです。

コードは次のとおりです。

HTML 5 パート

<!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>
    <スタイル>
        #シーン{
            幅: 800ピクセル;
            高さ: 600px;
            境界線: 1px実線 #000;
            マージン: 50px 自動;
            背景色: アリスブルー;
            位置: 相対的;
            オーバーフロー: 非表示;
        }
       。頭{
           位置: 絶対;
           幅: 20px;
           高さ: 20px;
           背景色: #000;
       }
       。しっぽ{
        位置: 絶対;
           幅: 20px;
           高さ: 20px;
           背景色: グレー;       
       }
    </スタイル>
</head>
<本文>
    <div id="シーン">

    </div>
</本文>
</html>
<script src="tools.js"></script>
<script src="../贪吃蛇/snake.js"></script>
<script src="food.js"></script>
<script src="game.js"></script>

js部分

ツール.js

関数 getStyle(ele, styleObj) {
    for (const key in styleObj) {
        ele.style[キー] = styleObj[キー];
    }   
}
関数 getRandom(a, b) {
    Math.floor(Math.random() * (b - a) + a +1) を返します。
}

スネーク

関数Snake() {
    this.scence = document.querySelector('#scence');
    this.body = [
        [0, 0, '灰色', null],
        [0, 1, '灰色', null],
        [0, 2, '#000', null]
    ];
    this.dir = '右';
    this.lastdir = '右';
    幅 = 20;
    this.height = 20;
    scence_w = scence.offsetWidth;
    scence_h = scence.offsetHeight;
}
Snake.prototype.found = 関数 () {
    (i = 0 とします; i < this.body.length; i++) {
        this.body[i][3] == nullの場合{
            this.body[i][3] = document.createElement('div');
        }
        getStyle(this.body[i][3], {
            幅: this.width + 'px',
            高さ: this.height + 'px',
            位置: '絶対'、
            上: this.height * (this.body[i][0]) + 'px',
            左: this.width * (this.body[i][1]) + 'px'、
            背景色: this.body[i][2]
        });
        this.scence.appendChild(this.body[i][3]);
    }
}
//移動 function Snake.prototype.move = function () {
    var length = this.body.length;
    (i = 0; i < 長さ - 1; i++) の場合 {
        this.body[i][0] = this.body[i + 1][0];
        this.body[i][1] = this.body[i + 1][1];
    }
    スネークヘッド = this.body[長さ - 1]とします。
    スイッチ (this.dir) {
        ケース 'right':
            スネークヘッド[1] += 1;
            壊す;
        ケース「左」:
            スネークヘッド[1] -= 1
            壊す;
        ケース「上」:
            スネークヘッド[0] -= 1
            壊す;
        ケース「ダウン」:
            スネークヘッド[0] += 1
            壊す;
    }
    this.lastdir = this.dir;
    ヘビが見つかりました();
}
// タイミングの動き Snake.prototype.shift = function () {
    document.onkeydown = (e) => {
        e = e || ウィンドウイベント;
        キーをe.keyCodeとします。
        スイッチ（キー）{
            ケース39:
                if (this.lastdir == 'left') {
                    this.dir = '左'
                } それ以外 {
                    this.dir = '右'
                };
                壊す;
            ケース37:
                if (this.lastdir == 'right') {
                    this.dir = '右'
                } それ以外 {
                    this.dir = '左'
                };
                壊す;
            ケース38:
                if (this.lastdir == 'down') {
                    this.dir = '下'
                } それ以外 {
                    this.dir = '上'
                };
                壊す;
            ケース40:
                if (this.lastdir == 'up') {
                    this.dir = '上'
                } それ以外 {
                    this.dir = '下'
                };
                壊す;
        }
    }
}

//ゲームオーバー Snake.prototype.over = function () {
    top = this.body[this.body.length - 1][0]とします。
    left = this.body[this.body.length - 1][1]とします。
    幅を this.scence_w / this.width - 1 とします。
    高さを this.scence_w / this.height - 1 とします。
    上 < 0 || 左 < 0 || 上 > 幅 || 左 > 高さ) {
        clearInterval(タイムID)
        警告('ゲームオーバー');
    }
    (i = 0 とします; i < this.body.length - 1; i++) {
        上 == this.body[i][0] && 左 == this.body[i][1]) {
            clearInterval(タイムID)
            警告('ゲームオーバー');
        }
    }
}


snake = new Snake();
ヘビが見つかりました();
ヘビ.shift();
timeid = setInterval(関数() {
    スネークを移動します。
    食べ物を食べる();
    スネークオーバー()
}, 100)

食べ物.js

関数 Food() {
  this.scence = document.querySelector('#scence');
  幅 = 20;
  this.height = 20;
  this.body = [-1, -1, '赤', null];
  scence_w = scence.offsetWidth;
  scence_h = scence.offsetHeight;
  
}
// 食品生成 Food.prototype.crteate = function () {
  this.body[1] = getRandom(0, this.scence_w / this.width-1);
  this.body[0] = getRandom(0, this.scence_h / this.height-1);
  this.body[3] = document.createElement('div');
  getStyle(this.body[3], {
    幅: this.width + 'px',
    高さ: this.height + 'px',
    位置: '絶対'、
    上: this.height * (this.body[0] ) + 'px',
    左: this.width * (this.body[1] ) + 'px'、
    背景色: this.body[2],
    境界半径: '50%',
  });
  this.scence.appendChild(this.body[3]);


}
//ヘビが餌を食べる Food.prototype.eat=function(){
  // 定数 new = [0, 0, 'grey', null]
if(snake.body[snake.body.length-1][0]==this.body[0] && snake.body[snake.body.length-1][1]==this.body[1]){
  this.scence.removeChild(this.body[3]);
  this.create();
  snake.body.unshift([-1,-1,"grey",null])
}
}
food = new Food(); とします。
food.create();
食べ物を食べる();

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

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