Genskab dette gammeldags spil i din browser, og lær om JavaScript-spiludvikler undervejs.
Et slangespil er en klassisk programmeringsøvelse, du kan bruge til at forbedre dine programmerings- og problemløsningsevner. Du kan oprette spillet i en webbrowser ved hjælp af HTML, CSS og JavaScript.
I spillet styrer du en slange, der bevæger sig rundt på et bræt. Slangen vokser i størrelse, efterhånden som du samler mad. Spillet slutter, hvis du kolliderer med din egen hale eller en af væggene.
Sådan opretter du brugergrænsefladen til lærredet
Brug HTML og CSS til at tilføje lærredet, som slangen kan bevæge sig rundt på. Der er mange andre HTML og CSS projekter du kan øve dig på, hvis du har brug for at revidere nogle grundlæggende begreber.
Du kan henvise til dette projekts GitHub-depot for den fulde kildekode.
- Opret en ny fil kaldet "index.html".
- Åbn filen ved hjælp af en hvilken som helst teksteditor som f.eks Visuel kode eller atom. Tilføj den grundlæggende HTML-kodestruktur:
html>
<htmllang="da-US">
<hoved>
<titel>Slange spiltitel>
hoved>
<legeme>legeme>
html> - Inden i kropsmærket skal du tilføje et lærred, der repræsenterer spillepladen til slangen.
<h2>Slange spilh2>
<divid="spil">
<lærredid="slange">lærred>
div> - I samme mappe som din HTML-fil skal du oprette en ny fil kaldet "styles.css".
- Indeni skal du tilføje noget CSS til den overordnede webside. Du kan også style dit websted ved hjælp af andre vigtige CSS tips og tricks.
#spil {
bredde:400px;
højde:400px;
margen:0auto;
baggrundsfarve:#eee;
}
h2 {
tekstjustering:centrum;
skrifttype-familie: Arial;
skriftstørrelse:36px;
} - Tilføj et link til CSS'en i head-tagget i din HTML-fil:
<linkrel="stylesheet"type="tekst/css"href="styles.css">
- For at se lærredet skal du åbne din "index.html" fil i en webbrowser.
Hvordan man tegner slangen
I eksemplet nedenfor repræsenterer den sorte streg slangen:
Flere firkanter eller "segmenter" udgør slangen. Efterhånden som slangen vokser, stiger antallet af firkanter også. I begyndelsen af spillet er slangens længde et stykke.
- Link til en ny JavaScript-fil i bunden af body-tagget inde i din HTML-fil:
<legeme>
Din kode her
<manuskriptsrc="script.js">manuskript>
legeme> - Opret script.js og start med at hente DOM-elementet på lærredet:
var lærred = dokument.getElementById("slange");
- Indstil konteksten for canvas HTML-elementet. I dette tilfælde vil du have spillet til at gengive et 2d-lærred. Dette giver dig mulighed for at tegne flere former eller billeder på HTML-elementet.
var canvas2d = canvas.getContext("2d");
- Indstil andre variabler i spillet, såsom om spillet er afsluttet, og højden og bredden af lærredet:
var spil afsluttet = falsk;
lærred.bredde = 400;
lærred.højde = 400; - Deklarer en variabel kaldet "snakeSegments". Dette vil holde antallet af "firkanter", som slangen vil optage. Du kan også oprette en variabel for at holde styr på slangens længde:
var slangeSegments = [];
var slangelængde = 1; - Erklær slangens første X- og Y-position:
var slangeX = 0;
var slangeY = 0; - Opret en ny funktion. Indeni skal du tilføje startslangestykket til slangeSegments-arrayet med dets startende X- og Y-koordinater:
fungereflytte Snake() {
snakeSegments.unshift({ x: snakeX, y: slangeY });
} - Opret en ny funktion. Indstil fyldstilen til sort indeni. Dette er farven, den vil bruge til at tegne slangen:
fungeretegneSnake() {
canvas2d.fillStyle = "sort";
} - For hvert segment, der udgør slangens størrelse, skal du tegne en firkant med en bredde og højde på 10 pixels:
til (var i = 0; i < snakeSegments.length; i++) {
canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
} - Opret en spilløkke, der kører hvert 100 millisekund. Dette vil få spillet til konstant at trække slangen i sin nye position, hvilket vil være meget vigtigt, når slangen begynder at bevæge sig:
fungeregameLoop() {
moveSnake();
drawSnake(); - Åbn filen "index.html" i en webbrowser for at se slangen i sin mindste størrelse i sin startposition.
Sådan får du slangen til at bevæge sig
Tilføj noget logik for at flytte slangen i forskellige retninger, afhængigt af hvilken knap spilleren trykker på på tastaturet.
- Øverst i filen skal du erklære slangens indledende retning:
var retning X = 10;
var retning Y = 0; - Tilføj en hændelseshandler, der udløses, når spilleren trykker på en tast:
dokument.onkeydown = fungere(begivenhed) {
};
- Inde i hændelseshandleren skal du ændre retningen, som slangen bevæger sig, baseret på den trykket tast:
kontakt (event.keyCode) {
sag37: // Venstre pil
retning X = -10;
retning Y = 0;
pause;
sag38: // Pil op
retning X = 0;
retning Y = -10;
pause;
sag39: // Højre pil
retning X = 10;
retning Y = 0;
pause;
sag40: // Pil ned
retning X = 0;
retning Y = 10;
pause;
} - I funktionen moveSnake() skal du bruge retningen til at opdatere slangens X- og Y-koordinater. For eksempel, hvis slangen skal bevæge sig til venstre, vil X-retningen være "-10". Dette vil opdatere X-koordinaten for at fjerne 10 pixels for hver frame af spillet:
fungereflytte Snake() {
snakeSegments.unshift({ x: snakeX, y: slangeY });
snakeX += retningX;
slangeY += retningY;
} - Spillet fjerner i øjeblikket ikke tidligere segmenter, mens slangen bevæger sig. Dette vil få slangen til at se sådan ud:
- For at løse dette skal du rydde lærredet, før du tegner den nye slange i hver ramme, i begyndelsen af drawSnake()-funktionen:
canvas2d.clearRect(0, 0, lærred.bredde, lærred.højde);
- Du skal også fjerne det sidste element i snakeSegments-arrayet inde i moveSnake()-funktionen:
mens (snakeSegments.length > snakeLength) {
snakeSegments.pop();
} - Åbn filen "index.html" og tryk på venstre, højre, op eller ned tasterne for at flytte slangen.
Sådan tilføjer du mad på lærredet
Tilføj prikker til brætspillet for at repræsentere madstykker til slangen.
- Erklær en ny variabel øverst i filen for at gemme en række madstykker:
var prikker = [];
- Opret en ny funktion. Indeni skal du generere tilfældige X- og Y-koordinater for prikkerne. Du kan også sikre dig, at der kun er 10 prikker på tavlen til enhver tid:
fungerespawnDots() {
hvis(dots.length < 10) {
var dotX = Matematik.etage(Matematik.random() * canvas.width);
var dotY = Matematik.etage(Matematik.random() * lærred.højde);
dots.push({ x: dotX, y: dotY });
}
} - Efter at have genereret X- og Y-koordinaterne for maden, tegner du dem på lærredet med en rød farve:
til (var i = 0; i < dots.length; i++) {
canvas2d.fillStyle = "rød";
canvas2d.fillRect (dots[i].x, dots[i].y, 10, 10);
} - Kald den nye spawnDots() funktion inde i spilløkken:
fungeregameLoop() {
moveSnake();
drawSnake();
spawnDots();
hvis(!gameEnded) {
setTimeout (gameLoop, 100);
}
} - Åbn filen "index.html" for at se maden på spillepladen.
Sådan får du slangen til at vokse
Du kan få slangen til at vokse ved at øge dens længde, når den kolliderer med en madprik.
- Opret en ny funktion. Inde i det, løkke gennem hvert element i dots-arrayet:
fungerecheckCollision() {
til (var i = 0; i < dots.length; i++) {
}
} - Hvis slangens position matcher koordinaterne for nogen prikker, skal du øge slangens længde og slette prikken:
hvis (snakeX < prikker[i].x + 10 &&
snakeX + 10 > prikker[i].x &&
snakeY < prikker[i].y + 10 &&
snakeY + 10 > prikker[i].y) {
snakeLength++;
dots.splice (i, 1);
} - Kald den nye checkCollision() funktion i spilløkken:
fungeregameLoop() {
moveSnake();
drawSnake();
spawnDots();
checkCollision();
hvis(!gameEnded) {
setTimeout (gameLoop, 100);
}
} - Åbn filen "index.html" i en webbrowser. Flyt slangen ved hjælp af tastaturet for at samle madstykkerne og dyrke slangen.
Sådan afslutter du spillet
For at afslutte spillet skal du kontrollere, om slangen kolliderede med sin egen hale eller nogen af væggene.
- Opret en ny funktion for at udskrive en "Game Over"-advarsel.
fungeregameOver() {
setTimeout(fungere() {
alert("Spillet er slut!");
}, 500);
spil afsluttet = rigtigt
} - Inde i funktionen checkCollision() skal du kontrollere, om slangen ramte nogen af lærredets vægge. Hvis ja, kald gameOver()-funktionen:
hvis (slangeX < -10 ||
slangeY < -10 ||
snakeX > canvas.width+10 ||
snakeY > canvas.height+10) {
gameOver();
} - For at kontrollere, om slangens hoved kolliderede med nogen af halesegmenterne, skal du sløjfe gennem hvert stykke af slangen:
til (var i = 1; i < snakeSegments.length; i++) {
}
- Inde i for-løkken skal du kontrollere, om placeringen af slangens hoved matcher nogen af halesegmenterne. Hvis ja, betyder det, at hovedet kolliderede med en hale, så afslut spillet:
hvis (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
gameOver();
} - Åbn filen "index.html" i en webbrowser. Prøv at ramme en mur eller din egen hale for at afslutte spillet.
Lær JavaScript-koncepter gennem spil
At skabe spil kan være en fantastisk måde at gøre din læringsoplevelse mere behagelig på. Bliv ved med at lave flere spil for at fortsætte med at forbedre din JavaScript-viden.