この記事では、古典的なスネークゲームを実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 主にシングルトン モードを使用し、すべての要素が動的に作成されます。 1. マップを作成する var マップ; 関数マップ(){ this.mapp = null; this.makemap=関数(){ this.mapp = document.createElement ("div"); this.mapp.className = "mymap"; ドキュメントの body に this.mapp という子要素を追加します。 } } 2. ヘビのモデルを作成する ヘビの最初の 3 つのセクションを格納するコレクションを作成し、コレクションをトラバースして、ヘビのサイズと色を作成し、各セクションの幅と高さを 30 ピクセルに設定し、ヘビの頭の方向を右に初期化します。 var スナック; 関数スナック(){ this.snackk=[["赤",3,1,null],["ピンク",2,1,null],["ピンク",1,1,null]]; this.direct="右"; this.makesnack=関数(){ for(var i=0;i<this.snackk.length;i++){ if (this.snackk[i][3]==null){ this.snackk[i][3] = document.createElement("div"); this.snackk[i][3].className = "eatsnack"; this.snackk[i][3].style.backgroundColor =this.snackk[i][0]; Map.mapp.appendChild(this.snackk[i][3]); } this.snackk[i][3].style.left=this.snackk[i][1]*30+"px"; this.snackk[i][3].style.top=this.snackk[i][2]*30+"px"; } }; 3. 動的スネーク。スネークの各セクションを格納するセット スナックを後ろから前へトラバースし、各セクションの属性を後ろから前へ渡し、スネークのヘッドの移動方向を設定します。方向の変化に応じて、スネークの左余白と上余白が変化します。次に、タイマーを設定して、100 ミリ秒ごとにスネークを移動します。 this.movesnack=関数(){ var long = this.snackk.length - 1; for(var i=long; i>0; i--){ this.snackk[i][1] = this.snackk[i-1][1]; this.snackk[i][2] = this.snackk[i-1][2]; } スイッチ(this.direct){ case "right": //右 this.snackk[0][1] +=1; 壊す; case "left": //left this.snackk[0][1] -=1; 壊す; case "down": //ダウン this.snackk[0][2] +=1; 壊す; case "up": //上 this.snackk[0][2] -=1; 壊す; } 4. 食べ物を作る。 食べ物はマップ上にランダムに生成されます。食べ物のサイズは、ヘビの各セクションのサイズと同じです。 var グオグオ; 関数 guozi(){ this.guoo = null; これ.x; これ.y; this.makeguozi=関数(){ this.x = Math.floor( Math.random() * 30); //0-29 this.y=Math.floor( Math.random() * 20); //0-19 if(this.guoo==null){ this.guoo=document.createElement("div"); this.guoo.className = "guozi"; Map.mapp.appendChild(this.guoo); } this.guoo.style.left=this.x * 30+"px"; this.guoo.style.top =this.y * 30+"px"; } } 5. キーボード イベントを設定し、上、下、左、右のキーを使用してヘビの頭の方向を制御します。 document.body.onkeyup=関数(e){ // コンソールログ(e); スイッチ(e.keyCode){ ケース37: //leftif(Snack.direct!="right"){ Snack.direct = "左"; } 壊す; ケース39:// rightif(Snack.direct!="left"){ Snack.direct = "正しい"; } 壊す; ケース38: //up if(Snack.direct!="down"){ Snack.direct = "上"; } 壊す; ケース40: //Nextif(Snack.direct!="up"){ Snack.direct = "ダウン"; } 壊す; ケース87: Snack.direct != "down" の場合 { Snack.direct = "上"; } 壊す; ケース65: Snack.direct != "right") の場合 { Snack.direct = "左"; } 壊す; ケース68: Snack.direct != "left") の場合 { Snack.direct = "正しい"; } 壊す; ケース83: Snack.direct != "up" の場合 { Snack.direct = "ダウン"; } 壊す; } }; 6. ヘビの頭と餌の位置を検出します。ヘビの頭が餌を食べると、ヘビの長さが長くなり、スナックセットに要素が追加されます。次に、餌がランダムに作成され、餌の位置が検出され、再び餌を食べます。 if(this.snackk[0][1]==Guoguo.x && this.snackk[0][2]==Guoguo.y ){ this.snackk.push([ "ピンク"、 this.snackk[this.snackk.length-1][1], this.snackk[this.snackk.length-1][2], ヌル ]); グオグオ.makeguozi(); } 7. 蛇の体が壁を通り抜けるように設定します。蛇の頭の上、下、左、右の余白が 0 に等しい場合は、余白を最大値に変更します。 if(this.snackk[0][1]>29){ this.snackk[0][1]=0 ; //右から壁を通り抜ける} if(this.snackk[0][1]<0){ this.snackk[0][1]=29; //右から壁を通り抜ける} if(this.snackk[0][2]>19){ this.snackk[0][2]=0 ; //右から壁を通り抜ける} if(this.snackk[0][2]<0){ this.snackk[0][2]=19; //右から壁を通り抜ける} this.makesnack(); this.stopsnack(); }; 8. ゲームが終了するように設計します。ヘビは自分の体にぶつかると死にます。ゲームが終了し、タイマーがオフになります。ヘビの頭の上端と左端がヘビの体の一部の上端と左端と等しくなると、ゲームが終了し、ゲームの終了を示すプロンプト画像がポップアップ表示されます。 this.stopsnack=関数(){ for(var k=this.snackk.length-1;k>0;k--){ this.snackk[0][1]==this.snackk [k][1] && this.snackk[0][2]==this.snackk [k][2]) の場合 { クリア間隔(時間); var gameover = document.createElement("div"); gameover.className = "オーバー"; gameover.style.display = "ブロック"; Map.mapp.appendChild (ゲームオーバー); } } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntuにopencvをインストールする正しい方法の詳細な説明
>>: UbuntuにCMakeをインストールするいくつかの方法の詳細な説明
コアSQL文数字を含まない MySQL クエリ ステートメント: SELECT * FROM tes...
この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...
私は通常、Tomcatや他のアプリケーションのリバースプロキシとしてnginxを使用しています。実際...
その理由はモッカー プラットフォームを導入したかったので、友人の勧めで既成のプロジェクト api-m...
序文場合によっては、データベースのイントラネット アドレスしか知らず、イントラネット経由で接続できな...
目次1. グローバル beforeEach 1. グローバル beforeEach 2. 実装2. ...
この記事では、従業員管理登録ページを実装するためのjQueryの具体的なコードを例として紹介します。...
目次序文1. スタイルの浸透1. パターン浸透とは何ですか? 2. 使い方は? 2. ミキシング1....
序文Vue で要素を初回取得できない問題の解決方法は、ポップアップ ウィンドウで要素を取得するために...
1. 広告の 85% は未読です<br />解釈: 成功する広告の 15% にどうやって...
この記事では、アニメーション効果の非表示と表示を実現するためのJQueryの具体的なコードを参考まで...
フレックス レイアウトは現在よく使用されるレイアウト方法ですが、場合によっては小さな問題が発生するこ...
1. 問題MySQL の初期化時に発生する問題は、次のとおりです。 1. 「MSVCR120.dll...
問題の説明:たとえば、ファイル 11 の内容は次のとおりです。こんにちはファイル22の内容は次のとお...
1. はじめに数日前、開発仲間から、フィールドを同じ値に更新すると binlog が記録されるかどう...