Bygg din egen bowlingsimulator med JavaScript – en praktisk guide
Har du någonsin undrat hur man kan kombinera sitt intresse för bowling med programmering? Att skapa en enkel bowlingsimulator i JavaScript är inte bara ett roligt projekt – det är också ett utmärkt sätt att lära sig grunderna i programmering. I den här guiden går vi igenom hur du bygger en fungerande bowlingapplikation steg för steg. Vi håller det enkelt, så att även om du är nybörjare kan du hänga med. Slutresultatet blir en interaktiv simulator där du kan slå kast och se poängen räknas ut automatiskt.
Varför en bowlingsimulator i JavaScript?
JavaScript är ett av de mest använda programmeringsspråken på webben, och att bygga en bowlingsimulator är ett perfekt sätt att öva på grundläggande koncept som variabler, funktioner, loopar och händelsehantering. Du får dessutom en visuell och interaktiv belöning när din kod börjar fungera. Ett javascript bowling example som detta kan du sedan anpassa och bygga vidare på – lägg till grafik, fler spelare eller till och med en poängtavla.
Förberedelser och grundläggande struktur
Innan vi börjar koda, se till att du har en grundläggande HTML-fil och en separat JavaScript-fil. Du kan också använda en online-editor som CodePen eller JSFiddle för att testa direkt. Här är en mall för att komma igång:
<!DOCTYPE html>
<html>
<head>
<title>Bowling Simulator</title>
</head>
<body>
<h1>Bowling Simulator</h1>
<div id="output"></div>
<button id="kasta">Kasta</button>
<script src="bowling.js"></script>
</body>
</html>
I din JavaScript-fil (bowling.js) ska vi nu bygga själva logiken. Målet är att simulera ett bowlingkast: slumpa antalet käglor som slås ner (0-10), visa resultatet och hålla reda på poängen över flera omgångar.
Steg 1: Skapa grundläggande variabler och funktioner
Först deklarerar vi några variabler för att hålla koll på poäng och omgångar. Vi använder en enkel poängräkning som inte tar hänsyn till spare eller strike – det lägger vi till senare om du vill utöka.
let totalScore = 0;
let frames = [];
let currentFrame = 1;
let rollsInFrame = 0;
let pinsRemaining = 10;
function roll() {
// Slumpa antalet käglor som slås ner (0 till pinsRemaining)
let knocked = Math.floor(Math.random() * (pinsRemaining + 1));
return knocked;
}
Funktionen roll() returnerar ett slumpmässigt antal käglor mellan 0 och det som finns kvar. I en riktig bowlingmatch har du två kast per omgång om du inte slår strike, men vi förenklar för tillfället.
Steg 2: Hantera kast och visa resultat
Nu vill vi koppla kastet till knappen och visa resultatet. Vi lägger till en händelsehanterare för knappen och en funktion som uppdaterar skärmen.
document.getElementById('kasta').addEventListener('click', function() {
let result = roll();
totalScore += result;
document.getElementById('output').innerHTML =
`Du slog ner ${result} käglor! Total poäng: ${totalScore}`;
});
Testa i din webbläsare. Varje gång du klickar på knappen slås ett antal käglor ner slumpmässigt och poängen adderas. Det här är grunden i vår javascript bowling example.
Steg 3: Flera kast per omgång och poängräkning
I riktig bowling har du två kast per omgång (förutom strike). Låt oss bygga ut så att vi först slår två kast per frame, och om du slår strike (10 käglor i första kastet) avslutas omgången direkt. Vi anpassar vår kod:
let frameScores = [];
let currentFrameRolls = [];
let frame = 1;
function roll(frame) {
let maxPins = 10 - (currentFrameRolls.length > 0 ? currentFrameRolls[0] : 0);
let knocked = Math.floor(Math.random() * (maxPins + 1));
currentFrameRolls.push(knocked);
// Om strike (10 i första kastet) eller två kast, avsluta frame
if (knocked === 10 || currentFrameRolls.length === 2) {
let frameTotal = currentFrameRolls.reduce((a, b) => a + b, 0);
frameScores.push(frameTotal);
document.getElementById('output').innerHTML +=
`<br>Omgång ${frame}: ${currentFrameRolls.join(', ')} poäng: ${frameTotal}`;
currentFrameRolls = [];
frame++;
}
return knocked;
}
Uppdatera klickhanteraren så att den anropar roll(frame) med aktuellt omgångsnummer. Nu ser du hur varje omgång skrivs ut med sina kast och poäng.
Utöka med spare och strike-bonus
Om du vill ta din javascript bowling example till nästa nivå, kan du implementera bonuspoäng för spare och strike. I en spare (10 käglor på två kast) får du bonus från nästa kast. I strike (10 på första kastet) får du bonus från nästa två kast. Det blir mer komplext, men här är en förenklad version:
let bonus = [0,0]; // lagrar bonus för spare/strike
function calculateFrameScore(frameIndex) {
if (frameIndex >= frameScores.length) return 0;
let score = frameScores[frameIndex];
// Om strike i detta frame
if (frameScores[frameIndex] === 10 && frames[frameIndex].length === 1) {
// Lägg till nästa två kast
score += (frameScores[frameIndex+1] || 0);
// Om nästa också är strike, lägg till ytterligare ett kast?
// Här förenklar vi
}
return score;
}
Det här kräver en del justeringar, men du har grundidén. Sök på nätet efter fullständiga implementationer av bowlingregler i JavaScript om du vill ha den perfekta lösningen.
Sammanfattning
Nu har du byggt en enkel bowlingsimulator i JavaScript. Du har lärt dig att hantera slumpmässiga händelser, uppdatera DOM:en och räkna poäng. Det här är bara början – du kan bygga vidare med snyggare gränssnitt, flera spelare, animationer eller till och med spara resultat i LocalStorage. Kom ihåg att ett praktiskt javascript bowling example som detta ger dig konkret erfarenhet som du kan applicera på andra projekt. Lycka till och fortsätt programmera!
FAQ
Hur kan jag lägga till grafik i bowlingsimulatorn?
För grafik kan du använda HTML5 Canvas för att rita käglor och bowlingbana. Rita cirklar för käglor och en rektangel för banan. Uppdatera canvasen efter varje kast genom att rita om baserat på antalet käglor som står kvar.
Fungerar koden för mobil?
Ja, grundkoden fungerar i alla webbläsare med JavaScript. För bättre mobilanpassning kan du lägga till CSS som gör knappar och text större på små skärmar. Använd media queries eller ramverk som Bootstrap.
Hur implementerar jag fullständiga bowlingregler med spare och strike?
Implementera genom att lagra alla kast i en array per omgång. När en omgång är klar, räkna poängen baserat på reglerna: om det är strike, lägg till nästa två kast; om spare, lägg till nästa kast. Hantera den tionde omgången separat eftersom den kan ha upp till tre kast.