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のビューとインデックスの使い方と違いの詳細な説明

推薦する

Vueでaxiosをカプセル化するいくつかの方法

目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...

MySQLの使い方の詳細な説明

目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...

テーブルセルの幅tdの設定は無効であり、内部コンテンツによって常に引き伸ばされます

テーブルページを作成するときに、td に設定された幅が無効になることがあります。td の幅は常に内部...

SQLと各種NoSQLデータベースの使用シナリオの説明

SQL はメイントランクです。なぜ私はこのように理解するのでしょうか。技術的な観点からリレーショナル...

Ubuntu16.04にclionをインストールするプロセス全体と手順の詳細な説明

CLion のプロセス全体を最初から説明します。CLion は、JetBrains がリリースした新...

Vue プロジェクトは左スワイプ削除機能を実装します (完全なコード)

成果を達成するコードは次のとおりですhtml <テンプレート> <div> ...

JavaScript における 3 つの for ループ ステートメントの使用の概要 (for、for...in、for...of)

序文JS に触れるすべての開発者は、必然的に for ループを扱うことになります。結局のところ、fo...

MySQLのnull値に関する小さな問題

今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...

JavaScriptはクリックトグル機能を実装します

この記事の例では、クリックして切り替える機能を実装するためのJavaScriptの具体的なコードを参...

ウェブサイトがhttpsを有効にした後のSSLのセキュリティ構成と検出

最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...

小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...

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

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

Mac でソースコードから MySQL 5.7.17 をコンパイルしてインストールするチュートリアル

1. ダウンロードして解凍します: /Users/xiechunping/Softwares/mys...

Linux システムで Code Cloud にプロジェクトをアップロードする方法

Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...