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:
|
Artikel empfehlen
Beispielcode für die Entwicklung einer H5-Formularseite basierend auf React-Hooks und der Konfiguration der Zarm-Komponentenbibliothek
Vor kurzem habe ich React Hooks in Kombination mi...
Detaillierter Prozessbericht der Nginx-Installation und -Konfiguration
Inhaltsverzeichnis 1 Einführung in nginx 1 Was is...
Starten Sie die auf Docker basierende nginxssl-Konfiguration
Voraussetzungen Ein Cloud-Server (centOS von Alib...
Wettersymbol-Animationseffekt implementiert durch CSS3
Ergebnisse erzielen Implementierungscode html <...
VUE+Canvas implementiert den Beispielcode des Desktop-Flipper-Brick-Breaking-Spiels
Jeder hat schon Flipper und Ziegelsteinzertrümmer...
MySQL-Fallanalyse der Transaktionsisolationsebene
Inhaltsverzeichnis 1. Theorie SERIALISIERBAR WIED...
So gehen Sie mit vergessenen Passwörtern in Windows Server 2008 R2 um
Was tun, wenn Sie Windows Server 2008R2 vergessen...
Implementieren eines Einkaufswagens mit nativem JavaScript
In diesem Artikel wird der spezifische JavaScript...
Eingabetyp begrenzen (mehrere Methoden)
1. Es können nur chinesische Schriftzeichen eingeg...
Detaillierte Erklärung des Unterschieds zwischen Tags und Elementen in HTML
Ich glaube, dass es vielen Freunden, die sich mit ...
Allgemeine Verwendung von regulären Ausdrücken in MySQL
Allgemeine Verwendung von Regexp in Mysql Fuzzy-M...
Linux-Plattform MySQL ermöglicht Remote-Login
Während des Entwicklungsprozesses stoße ich häufi...
Zusammenfassung der Wissenspunkte des Datenbankindex
Inhaltsverzeichnis Erster Blick-Index Das Konzept...
Tutorial zur Installation und Konfiguration von Hbase unter Linux
Inhaltsverzeichnis Hbase-Installation und -Konfig...
Implementierung eines einfachen Timers basierend auf der Vue-Methode
Der einfache Timer von Vue dient Ihnen als Refere...