Implementing a simple whack-a-mole game in JavaScript

Implementing a simple whack-a-mole game in JavaScript

This article shares the specific code for JavaScript to implement the whack-a-mole game for your reference. The specific content is as follows

The effect is as follows:

HTML code:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/index.js"></script>
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <style type="text/css">
  </style>
 </head>
 <body>
  <div id="controlCenter">
   <div class="buttons">
    <button class="buttonCss" onclick="startGame()">Start</button>
    <button class="buttonCss" onclick="pauseGame()">Pause</button>
    <button class="buttonCss" onclick="stopGame()">Stop</button>
   </div>
   <div class="buttons">
    <div class="score"><span>Score:</span><span class="spanCss" id="scoreId">0</span></div>
    <div class="score">Time:<span class="spanCss" id="timeId">00:00</span></div>
   </div>
  </div>
  <div id="mainFrame" class="mouseMiddle">
   
  </div>
 </body>
</html>

js code:

var columns = 4;
var rows = 3;
var gameFrameWidth = 0;
var gameFrameHeight = 0;
var caveWidth = 0;
var caveHeight = 0;
var caveCoord = []; //All cave coordinates var caveCoordMark = [];
var mouseOffsetX = 10; //Offset of the X axis after changing to a hammervar mouseOffsetY = 15; //Offset of the Y axisvar mouseTimeQueue = []; //Time queue of mouse existencevar nowMouseTime = []; //Life cycle of mousevar bulgeQueue = []; //Queue of mice that are peeking outvar destroyQueue = []; //Queue of mice that are actually destroyedvar maxMouseNum = 5; //Maximum number of mice that can exist at the same timevar startLoop = undefined; //Start the switchvar pauseFlag = false; //Pause flagvar minTime = 10; //Minimum time period of survivalvar maxTime = 15;//Maximum time period of survivalvar mouseFrameNum = 5; //Number of frames of the picturevar leftWidth = 0;
var topHeight = 0;
//var preTimeStamp = 0;
 
var score = 0;
 
window.onload = function() {
 init();
 mainFrameOnclick();
}
 
function init() {
// preTimeStamp = Date.parse(new Date());
 gameFrameWidth = mainFrame.offsetWidth;
 gameFrameHeight = mainFrame.offsetHeight;
 caveWidth = Math.floor(gameFrameWidth / (columns + 2));
 caveHeight = Math.floor(gameFrameHeight / (rows + 2));
 caveHeight = caveWidth = Math.min(caveHeight, caveWidth); //Use the smallest side of the calculated cave length and width as the length and width of the cave caveCoord = drawCave();
 mouseAnimationUpdate();
 scoreAutomationChange();
}
 
function timeChange(){
 let timestamp = Date.parse(new Date());
 let time = document.getElementById("timeId");
 let m = 0;
 let s = 0;
 setInterval(()=>{
  let now = Date.parse(new Date());
  let v = (now - timestamp)/1000;
// console.log(v);
  let 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);
  time.innerText = str;
 },1000);
}
 
function scoreAutomationChange(){
 leftWidth = mainFrame.getBoundingClientRect().left;
 topHeight = mainFrame.getBoundingClientRect().top;
 mainFrame.addEventListener("click",(event)=>{
  CheckHitMouse(event.pageX,event.pageY);
// CheckHitMouse(event.pageX - left, event.pageY - top);
 });
}
 
 
function CheckHitMouse(xx,yy) {
 let x = xx + mouseOffsetX; //Calculate mouse offset let y = yy + mouseOffsetY;
 //The location where the mouse is clicked // let c = document.createElement("div");
// c.style.backgroundColor = "red";
// c.style.width = "10px";
// c.style.height = "10px";
// c.style.left = x-5 + "px";
// c.style.top = y-5 + "px";
// c.style.position = "absolute";
// mainFrame.appendChild(c);
// console.log("**"+x+" "+y);
 let flag = false;
 for(let i = 0; i < bulgeQueue.length; i ++ ){
  let mouse = document.getElementById("mouseId"+bulgeQueue[i][2]);
  let left = mouse.getBoundingClientRect().left;
  let top = mouse.getBoundingClientRect().top;
  console.log(left+" "+top);
  if(x>left&&x<left+caveWidth&&y>top&&y<top+caveHeight){
   playHitAnimation(xx-leftWidth,yy-topHeight,i);
   score+=1;
   document.getElementById("scoreId").innerText = score;
  }
 }
}
 
function playHitAnimation(x,y,index){
 let a = document.createElement("img");
 a.src = "img/4.png";
 a.width = caveWidth;
 a.hheight = caveHeight;
 a.classList.add("caveCss");
 a.style.left = x-5 + "px";
 a.style.top = y-5 + "px";
 mainFrame.appendChild(a);
 setTimeout(()=>{
  mainFrame.removeChild(a);
  let v = bulgeQueue[index];
  let element = document.getElementById("mouseId"+v[2]);
  element.src = "img/mouse0.png";
  caveCoord.push(v);
  bulgeQueue.splice(index,1);
  nowMouseTime.splice(index,1);
  mouseTimeQueue.splice(index,1);
 },100);
}
 
function startGame() {
 pauseFlag = false;
 window.clearInterval();
 timeChange();
 startLoop = setInterval(()=>{
  if(pauseFlag) return;
  for(let i = 0; i < bulgeQueue.length; i ++ ){
   if(nowMouseTime[i] >= mouseFrameNum && nowMouseTime[i] <= mouseTimeQueue[i]){
    nowMouseTime[i]+=1;
   }
  }
  if(bulgeQueue.length<maxMouseNum){//The number of mice is less than 5 let index = getRandom(caveCoord.length);
   bulgeQueue.push(caveCoord[index]);
   caveCoord.splice(index,1);
   mouseTimeQueue.push(getRandomTime());
   nowMouseTime.push(0);
  }
 },500);
}
 
function mouseAnimationUpdate(){
 setInterval(()=>{
  if(pauseFlag) return;
  for(let i = 0; i < bulgeQueue.length; i ++ ){
   if(nowMouseTime[i]<mouseFrameNum){
    nowMouseTime[i]+=1;
    let mouse = bulgeQueue[i];
    let element = document.getElementById("mouseId"+mouse[2]);
    element.src = "img/mouse"+nowMouseTime[i]+".png";
   }
   else if(nowMouseTime[i]>mouseTimeQueue[i]){
    let mouse = bulgeQueue[i];
    let element = document.getElementById("mouseId"+mouse[2]);
    if(nowMouseTime[i]-mouseTimeQueue[i] >= mouseFrameNum+1){
     caveCoord.push(bulgeQueue[i]);
     bulgeQueue.splice(i,1);
     nowMouseTime.splice(i,1);
     mouseTimeQueue.splice(i,1);
     break;
    }
    element.src = "img/mouse"+(mouseFrameNum-nowMouseTime[i]+mouseTimeQueue[i])+".png";
    nowMouseTime[i]+=1;
   }
  }
 },200);
}
 
function pauseGame() {
 pauseFlag = pauseFlag ? false : true;
}
 
function stopGame() {
 location.reload();
}
 
function getRandomTime(){
 return minTime + getRandom(maxTime - minTime);
}
 
 
function mainFrameOnclick() {
 let mf = document.getElementById("mainFrame");
 mf.onclick = function(e) {
  mf.style.cursor = "url(img/01.ico),auto";
  setTimeout(() => {
   mf.style.cursor = "url(img/21.ico),auto";
  }, 200);
  setTimeout(() => {
   mf.style.cursor = "url(img/11.ico),auto";
  }, 400);
 }
}
 
function drawCave() {
 let coord = getAxialCoord();
 let count = getRandom(2) + 1;
 let mark = [];
 let newCoord = [];
 for(let i = 0; i < count; i++) {
  mark[getRandom(columns * rows)] = true;
 }
 for(let i = 0; i < coord.length; i++)
  if(mark[i] == undefined) {
   coord[i].push(i);
   newCoord.push(coord[i]);
   CreateCaveElement(coord[i][0], coord[i][1],i);
  }
 return newCoord;
}
 
function CreateCaveElement(axialX, axialY,index) {
 let createImg = document.createElement("img");
 createImg.width = caveWidth;
 createImg.height = caveHeight;
 createImg.style.left = axialX + "px";
 createImg.style.top = axialY + "px";
 createImg.classList.add("caveCss");
 createImg.id = "mouseId"+index;
 createImg.src = "img/mouse0.png";
 mainFrame.appendChild(createImg);
}
 
function getAxialCoord() {
 let location = [];
 let xWidth = Math.floor(gameFrameWidth / columns);
 let xRange = xWidth - caveWidth;
 let yHeight = Math.floor(gameFrameHeight / rows);
 let yRange = yHeight - caveHeight;
 for(let i = 0; i < rows; i++) {
  for(let j = 0; j < columns; j++) {
   let coord = [];
   coord.push(j * xWidth + getRandom(xRange));
   coord.push(i * yHeight + getRandom(yRange));
   location.push(coord);
  }
 }
 return location;
}
 
function getRandom(max) {
 let a = Math.random();
 return Math.floor(a * max);
}

Project resources: js whack-a-mole game

More interesting classic mini-game implementation topics to share with you:

C++ Classic Mini Games Collection

Python classic games summary

Python Tetris game collection

Play classic JavaScript games

Java classic games collection

JavaScript classic games summary

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Implementation of whack-a-mole game in JavaScript
  • Detailed explanation of the logic flow of whack-a-mole game based on JavaScript+HTML5 (with complete code)
  • JavaScript implements whack-a-mole game
  • js to realize the whack-a-mole game
  • JavaScript whack-a-mole game code explanation

<<:  Detailed explanation of inline elements and block-level elements in commonly used HTML tags

>>:  Solve the problem that MySQL read-write separation causes data not to be selected after insert

Recommend

vue3+ts+EsLint+Prettier standard code implementation

Table of contents use Use of EsLint Add a profile...

Why MySQL chooses Repeatable Read as the default isolation level

Table of contents Oracle Isolation Levels MySQL I...

Implementation of crawler Scrapy image created by dockerfile based on alpine

1. Download the alpine image [root@DockerBrian ~]...

zabbix custom monitoring nginx status implementation process

Table of contents Zabbix custom monitoring nginx ...

Regular expression usage in CSS selectors

Yes, CSS has regular expressions too (Amen) Two p...

How to permanently change the host name in Linux

If you want to change your host name, you can fol...

Detailed process of configuring NIS in Centos7

Table of contents principle Network environment p...

Detailed tutorial on building a local idea activation server

Preface The blogger uses the idea IDE. Because th...

Solution to MySQL server login error ERROR 1820 (HY000)

Fault site: Log in to the MySQL server and get th...

Detailed steps for completely uninstalling MySQL 5.7

This article mainly summarizes various problems o...

How to make CSS child elements highly consistent with parent elements

Absolute positioning method: (1) Set the parent e...

mysql zip file installation tutorial

This article shares the specific method of instal...

A quick solution to the problem of PC and mobile adaptation

When making a web page, we usually need to consid...

Detailed usage of docker-maven-plugin

Table of contents Docker-Maven-Plugin Maven plugi...