コメント付きのスネークゲームを実装する js

コメント付きのスネークゲームを実装する js

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

完成までに2時間かかりました。ちょっと粗雑です。

効果を直接確認してください。デバッグ パネルを開き、リソース パネルに新しいスニペットを作成します。

次のコードを貼り付け、スニペットを右クリックして実行します。

タイマーの間隔をクリアします。
ドキュメントのbody要素を空のままにしておくと、

// 1 秒間に何マス移動するか let speed = 10;
speedUpMul = 3 とします。

//壁を通り抜けられますか? let isThroughTheWall = true;

//行数 let row = 40;
headColor を 'red' にします。
bodyColor を 'green' とします。
foodColor を 'yellow' とします。
borderColor を 'grey' にします。


//ゲームのグローバル変数 let hasFood = false;
//ゲームステータス let gamestaus = 'start';
hasAccelerate を false にします。

mainContainer を document.createElement("div"); にします。
mainContainer.style.width = 20 * 行 + 1 + "px";
mainContainer.style.height = 20 * 行 + 1 + "px";
mainContainer.style.margin = "0 自動";
mainContainer.style.position = "相対";
mainContainer.style.border = "1px ソリッド " + borderColor;

document.body.appendChild(メインコンテナ);

for(let i = 0;i<row;i++){
 marginTop = 20 * i + "px" とします。
 for(j = 0; j < row; j++) {
 marginLeft = j * 20 + "px"とします。
 tempDiv = document.createElement('div'); とします。
 tempDiv.style.width = "19px";
 tempDiv.style.height = "19px";
 tempDiv.style.marginTop = marginTop;
 tempDiv.style.marginLeft = marginLeft;
 tempDiv.style.border = "0.5px ソリッド " + borderColor;
 tempDiv.style.position = "絶対";
 tempDiv.id = j + "div" + i;
 mainContainer.appendChild(tempDiv);
 }
}

クラス Cell{
 コンストラクタ(x, y, 色){
 if (isThroughTheWall) {
  x < 0 の場合、x = 行-1;
  x > 行 - 1 の場合、x = 0;
  y < 0 の場合、y = 行 - 1;
  y > 行 - 1 の場合、y = 0;
 }それ以外{
  if(x < 0 || y < 0 || x > 行 - 1 || y > 行 - 1){
  タイマーの間隔をクリアします。
  alert('ゲームオーバー');
  戻る;
  }
 }
 this.x = x;
 y = y;
 this.color = 色;
 tempDiv = document.getElementById(x + 'div' + y); とします。
 if(tempDiv) tempDiv.style.backgroundColor = color;
 }
}

ヘビ = {
 頭 : {}、
 体 : []、
 ダイレ:1
}

headx = Math.floor(Math.random() * 14) + 3 とします。
heady = Math.floor(Math.random() * 14) + 3 とします。
snake.head = 新しいセル(headx、heady、headColor);

//上、右、下、左、方向 = [1, 2, 3, 4] とします

snake.dire = direction[Math.floor(Math.random() * 4)];

snake.direct == 1の場合
 snake.body.push(新しいセル(snake.head.x、snake.head.y+1、bodyColor));
 snake.body.push(新しいセル(snake.head.x、snake.head.y+2、bodyColor));
 snake.body.push(新しいセル(snake.head.x、snake.head.y+3、bodyColor));
}

snake.direct == 2の場合
 snake.body.push(新しいセル(snake.head.x-1、snake.head.y、bodyColor));
 snake.body.push(新しいセル(snake.head.x-2、snake.head.y、bodyColor));
 snake.body.push(新しいセル(snake.head.x-3、snake.head.y、bodyColor));
}

スネークダイレクトの場合 3
 snake.body.push(新しいセル(snake.head.x、snake.head.y-1、bodyColor));
 snake.body.push(新しいセル(snake.head.x、snake.head.y-2、bodyColor));
 snake.body.push(新しいセル(snake.head.x、snake.head.y-3、bodyColor));
}

snake.direct == 4の場合
 snake.body.push(新しいセル(snake.head.x+1、snake.head.y、bodyColor));
 snake.body.push(新しいセル(snake.head.x+2、snake.head.y、bodyColor));
 snake.body.push(新しいセル(snake.head.x+3、snake.head.y、bodyColor));
}

関数ゲーム(){
 if(ゲームステータス == '一時停止'){
 戻る;
 }
 if(ゲームステータス == 'ゲームオーバー'){
 タイマーの間隔をクリアします。
 alert('ゲームオーバー');
 戻る;
 }
 フードを初期化します。
 snakeHeadX = snake.head.x とします。
 snakeHeadY = snake.head.y とします。
 色を '' とします。
 snake.direct == 1の場合
 tempDiv = document.getElementById(snakeHeadX + 'div' + (snakeHeadY-1)); とします。
 if(tempDiv) color = tempDiv.style.backgroundColor;
 snake.head = 新しいセル(snakeHeadX、snakeHeadY - 1、headColor);
 }
 snake.direct == 2の場合
 tempDiv = document.getElementById((snakeHeadX + 1) + 'div' + snakeHeadY); とします。
 if(tempDiv) color = tempDiv.style.backgroundColor;
 snake.head = 新しいセル(snakeHeadX + 1、snakeHeadY、headColor);
 }
 スネークダイレクトの場合 3
 tempDiv = document.getElementById(snakeHeadX + 'div' + (snakeHeadY+1)); とします。
 if(tempDiv) color = tempDiv.style.backgroundColor;
 snake.head = 新しいセル(snakeHeadX、snakeHeadY + 1、headColor);
 }
 snake.direct == 4の場合
 tempDiv = document.getElementById((snakeHeadX - 1) + 'div' + snakeHeadY); とします。
 if(tempDiv) color = tempDiv.style.backgroundColor;
 snake.head = 新しいセル(snakeHeadX - 1、snakeHeadY、headColor);
 }
 snake.body.unshift(新しいセル(snakeHeadX、snakeHeadY、bodyColor));
 if(color && color == foodColor){
 フードがある = false;
 フードを初期化します。
 }そうでない場合(色 && 色 == ボディカラー){
 gamestaus = 'ゲームオーバー'; 
 }それ以外{
 lastBody を snake.body.pop() とします。
 新しいセル(lastBody.x、lastBody.y、'');
 }
}
var timer = setInterval(ゲーム、10 / 速度 * 100)


/**
 * 食べ物を初期化する */
関数initFood(){
 while(!hasFood){
 x = Math.floor(Math.random() * row); とします。
 y = Math.floor(Math.random() * row); とします。
 snakeBody を snake.body とします。
 enable = true とします。
 ヘビの頭のx == x && ヘビの頭のy == y){
  有効 = false;
 }
 for(sBody of snakeBody){
  sBody.x == x && sBody.y == yの場合{
  有効 = false;
  壊す;
  }
 }
 if(有効){
  新しいセル(x, y, foodColor);
  食べ物がある = true;
 }
 }
}

document.onkeydown = function(e){
 if(e.keyCode == 38){
 //if(snake.dire != 3 && snake.dire != 1){
  ヘビ.dire = 1;
 }そうでない場合(snake.direct == 1){
  加速がある場合
  タイマーの間隔をクリアします。
  加速する = true;
  速度 = 速度 * speedUpMul;
  タイマー = setInterval(ゲーム、10 / 速度 * 100)
  }
 }

 }

 if(e.keyCode == 39){
 //正しいif(snake.dire != 4 && snake.dire != 2){
  ヘビ.dire = 2;
 }そうでない場合(snake.dire == 2){
  加速がある場合
  タイマーの間隔をクリアします。
  加速する = true;
  速度 = 速度 * speedUpMul;
  タイマー = setInterval(ゲーム、10 / 速度 * 100)
  }
 }
 }

 キーコード == 40 の場合
 //Nextif(snake.dire != 1 && snake.dire != 3){
  ヘビ.dire = 3;
 }そうでない場合(snake.dire == 3){
  if(!hasAccelerate){
  タイマーの間隔をクリアします。
  加速する = true;
  速度 = 速度 * speedUpMul;
  タイマー = setInterval(ゲーム、10 / 速度 * 100)
  }
 }
 }

 if(e.keyCode == 37){
 // 左 if (snake.dire != 2 && snake.dire != 4) {
  ヘビ.dire = 4;
 }そうでない場合(snake.dire == 4){
  if(!hasAccelerate){
  タイマーの間隔をクリアします。
  加速する = true;
  速度 = 速度 * speedUpMul;
  タイマー = setInterval(ゲーム、10 / 速度 * 100)
  }
 }
 }
 //スペースバーで一時停止 if(e.keyCode == 32){
 if(ゲームステータス == '開始'){
  gamestaus = '一時停止';
 }それ以外の場合(ゲームステータス == '一時停止'){
  gamestaus = '開始';
 }
 }
}

document.onkeyup = function(e){
 if(e.keyCode == 38){
 // if (snake.dire == 1 && hasAccelerate) {
  タイマーの間隔をクリアします。
  加速あり = false;
  速度 = 速度 / speedUpMul;
  タイマー = setInterval(ゲーム、10 / 速度 * 100)
 }

 }

 if(e.keyCode == 39){
 // Rightif(snake.dire == 2 && hasAccelerate){
  タイマーの間隔をクリアします。
  加速あり = false;
  速度 = 速度 / speedUpMul;
  タイマー = setInterval(ゲーム、10 / 速度 * 100)
 }
 }

 キーコード == 40 の場合
 //Nextif(snake.dire == 3 && hasAccelerate){
  タイマーの間隔をクリアします。
  加速あり = false;
  速度 = 速度 / speedUpMul;
  タイマー = setInterval(ゲーム、10 / 速度 * 100)
 }
 }

 if(e.keyCode == 37){
 // 左 if (snake.dire == 4 && hasAccelerate) {
  タイマーの間隔をクリアします。
  加速あり = false;
  速度 = 速度 / speedUpMul;
  タイマー = setInterval(ゲーム、10 / 速度 * 100)
 }
 }
}

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

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

<<:  Linux の who コマンド例の紹介

>>:  Mysql マスタースレーブ サービスの実装例を構成する

推薦する

nginxプロキシsocket.ioサービスの落とし穴の詳細な説明

目次Nginx は 2 つの socket.io サーバーをプロキシします。 socket.ioの動...

TomcatはXMLを解析し、リフレクションを通じてオブジェクトを作成します。

次のサンプル コードでは、Tomcat が XML を解析し、リフレクションを通じてオブジェクトを作...

Python Django アプリケーションを Docker 化する方法

Docker は、開発者やシステム管理者がアプリケーションを軽量コンテナとして構築およびパッケージ化...

mysql8.0.18 で winx64 をインストールするための詳細なチュートリアル (画像とテキスト付き)

MySQLデータベースをダウンロードするには、https://dev.mysql.com/down...

MySQL 8.0 redo ログの詳細な分析

目次序文REDOログの生成REDOログ送信REDOログの保存と通知ユーザースレッドに通知要約する序文...

XHTML の珍しいが便利なタグ

Xhtml には、あまり使用されないが非常に便利なタグが多数あります。半分の労力で 2 倍の結果を達...

MySQL 8.0.23 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)

この記事では、MySQL 8.0.23のインストールと設定方法を参考までに紹介します。具体的な内容は...

Linux で at および cron スケジュールタスクをカスタマイズする方法

Linux システムには 2 種類のスケジュールされたタスクがあります。1 つは 1 回だけ実行され...

MySQL 最適化のヒント: 重複削除の実装方法の分析 [数百万のデータ]

この記事では、MySQL 最適化のヒントで重複したエントリを削除する方法を例を使って説明します。ご参...

Windows10 mysql 8.0.12 非インストール版 設定 起動方法

この記事では、MySQL 8.0.12のインストールされていないバージョンを設定して起動するための具...

vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明

目次ヴィテ建てる構成vite.config.tsルーターtsタイプvue3 の知識設定小道具コンテク...

Dockerを使用してサーバー上で複数のPHPバージョンを実行する

PHP7 がリリースされてからかなり時間が経ちますが、パフォーマンスが大幅に向上したことはよく知られ...

Vueスロットの使用の詳細

目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...

Dockerがコンテナを作成した後にホスト名を変更する詳細なプロセス

後悔を癒す薬は世の中にある、考えてみる気さえあれば!コンテナを再作成する必要はもうありません。 m2...

LinuxにNginxをインストールする詳細な手順

1. Nginxのインストール手順1.1 公式サイトの紹介http://nginx.org/en/d...