Come creare un gioco Snake usando HTML, CSS e JavaScript
Un gioco del serpente è un classico esercizio di programmazione che puoi utilizzare per migliorare le tue capacità di programmazione e risoluzione dei problemi. Puoi creare il gioco in un browser Web utilizzando HTML, CSS e JavaScript.
Nel gioco, controlli un serpente che si muove su una tavola. Il serpente cresce di dimensioni man mano che raccogli il cibo. Il gioco finirà se ti scontrerai con la tua stessa coda o con uno qualsiasi dei muri.
Come creare l’interfaccia utente per la tela
Usa HTML e CSS per aggiungere la tela su cui il serpente può muoversi. Ci sono molti altri progetti HTML e CSS su cui puoi esercitarti, se hai bisogno di rivedere i concetti di base.
Puoi fare riferimento al repository GitHub di questo progetto per il codice sorgente completo.
- Crea un nuovo file chiamato “index.html”.
- Apri il file utilizzando qualsiasi editor di testo come Visual Code o Atom. Aggiungi la struttura di base del codice HTML:
<!doctype html>
<html lang="en-US">
<head>
<title>Snake Game</title>
</head>
<body>
</body>
</html> - All’interno dell’etichetta del corpo, aggiungi una tela per rappresentare il tabellone di gioco per il serpente.
<h2>Snake Game</h2>
<div id="game">
<canvas id="snake"></canvas>
</div> - Nella stessa cartella del tuo file HTML, crea un nuovo file chiamato “styles.css”.
- All’interno, aggiungi alcuni CSS per l’intera pagina web. Puoi anche modellare il tuo sito web utilizzando altri suggerimenti e trucchi CSS essenziali.
#game {
width:400px;
height:400px;
margin:0 auto;
background-color:#eee;
}
h2 {
text-align:center;
font-family:Arial;
font-size:36px;
} - All’interno del tuo file HTML, aggiungi un collegamento al CSS nel tag head:
<link rel="stylesheet" type="text/css" href="styles.css"> - Per visualizzare la tela, apri il file “index.html” in un browser web.
Come disegnare il serpente
Nell’esempio seguente, la linea nera rappresenta il serpente:
Più quadrati o “segmenti” compongono il serpente. Man mano che il serpente cresce, aumenta anche il numero di quadrati. All’inizio del gioco, la lunghezza del serpente è di un pezzo.
- All’interno del tuo file HTML, collega a un nuovo file JavaScript nella parte inferiore del tag body:
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - Crea script.js e inizia ottenendo l’elemento DOM del canvas:
var canvas = document.getElementById("snake"); - Imposta il contesto per l’elemento HTML canvas. In questo caso, vuoi che il gioco esegua il rendering di una tela 2D. Ciò ti consentirà di disegnare più forme o immagini sull’elemento HTML.
var canvas2d = canvas.getContext("2d"); - Imposta altre variabili di gioco, ad esempio se il gioco è terminato e l’altezza e la larghezza della tela:
var gameEnded = false;
canvas.width = 400;
canvas.height = 400; - Dichiarare una variabile chiamata “SnakeSegments”. Questo conterrà il numero di “quadrati” che occuperà il serpente. Puoi anche creare una variabile per tenere traccia della lunghezza del serpente:
var snakeSegments = [];
var snakeLength = 1; - Dichiara la posizione iniziale X e Y del serpente:
var snakeX = 0;
var snakeY = 0; - Crea una nuova funzione. All’interno, aggiungi il pezzo di serpente iniziale all’array snakeSegments, con le sue coordinate X e Y iniziali:
function moveSnake() {
snakeSegments.unshift({ x: snakeX, y: snakeY });
} - Crea una nuova funzione. All’interno, imposta lo stile di riempimento su nero. Questo è il colore che userà per disegnare il serpente:
function drawSnake() {
canvas2d.fillStyle = "black";
} - Per ogni segmento che compone le dimensioni del serpente, disegna un quadrato con una larghezza e un’altezza di 10 pixel:
for (var i = 0; i < snakeSegments.length; i++) {
canvas2d.fillRect(snakeSegments[i].x, snakeSegments[i].y, 10, 10);
} - Crea un ciclo di gioco che verrà eseguito ogni 100 millisecondi. Ciò farà sì che il gioco attiri costantemente il serpente nella sua nuova posizione, il che sarà molto importante quando il serpente inizierà a muoversi:
function gameLoop() {
moveSnake();
drawSnake(); - Apri il file “index.html” in un browser web per vedere il serpente nella sua dimensione più piccola nella sua posizione iniziale.
Come far muovere il serpente
Aggiungi un po’ di logica per muovere il serpente in direzioni diverse, a seconda del pulsante che il giocatore preme sulla tastiera.
- Nella parte superiore del file, dichiara la direzione iniziale del serpente:
var directionX = 10;
var directionY = 0; - Aggiungi un gestore di eventi che si attiva quando il giocatore preme un tasto:
document.onkeydown = function(event) {
}; - All’interno del gestore dell’evento, cambia la direzione in cui si muove il serpente, in base al tasto premuto:
switch (event.keyCode) {
case 37: // Left arrow
directionX = -10;
directionY = 0;
break;
case 38: // Up arrow
directionX = 0;
directionY = -10;
break;
case 39: // Right arrow
directionX = 10;
directionY = 0;
break;
case 40: // Down arrow
directionX = 0;
directionY = 10;
break;
} - Nella funzione moveSnake(), usa la direzione per aggiornare le coordinate X e Y del serpente. Ad esempio, se il serpente deve spostarsi a sinistra, la direzione X sarà “-10”. Questo aggiornerà la coordinata X per rimuovere 10 pixel per ogni fotogramma del gioco:
function moveSnake() {
snakeSegments.unshift({ x: snakeX, y: snakeY });
snakeX += directionX;
snakeY += directionY;
} - Il gioco attualmente non rimuove i segmenti precedenti mentre il serpente è in movimento. Questo renderà il serpente simile a questo:
Per risolvere questo problema, cancella la tela prima di disegnare il nuovo serpente in ogni fotogramma, all’inizio della funzione drawSnake(): canvas2d.clearRect(0, 0, canvas.width, canvas.height);- Dovrai anche rimuovere l’ultimo elemento dell’array snakeSegments, all’interno della funzione moveSnake():
while (snakeSegments.length > snakeLength) {
snakeSegments.pop();
} - Apri il file “index.html” e premi i tasti sinistra, destra, su o giù per spostare il serpente.
Come aggiungere cibo sulla tela
Aggiungi punti al gioco da tavolo per rappresentare i pezzi di cibo per il serpente.
- Dichiara una nuova variabile nella parte superiore del file per memorizzare una serie di pezzi di cibo:
var dots = []; - Crea una nuova funzione. All’interno, genera coordinate X e Y casuali per i punti. Puoi anche assicurarti che sulla lavagna siano presenti solo 10 punti in qualsiasi momento:
function spawnDots() {
if(dots.length < 10) {
var dotX = Math.floor(Math.random() * canvas.width);
var dotY = Math.floor(Math.random() * canvas.height);
dots.push({ x: dotX, y: dotY });
}
} - Dopo aver generato le coordinate X e Y per il cibo, disegnale sulla tela usando un colore rosso:
for (var i = 0; i < dots.length; i++) {
canvas2d.fillStyle = "red";
canvas2d.fillRect(dots[i].x, dots[i].y, 10, 10);
} - Chiama la nuova funzione spawnDots() all’interno del ciclo di gioco:
function gameLoop() {
moveSnake();
drawSnake();
spawnDots();
if(!gameEnded) {
setTimeout(gameLoop, 100);
}
} - Apri il file “index.html” per visualizzare il cibo sul tabellone.
Come far crescere il serpente
Puoi far crescere il serpente aumentandone la lunghezza quando si scontra con un punto di cibo.
- Crea una nuova funzione. Al suo interno, passa attraverso ogni elemento nell’array di punti:
function checkCollision() {
for (var i = 0; i < dots.length; i++) {
}
} - Se la posizione del serpente corrisponde alle coordinate di qualsiasi punto, incrementa la lunghezza del serpente ed elimina il punto:
if (snakeX < dots[i].x + 10 &&
snakeX + 10 > dots[i].x &&
snakeY < dots[i].y + 10 &&
snakeY + 10 > dots[i].y) {
snakeLength++;
dots.splice(i, 1);
} - Chiama la nuova funzione checkCollision() nel ciclo di gioco:
function gameLoop() {
moveSnake();
drawSnake();
spawnDots();
checkCollision();
if(!gameEnded) {
setTimeout(gameLoop, 100);
}
} - Apri il file “index.html” in un browser web. Muovi il serpente usando la tastiera per raccogliere i pezzi di cibo e far crescere il serpente.
Come terminare il gioco
Per terminare il gioco, controlla se il serpente si è scontrato con la propria coda o con uno qualsiasi dei muri.
- Crea una nuova funzione per stampare un avviso di “Game Over”.
function gameOver() {
setTimeout(function() {
alert("Game over!");
}, 500);
gameEnded = true
} - All’interno della funzione checkCollision(), controlla se il serpente ha colpito una delle pareti della tela. In tal caso, chiama la funzione gameOver():
if (snakeX < -10 ||
snakeY < -10 ||
snakeX > canvas.width+10 ||
snakeY > canvas.height+10) {
gameOver();
} - Per verificare se la testa del serpente si è scontrata con uno qualsiasi dei segmenti della coda, passa attraverso ogni pezzo del serpente:
for (var i = 1; i < snakeSegments.length; i++) {
} - All’interno del for-loop, controlla se la posizione della testa del serpente corrisponde a uno qualsiasi dei segmenti della coda. Se è così, significa che la testa si è scontrata con una coda, quindi termina il gioco:
if (snakeX === snakeSegments[i].x && snakeY === snakeSegments[i].y) {
gameOver();
} - Apri il file “index.html” in un browser web. Prova a colpire un muro o la tua stessa coda per terminare il gioco.
Imparare i concetti di JavaScript attraverso i giochi
La creazione di giochi può essere un ottimo modo per rendere più piacevole la tua esperienza di apprendimento. Continua a creare altri giochi per continuare a migliorare la tua conoscenza di JavaScript.
Lascia un commento