Implementierung eines einfachen Whack-a-Mole-Spiels in JavaScript

In diesem Artikel finden Sie den spezifischen Code für JavaScript zur Implementierung des Whack-a-Mole-Spiels als Referenz. Der spezifische Inhalt ist wie folgt

Die Wirkung ist wie folgt:

HTML Quelltext:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8" />
  <Titel></Titel>
  <script src="js/index.js"></script>
  <link rel="stylesheet" type="text/css" href="css/index.css" />
  <style type="text/css">
  </Stil>
 </Kopf>
 <Text>
  <div id="Kontrollzentrum">
   <div Klasse="Schaltflächen">
    <button class="buttonCss" onclick="startGame()">Start</button>
    <button class="buttonCss" onclick="pauseGame()">Pause</button>
    <button class="buttonCss" onclick="stopGame()">Stopp</button>
   </div>
   <div Klasse="Schaltflächen">
    <div class="score"><span>Punktzahl:</span><span class="spanCss" id="scoreId">0</span></div>
    <div class="score">Zeit:<span class="spanCss" id="timeId">00:00</span></div>
   </div>
  </div>
  <div id="Hauptrahmen" Klasse="Mausmitte">
   
  </div>
 </body>
</html>

js-Code:

var Spalten = 4;
var Zeilen = 3;
var SpielFrameWidth = 0;
var SpielFrameHeight = 0;
var Höhlenbreite = 0;
var Höhlenhöhe = 0;
var caveCoord = []; //Alle Höhlenkoordinaten var caveCoordMark = [];
var mouseOffsetX = 10; //Offset der X-Achse nach dem Wechsel zu einem Hammervar mouseOffsetY = 15; //Offset der Y-Achsevar mouseTimeQueue = []; //Zeitliche Warteschlange der Mausexistenzvar nowMouseTime = []; //Lebenszyklus der Mausvar bulgeQueue = []; //Warteschlange der Mäuse, die hervorlugenvar destroyQueue = []; //Warteschlange der Mäuse, die tatsächlich zerstört werdenvar maxMouseNum = 5; //Maximale Anzahl von Mäusen, die gleichzeitig existieren könnenvar startLoop = undefined; //Schalter startenvar pauseFlag = false; //Pausenflaggevar minTime = 10; //Minimale Überlebensdauervar maxTime = 15;//Maximale Überlebensdauervar mouseFrameNum = 5; //Anzahl der Frames des Bildesvar leftWidth = 0;
var obere Höhe = 0;
//var preTimeStamp = 0;
 
Var-Punktzahl = 0;
 
fenster.onload = funktion() {
 init();
 mainFrameOnclick();
}
 
Funktion init() {
// preTimeStamp = Date.parse(neues Date());
 SpielFrameWidth = HauptFrame.OffsetWidth;
 SpielFrameHeight = HauptFrame.OffsetHeight;
 Höhlenbreite = Math.floor(Spielrahmenbreite / (Spalten + 2));
 Höhlenhöhe = Math.floor(Spielrahmenhöhe / (Zeilen + 2));
 caveHeight = caveWidth = Math.min(caveHeight, caveWidth); //Verwende die kleinste Seite der berechneten Höhlenlänge und -breite als Länge und Breite der Höhle caveCoord = drawCave();
 MausAnimationUpdate();
 scoreAutomationChange();
}
 
Funktion Zeitänderung(){
 let Zeitstempel = Date.parse(neues Date());
 let Zeit = document.getElementById("timeId");
 sei m = 0;
 sei s = 0;
 setzeIntervall(()=>{
  lass jetzt = Date.parse(neues Date());
  sei v = (jetzt – Zeitstempel)/1000;
// konsole.log(v);
  lass 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);
  Zeit.innerText = str;
 },1000);
}
 
Funktion scoreAutomationChange(){
 linke Breite = mainFrame.getBoundingClientRect().links;
 topHeight = mainFrame.getBoundingClientRect().top;
 mainFrame.addEventListener("Klick",(Ereignis)=>{
  CheckHitMouse(Ereignis.SeiteX,Ereignis.SeiteY);
// CheckHitMouse(event.pageX – links, event.pageY – oben);
 });
}
 
 
Funktion CheckHitMouse(xx,yy) {
 let x = xx + mouseOffsetX; //Mausversatz berechnen let y = yy + mouseOffsetY;
 //Die Stelle, an der mit der Maus geklickt wird // let c = document.createElement("div");
// c.style.backgroundColor = "rot";
// c.style.width = "10px";
// c.style.height = "10px";
// c.style.left = x-5 + "px";
// c.style.top = y-5 + "px";
// c.style.position = "absolut";
// mainFrame.appendChild(c);
// konsole.log("**"+x+" "+y);
 lass flag = false;
 für(lass i = 0; i < bulgeQueue.length; i++){
  let mouse = document.getElementById("mouseId"+bulgeQueue[i][2]);
  let left = mouse.getBoundingClientRect().left;
  let top = mouse.getBoundingClientRect().top;
  konsole.log(links+" "+oben);
  wenn(x>links&&x<links+Höhlenbreite&&y>oben&&y<oben+Höhlenhöhe){
   spieleHitAnimation(xx-linkeBreite,yy-obereHöhe,i);
   Punktzahl+=1;
   document.getElementById("scoreId").innerText = Punktzahl;
  }
 }
}
 
Funktion playHitAnimation(x,y,index){
 lass a = document.createElement("img");
 a.src = "img/4.png";
 a.width = Höhlenbreite;
 a.hheight = Höhlenhöhe;
 a.classList.add("caveCss");
 a.Stil.links = x-5 + "px";
 a.style.top = y-5 + "px";
 mainFrame.appendChild(a);
 setzeTimeout(()=>{
  mainFrame.removeChild(a);
  sei v = bulgeQueue[index];
  let element = document.getElementById("mouseId"+v[2]);
  element.src = "img/mouse0.png";
  caveCoord.push(v);
  bulgeQueue.splice(index,1);
  jetztMouseTime.splice(index,1);
  mouseTimeQueue.splice(index,1);
 },100);
}
 
Funktion starteSpiel() {
 pauseFlag = falsch;
 Fenster.ClearInterval();
 Zeitänderung();
 startLoop = Intervall festlegen(()=>{
  wenn(PauseFlag) return;
  für(lass i = 0; i < bulgeQueue.length; i++){
   wenn(jetztMauszeit[i] >= Mausrahmennummer && jetztMauszeit[i] <= Mauszeitwarteschlange[i]){
    jetztMausZeit[i]+=1;
   }
  }
  if(bulgeQueue.length<maxMouseNum){//Die Anzahl der Mäuse ist kleiner als 5 let index = getRandom(caveCoord.length);
   bulgeQueue.push(Höhlenkoordinaten[index]);
   caveCoord.splice(index,1);
   mouseTimeQueue.push(getRandomTime());
   jetztMouseTime.push(0);
  }
 },500);
}
 
Funktion mouseAnimationUpdate(){
 setzeIntervall(()=>{
  wenn(PauseFlag) return;
  für(lass i = 0; i < bulgeQueue.length; i++){
   wenn(jetztMauszeit[i]<MausFrameAnzahl){
    jetztMausZeit[i]+=1;
    lass Maus = bulgeQueue[i];
    let element = document.getElementById("mouseId"+mouse[2]);
    element.src = "img/mouse"+nowMouseTime[i]+".png";
   }
   sonst wenn(jetztMausZeit[i]>MausZeitWarteschlange[i]){
    lass Maus = bulgeQueue[i];
    let element = document.getElementById("mouseId"+mouse[2]);
    wenn(jetztMauszeit[i]-MauszeitWarteschlange[i] >= Mausrahmenanzahl+1){
     caveCoord.push(bulgeQueue[i]);
     bulgeQueue.splice(i,1);
     jetztMouseTime.splice(i,1);
     mouseTimeQueue.splice(i,1);
     brechen;
    }
    element.src = "img/maus"+(mausFrameNum-jetztMausZeit[i]+mausZeitWarteschlange[i])+".png";
    jetztMausZeit[i]+=1;
   }
  }
 },200);
}
 
Funktion pauseGame() {
 pauseFlag = pauseFlag? false : true;
}
 
Funktion stopGame() {
 Standort.neu laden();
}
 
Funktion getRandomTime(){
 returniere minTime + getRandom(maxTime - minTime);
}
 
 
Funktion mainFrameOnclick() {
 let mf = document.getElementById("mainFrame");
 mf.onclick = Funktion(e) {
  mf.style.cursor = "url(img/01.ico),auto";
  setzeTimeout(() => {
   mf.style.cursor = "url(img/21.ico),auto";
  }, 200);
  setzeTimeout(() => {
   mf.style.cursor = "url(img/11.ico),auto";
  }, 400);
 }
}
 
Funktion drawCave() {
 Koordinatensystem:
 lass count = getRandom(2) + 1;
 lass mark = [];
 lass neueKoord = [];
 für(lass i = 0; i < Anzahl; i++) {
  mark[getRandom(Spalten * Zeilen)] = true;
 }
 für (lass i = 0; i < Koordinate.Länge; i++)
  wenn(Markierung[i] == undefiniert) {
   Koordinate[i].push(i);
   newCoord.push(Koordinate[i]);
   CreateCaveElement(Koordinate[i][0], Koordinate[i][1],i);
  }
 gib neueKoordinate zurück;
}
 
Funktion ErstelleHöhlenelement(axialX, axialY,index) {
 let createImg = document.createElement("img");
 createImg.width = Höhlenbreite;
 createImg.height = Höhlenhöhe;
 createImg.style.left = axialX + "px";
 createImg.style.top = axialY + "px";
 : createImg.classList.add("caveCss");
 createImg.id = "Maus-ID"+Index;
 createImg.src = "img/mouse0.png";
 mainFrame.appendChild(ErstellenBild);
}
 
Funktion getAxialCoord() {
 lass Standort = [];
 let xWidth = Math.floor(gameFrameWidth / columns);
 sei xRange = xWidth - Höhlenbreite;
 sei yHeight = Math.floor(gameFrameHeight / rows);
 sei yRange = yHeight - Höhlenhöhe;
 für(lass i = 0; i < Zeilen; i++) {
  für(let j = 0; j < Spalten; j++) {
   lass Koordinate = [];
   coord.push(j * xWidth + getRandom(xRange));
   coord.push(i * yHöhe + getRandom(yBereich));
   Standort.push(Koordinate);
  }
 }
 Rückgabeort;
}
 
Funktion getRandom(max) {
 sei a = Math.random();
 gibt Math.floor(a * max) zurück;
}

Projektressourcen: js Whack-a-Mole-Spiel

Weitere interessante Themen zur Implementierung klassischer Minispiele, die ich mit Ihnen teilen möchte:

C++ Klassische Minispiele-Sammlung

Zusammenfassung der klassischen Python-Spiele

Python Tetris-Spielesammlung

Spielen Sie klassische JavaScript-Spiele

Sammlung klassischer Java-Spiele

Zusammenfassung klassischer JavaScript-Spiele

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Implementierung des Whack-a-Mole-Spiels in JavaScript
Detaillierte Erklärung des logischen Ablaufs des Whack-a-Mole-Spiels basierend auf JavaScript+HTML5 (mit vollständigem Code)
JavaScript implementiert Whack-a-Mole-Spiel
js zur Realisierung des Whack-a-Mole-Spiels
Erläuterung des Codes des JavaScript-Maulwurfspiels

<<: Detaillierte Erklärung von Inline-Elementen und Block-Level-Elementen in häufig verwendeten HTML-Tags

>>: Beheben Sie das Problem, dass die Lese-/Schreibtrennung von MySQL dazu führt, dass Daten nach dem Einfügen nicht ausgewählt werden