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

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 を応援していただければ幸いです。

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

<<:  Linux コマンド sort、uniq、tr ツールの詳細な説明

>>:  MySQLのビューとインデックスの使い方と違いの詳細な説明

推薦する

MySQL ダーティ ページ フラッシュとテーブル スペースの縮小の原理の分析

mysql ダーティページWAL メカニズムにより、InnoDB はステートメントを更新するときに、...

入力ボックスのオートコンプリート機能をオフにする

これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...

ウェブページ作成時のHTMLタグの使用に注意してください

HTML はプレゼンテーションからコンテンツへの移行を試みており、コンテンツの意味(HTML) とプ...

CSS3はマスク連打機能を実現する

最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマ...

Bootstrap が人気な 11 の理由

序文最も人気のあるフロントエンド開発フレームワークである Bootstrap は、Web サイトの開...

HTMLで細い線のテーブルを作成する簡単な例

この細線の表を作成する方法については、Baidu で検索すると、表に対して border="...

CSS と HTML とフロントエンド テクノロジーのレイヤー図

JavascriptとDOMの関係は非常に曖昧で、CSSやHTMLのフロントエンド技術層も理解してい...

Linux カーネル デバイス ドライバー カーネル リンク リストの使用上の注意

/******************** * カーネルにおけるリンクリストの応用********...

Win10 + Ubuntu20.04 LTS デュアルシステムブートインターフェースの美化

エフェクト表示組み込みのブートインターフェースがあまりにも醜いので、テーマをダウンロードして美しくし...

JavaScript 配列を走査する 5 つの方法

目次1. forループ: 基本的でシンプル2. forEach() メソッド: コールバック関数の使...

yum の基本的な使い方と例(推奨)

yumコマンドYum (フルネームは Yellow dog Updater, Modified) ...

MySQL における in と exists の違いの詳細な説明

1. 事前に準備する便宜上、ここで 2 つのテーブルを作成し、そこにいくつかのデータを追加します。果...

LinuxテキストエディタVimの詳しい説明

Vim は強力なフルスクリーン テキスト エディターであり、Linux/UNIX で最も一般的に使用...

測定画像HTTPリクエスト

一般的なブラウザでテスト ページを開き、Fiddler で http リクエストを表示してください。...

vscode で Prettier Code プラグインを使用する詳細なチュートリアル

なぜprettierを使うのですか?大企業では、フロントエンド開発コードに独自のコード標準がある場合...