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
mysql 8.0.20 winx64.zip komprimierte Version Installations- und Konfigurationsmethode grafisches Tutorial
Das Installationstutorial der komprimierten Versi...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22 unter Windows 10
Grafisches Tutorial zur Installation und Konfigur...
Erläuterung der neuen Funktion von Hadoop 2.X, der Papierkorbfunktion
Durch Aktivieren der Papierkorbfunktion können Si...
Warum der Befehl „explain“ MySQL-Daten ändern kann
Wenn Sie jemand fragen würde, ob die Ausführung v...
Detaillierte Erläuterung des adaptiven Anpassungsproblems des Vue-Mobilterminals
1. Erstellen Sie ein Projekt mit Vue UI 2. Wählen...
Spezifische Verwendung des Linux-Befehls „dirname“
01. Befehlsübersicht dirname - entfernt nicht zu ...
Ausführliche Erklärung der Sonderberechtigungen SUID, SGID und SBIT in Linux
Vorwort Für die Berechtigungen von Dateien oder V...
js, um einen einfachen Akkordeoneffekt zu erzielen
In diesem Artikel wird der spezifische Code von j...
Detaillierte Erläuterung des Schnittstellenanforderungsmanagements basierend auf Typescript und Axios
Inhaltsverzeichnis Ideen Abfangen von Anfragen An...
MySQL-Serie Multi-Table Join Abfrage 92 und 99 Syntaxbeispiele ausführliches Tutorial
Inhaltsverzeichnis 1. Kartesisches Produktphänome...
Eine kurze Diskussion über den CSS-Kaskadierungsmechanismus
Warum hat CSS einen Kaskadierungsmechanismus? Da ...
So überprüfen Sie, ob die Ports des lokalen Computers und des Remote-Servers unter Linux verbunden sind
Wie unten dargestellt: 1. ssh -v -p [Portnummer] ...
So debuggen Sie das Loader-Plugin in einem Webpack-Projekt
Als ich kürzlich lernte, wie man webpack verwende...
Probleme mit dem benannten Mount und dem anonymen Mount des Docker-Container-Datenvolumens
Inhaltsverzeichnis Was ist ein Containerdatenvolu...
Spezifische Verwendung der Schnittstelle wx.getUserProfile im Applet
Kürzlich hat das WeChat Mini-Programm Anpassungen...