この記事では、古典的なスネークゲームを実装するための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をインストールするいくつかの方法の詳細な説明
エンコーディングの理由により、Linux サーバーに中国語のファイルやディレクトリをアップロードまた...
目次k8sのコントローラータイプポッドとコントローラの関係デプロイメント(ステートレスアプリケーショ...
この記事の例では、スターフラッシュ効果を実現するためのjsの具体的なコードを参考までに共有しています...
1. dockerfileを作成するときにsshパスワードを設定するには、次のコマンドを使用します。...
参考までに、JavaScriptのオブジェクトとメソッドを使用して実装されたWebピンボールゲームを...
以前、「Web ページにシステムに組み込まれていないフォントを埋め込む」という研究をしたことがありま...
この記事では、Web ページ レイアウト デザインのいくつかの簡単な原則をまとめ、Web ページ デ...
この記事では、USB ブート ディスクの作成とシステムのインストールについて説明します。システム構成...
ギリシャ文字は、特に数学や物理学などの科学技術分野で非常によく使用される記号列であり、特定の意味を持...
目次1. ランダムなブール値( true / false )を取得する2. 指定された日付が営業日で...
目次Vueのリスナーとは何かリスナーの使い方vue リスナーウォッチVue リスナー - ディープリ...
インデックスを追加すると、クエリの効率が向上します。インデックスを追加するということは、ドキュメント...
序文最近、X 省のコールド チェーン トレーサビリティ システムの開発で忙しくしています。毎日午後 ...
この記事では、マウスをスライドすると愛が広がる js 特殊効果を紹介します。効果は次のとおりです。 ...
g++ を使用して初めて cpp ファイルをコンパイルしたとき、未定義の参照エラーが報告されました。...