考える最初のステップは、ヘビがいくつの部分に分かれているか、ヘビの頭と体がどのように形成されているかを考えることです。 2 番目のステップは、ヘビがどのように動くか、つまりキーボードを通じてヘビの方向を制御する方法について考えることです。 3 番目のステップは、どのような状況でゲームが終了するかを考えることです。 4 番目のステップは、食べ物がどのように生産されるか、そしてその生産場所とヘビの位置の間でどのような点に注意を払う必要があるかを考えることです。 5 番目のステップは、ヘビがどのように食べ物を食べるかを考えることです。食べた後、ヘビの体は長くなり、新しい食べ物が生成されます。 ステップ 6 を完了したら、さらに数回プレイして、作業の成果を楽しんでください。 ! ! ! 1. 貪欲な蛇の効果画像2. スネークの分析2.1 ゲーム開始機能ユーザーがゲームのメインインターフェースに入ると、インターフェースの中央下部の目立つ位置に「開始」ボタンがあります。このボタンをクリックすると、新しいゲームを開始できます。ボタン変数を取得し、addEventListener('click', function() {}) クリック イベントを追加します。 btnstart.addEventListener('click', 関数() { btnstart.style.display = 'なし'; //中間クラスを呼び出す game = new Game(); var テーブル = document.querySelector('テーブル'); table.addEventListener('クリック', 関数() { //タイマーをクリアする clearInterval(game.timer); btnstop.style.display = 'ブロック'; }) }); 2.2 運動機能2.2.1 さまざまな方向へのヘビの動きユーザーが「ゲームを開始」ボタンをクリックすると、デフォルトではヘビは左から右に移動します。 //現在の方向は willDirection を受け入れます。 ! ! this.direction = this.willDirection; // 異なる方向へのスネークの動き switch (this.direction) { ケース「R」: //右に移動 this.body.unshift({ "row": this.body[0].row, "col": this.body[0].col + 1 }); 壊す; ケース「D」: //下へ移動 this.body.unshift({ "row": this.body[0].row + 1, "col": this.body[0].col }); 壊す; ケース「L」: //左に移動 this.body.unshift({ "row": this.body[0].row, "col": this.body[0].col - 1 }); 壊す; ケース「T」: //上に移動 this.body.unshift({ "row": this.body[0].row - 1, "col": this.body[0].col }); 壊す; } 2.2.2 キーボードコントロール方向移動機能ユーザーはキーボードの上下左右の方向キーを使用してヘビの移動方向を制御でき、ヘビは制御された方向に直線的に移動します。 Game.prototype.bindEvent = 関数() { var self = this; //キーボードイベント document.onkeydown = function(e) { スイッチ (e.keyCode) { //左ボタンを押すケース37: //まず判断します(現在の方向が右に移動している場合、この時点では左ボタンを押すことはできません) self.snake.direction == 'R' の場合、戻り値: // self.snake.direction = 'L'; 方向をLに変更します。 self.d = "L"; 壊す; //上キーを押す case 38: self.snake.direction == 'D' の場合、戻り値: 方向を変更します。 自己.d = "T"; 壊す; //右キーを押すケース39: self.snake.direction == 'L' の場合、戻り値: 方向を変更します。 self.d = "R"; 壊す; //キーケース40を押します: self.snake.direction == 'T' の場合、戻り値: 方向変更('D') self.d = "D"; 壊す; } } }; 2.3 食物を食べる機能2.3.1 食料生産食べ物の場所: ヘビの行と列をトラバースし、ランダムに生成された行と列と重なるかどうかを判断します。 var self = this; //ウィンドウを参照 //次の do-while ループ ステートメントは、最初に行と列を作成し、次にそれがスネーク上にあるかどうかを判断するために使用されます。 //食べ物の場所 this.row = parseInt(Math.random() * gameSnake.row); this.col = parseInt(Math.random() * gameSnake.col); } while ((関数() { // ヘビの行と列を走査し、ランダムに生成された行と列と重なるかどうかを判断します for (var i = 0; i < gameSnake.snake.body.length; i++) { gameSnake.snake.body[i].row == self.row && gameSnake.snake.body[i].col == self.col) の場合 { true を返します。 } } false を返します。 })()); 2.3.2 食べ物を食べる過程食べ物がインターフェース上のどこかに現れると、ユーザーは方向キーを使ってヘビを操作し、食べ物の周りを移動させます。ヘビの頭が食べ物に触れると、貪欲なヘビが食べ物を食べたことを意味します。次の食べ物がインターフェース上の任意の場所に現れ、ユーザーはヘビを操作してこの食べ物をもう一度食べさせます。 //現在のヘビの頭が餌と重ならない場合は、餌が食べられていないことを意味し、この時点で尻尾は削除されます。 this.body[0].row == game.food.row && this.body[0].col == game.food.col) の場合 { // 重なっている場合は、食べられたことを意味します。尻尾は削除されず、頭のみが追加されます。 // 新しい食べ物を作成します。game.food = new Food(game); // ヘビがジャンプして餌を食べてポイントを追加するので、フレーム番号を 0 にリセットします。game.score++; ゲーム.f = 0; } それ以外 { this.body.pop(); } 2.4 死亡判定機能蛇の頭が前方の壁にぶつかったり、蛇の頭が蛇の体を食べたりすると、死亡判定が下され、ユーザーのゲームスコアにポップアップボックスが表示されます。 2.4.1 エッジデスジャッジメント(壁に当たる)this.body[0].col > game.col - 1 || this.body[0].row > game.row - 1 || this.body[0].col < 0 || this.body[0].row < 0) の場合 { // 右下左上のアラート('ゲームは終了しました。現在の合計スコアは:' + game.score + 'points'); this.body.unshift(); ゲームのタイマーをクリアします。 } 2.4.2自分を殴る(var i = 1; i < this.body.length; i++) { this.body[0].col == this.body[i].col && this.body[0].row == this.body[i].row)の場合{ alert('ゲームは終了しました。現在の合計スコアは:' + game.score + 'points'); ゲームのタイマーをクリアします。 } } 2.5 ゲームの一時停止/再開機能btnstop.addEventListener('click', 関数() { btnstop.style.display = 'なし'; game.timer = setInterval(function() { // タイマーの核はゲーム レンダリングの本質です。画面をクリア - 更新 - レンダリング game.f++; // 画面をクリアします game.clear(); // スネークの動き/更新 // スネークの更新速度 スネーク側が長いほど速度が上がります var during = game.snake.body.length < 30 ? 30 - game.snake.body.length : 1; // Snake 更新 game.f % during == 0 && game.snake.update(); // ヘビをレンダリングします game.snake.render(); // 食べ物をレンダリングする game.food.render(); }, 20); }) 要約するスネークゲーム プロジェクトでは、アイデアを整理する必要があります。 これで、JS での実用的なオブジェクト指向スネーク ゲームの例に関するこの記事は終了です。より関連性の高い JS スネーク ゲーム コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します
>>: iOS スタイルの選択ボックスの開閉機能を実装するための純粋な CSS
目次Rractとは何ですか?背景React スキャフォールディングJSXとは何かRractとは何です...
この記事は MySQL 公式サイトを参考にしてまとめたものであり、遭遇したいくつかの問題も記録されて...
/******************** * キャラクターデバイスドライバー**********...
docker-compose でコンテナ ポートを公開する方法は、ports と expose の ...
目次1. コンポーネント2. キープアライブ2.1 問題点2.2 キープアライブを使って解決する2....
ウェブサイトをデザインするにはインスピレーションが必要です。良いインスピレーションを得るには、より多...
効果は以下のとおりです。 コードは次のとおりです (クリックすると展開してソース コードが表示されま...
目次el-scrollbar スクロールバーel-uploadはクリックをシミュレートしますel-s...
1 はじめに「Maven がワンクリックで Springboot を Docker リポジトリにデプ...
2次元配列の次元削減配列インスタンスメソッド concat と ES6 スプレッド演算子を使用した次...
この記事では主に、echart を使用してパーセンテージを表示する Vue の円グラフデータ部分を紹...
この記事では、虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...
1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...
準備: 1. VMwareワークステーションソフトウェアをインストールする2. Kali Linux...
この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共...