JavaScript で簡単なモグラ叩きゲームを実装する

この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

効果は以下のとおりです。

HTMLコード:

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <タイトル></タイトル>
  <script src="js/index.js"></script>
  <link rel="スタイルシート" type="text/css" href="css/index.css" />
  <スタイル タイプ="text/css">
  </スタイル>
 </head>
 <本文>
  <div id="コントロールセンター">
   <div class="buttons">
    <button class="buttonCss" onclick="startGame()">開始</button>
    <button class="buttonCss" onclick="pauseGame()">一時停止</button>
    <button class="buttonCss" onclick="stopGame()">停止</button>
   </div>
   <div class="buttons">
    <div class="score"><span>スコア:</span><span class="spanCss" id="scoreId">0</span></div>
    <div class="score">時間:<span class="spanCss" id="timeId">00:00</span></div>
   </div>
  </div>
  <div id="mainFrame" class="mouseMiddle">
   
  </div>
 </本文>
</html>

jsコード:

var 列 = 4;
var 行 = 3;
var ゲームフレーム幅 = 0;
var ゲームフレームの高さ = 0;
var 洞窟の幅 = 0;
var 洞窟の高さ = 0;
var caveCoord = []; //すべての洞窟の座標 var caveCoordMark = [];
var mouseOffsetX = 10; //ハンマーに変更した後の X 軸のオフセットvar mouseOffsetY = 15; //Y 軸のオフセットvar mouseTimeQueue = []; //マウスが存在する時間キューvar nowMouseTime = []; //マウスのライフサイクルvar bulgeQueue = []; //覗いているマウスのキューvar destroyQueue = []; //実際に破壊されたマウスのキューvar maxMouseNum = 5; //同時に存在できるマウスの最大数var startLoop = undefined; //スイッチを開始var pauseFlag = false; //一時停止フラグvar minTime = 10; //生存の最小期間var maxTime = 15;//生存の最大期間var mouseFrameNum = 5; //画像のフレーム数var leftWidth = 0;
var topHeight = 0;
//var プレタイムスタンプ = 0;
 
var スコア = 0;
 
window.onload = 関数() {
 初期化();
 mainFrameOnclick();
}
 
関数init() {
// preTimeStamp = Date.parse(新しいDate());
 ゲームフレームの幅 = mainFrame.offsetWidth;
 ゲームフレームの高さ = mainFrame.offsetHeight;
 caveWidth = Math.floor(gameFrameWidth / (列数 + 2));
 caveHeight = Math.floor(gameFrameHeight / (rows + 2));
 caveHeight = caveWidth = Math.min(caveHeight, caveWidth); // 計算された洞窟の長さと幅の最小の辺を洞窟の長さと幅として使用します。 caveCoord = drawCave();
 マウスアニメーションの更新();
 スコア自動化変更();
}
 
関数timeChange(){
 タイムスタンプを Date.parse(new Date());
 time = document.getElementById("timeId"); とします。
 m = 0 とします。
 s = 0 とします。
 設定間隔(()=>{
  date.parse(new Date()) を使います。
  v = (現在値 - タイムスタンプ)/1000 とします。
// コンソールログ(v);
  str = ""とします。
  s = v % 60;
  m = Math.floor(v/60);
  str = str + (m>9?m:"0"+m);
  str = str + ":";
  str = str + (s>9?s:"0"+s);
  時間.innerText = str;
 },1000);
}
 
関数スコア自動化変更(){
 左幅 = mainFrame.getBoundingClientRect().left;
 topHeight = mainFrame.getBoundingClientRect().top;
 mainFrame.addEventListener("クリック",(イベント)=>{
  CheckHitMouse(event.pageX、event.pageY);
// CheckHitMouse(event.pageX - 左、event.pageY - 上);
 });
}
 
 
関数 CheckHitMouse(xx,yy) {
 let x = xx + mouseOffsetX; //マウスのオフセットを計算します let y = yy + mouseOffsetY;
 // マウスがクリックされた場所 // let c = document.createElement("div");
// c.style.backgroundColor = "赤";
// c.style.width = "10px";
// c.style.height = "10px";
// c.style.left = x-5 + "px";
// c.style.top = y-5 + "px";
// c.style.position = "絶対";
// mainFrame.appendChild(c);
// console.log("**"+x+" "+y);
 フラグを false にします。
 for(let i = 0; i < bulgeQueue.length; i++){
  マウスを document.getElementById("mouseId"+bulgeQueue[i][2]);
  左を mouse.getBoundingClientRect().left とします。
  上部を mouse.getBoundingClientRect().top にします。
  console.log(左+" "+上);
  if(x>左&&x<左+洞窟幅&&y>上&&y<上+洞窟高さ){
   ヒットアニメーションを再生します(xx-leftWidth、yy-topHeight、i);
   スコア+=1;
   document.getElementById("scoreId").innerText = スコア;
  }
 }
}
 
関数playHitAnimation(x,y,index){
 document.createElement("img"); を作成します。
 src = "img/4.png";
 a.width = 洞窟の幅;
 a.hheight = 洞窟の高さ;
 クラスリストに「caveCss」を追加します。
 a.style.left = x-5 + "px";
 a.style.top = y-5 + "px";
 mainFrame.appendChild(a);
 タイムアウトを設定します(()=>{
  mainFrame.removeChild(a);
  v = bulgeQueue[インデックス]とします。
  要素を document.getElementById("mouseId"+v[2]); とします。
  要素.src = "img/mouse0.png";
  caveCoord.push(v);
  bulgeQueue.splice(インデックス、1);
  nowMouseTime.splice(インデックス、1);
  マウスタイムキューをスプライスします(インデックス、1);
 },100);
}
 
関数startGame() {
 一時停止フラグ = false;
 ウィンドウのクリア間隔();
 時間変更();
 ループ開始 = setInterval(()=>{
  if(pauseFlag) 戻り値:
  for(let i = 0; i < bulgeQueue.length; i++){
   nowMouseTime[i] >= mouseFrameNum && nowMouseTime[i] <= mouseTimeQueue[i]){
    現在のマウス時間[i]+=1;
   }
  }
  if(bulgeQueue.length<maxMouseNum){//マウスの数が5未満です。let index = getRandom(caveCoord.length);
   bulgeQueue.push(caveCoord[インデックス]);
   caveCoord.splice(インデックス、1);
   マウスタイムキューをプッシュします(getRandomTime());
   nowMouseTime.push(0);
  }
 },500);
}
 
関数mouseAnimationUpdate(){
 設定間隔(()=>{
  if(pauseFlag) 戻り値:
  for(let i = 0; i < bulgeQueue.length; i++){
   if(nowMouseTime[i]<mouseFrameNum){
    現在のマウス時間[i]+=1;
    マウスをbulgeQueue[i]とします。
    要素を document.getElementById("mouseId"+mouse[2]); とします。
    element.src = "img/mouse"+nowMouseTime[i]+".png";
   }
   そうでない場合(nowMouseTime[i]>mouseTimeQueue[i]){
    マウスをbulgeQueue[i]とします。
    要素を document.getElementById("mouseId"+mouse[2]); とします。
    if(nowMouseTime[i]-mouseTimeQueue[i] >= mouseFrameNum+1){
     caveCoord.push(bulgeQueue[i]);
     bulgeQueue.splice(i,1);
     nowMouseTime.splice(i,1);
     マウスタイムキュー.splice(i,1);
     壊す;
    }
    element.src = "img/mouse"+(mouseFrameNum-nowMouseTime[i]+mouseTimeQueue[i])+".png";
    現在のマウス時間[i]+=1;
   }
  }
 },200);
}
 
関数 pauseGame() {
 pauseFlag = pauseFlag ? false : true;
}
 
関数stopGame() {
 場所を再読み込みします。
}
 
関数 getRandomTime(){
 minTime + getRandom(maxTime - minTime) を返します。
}
 
 
関数 mainFrameOnclick() {
 mf = document.getElementById("mainFrame");
 mf.onclick = 関数(e) {
  mf.style.cursor = "url(img/01.ico),auto";
  タイムアウトを設定する(() => {
   mf.style.cursor = "url(img/21.ico),auto";
  }, 200);
  タイムアウトを設定する(() => {
   mf.style.cursor = "url(img/11.ico),auto";
  }, 400);
 }
}
 
関数drawCave() {
 座標を getAxialCoord() とします。
 count = getRandom(2) + 1とします。
 マークを [] とします。
 newCoord = [] とします。
 for(let i = 0; i < count; i++) {
  mark[getRandom(列 * 行)] = true;
 }
 for(i = 0 とします; i < 座標長さ; i++)
  if(mark[i] == 未定義) {
   座標[i].push(i);
   新しいCoord.push(coord[i]);
   洞窟要素を作成します(座標[i][0]、座標[i][1]、i);
  }
 新しい座標を返します。
}
 
関数 CreateCaveElement(軸X、軸Y、インデックス) {
 createImg = document.createElement("img"); を作成します。
 createImg.width = 洞窟の幅;
 createImg.height = 洞窟の高さ;
 createImg.style.left = axisX + "px";
 createImg.style.top = axisY + "px";
 createImg.classList.add("caveCss");
 createImg.id = "マウスID"+インデックス;
 createImg.src = "img/mouse0.png";
 mainFrame.appendChild(createImg);
}
 
関数 getAxialCoord() {
 場所を[]とします。
 xWidth = Math.floor(gameFrameWidth / columns); とします。
 xRange = xWidth - caveWidth とします。
 yHeight = Math.floor(gameFrameHeight / 行) とします。
 yRange = yHeight - caveHeight とします。
 for(let i = 0; i < 行; i++) {
  for(j = 0; j < 列; j++) {
   座標を[]とします。
   座標.push(j * xWidth + getRandom(xRange));
   座標をpush(i * yHeight + getRandom(yRange));
   location.push(座標);
  }
 }
 返却場所;
}
 
関数 getRandom(max) {
 a = Math.random() とします。
 Math.floor(a * max) を返します。
}

プロジェクトリソース: js モグラ叩きゲーム

皆さんと共有したい、より興味深いクラシックミニゲームの実装トピック:

C++ クラシックミニゲームコレクション

Python クラシックゲームの概要

Python テトリスゲームコレクション

クラシックなJavaScriptゲームをプレイする

Java クラシックゲームコレクション

JavaScript クラシックゲームの概要

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

以下もご興味があるかもしれません: