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. Ce ne sono molti altri Progetti HTML e CSS puoi esercitarti, se hai bisogno di rivedere i concetti di base.

Puoi fare riferimento a questo progetto Deposito GitHub per il codice sorgente completo.

1. Crea un nuovo file chiamato "index.html".
2. Apri il file utilizzando qualsiasi editor di testo come Codice visivo o Atom. Aggiungi la struttura di base del codice HTML:

   html>
   <htmllang="en-US">
   <Testa>
   <titolo>Gioco del serpentetitolo>
   Testa>
   <corpo>
   corpo>
   html>

3. All'interno dell'etichetta del corpo, aggiungi una tela per rappresentare il tabellone di gioco per il serpente.

   <h2>Gioco del serpenteh2>
   <divid="gioco">
   <telaid="serpente">tela>
   div>

4. Nella stessa cartella del tuo file HTML, crea un nuovo file chiamato "styles.css".
5. All'interno, aggiungi alcuni CSS per l'intera pagina web. Puoi anche modellare il tuo sito web usando altro suggerimenti e trucchi CSS essenziali.

   #gioco {
   larghezza:400 pixel;
   altezza:400 pixel;
   margine:0auto;
   colore di sfondo:#eee;
   }
   h2 {
   allineamento del testo:centro;
   famiglia di font: Ariale;
   dimensione del font:36px;
   } 
   

6. All'interno del tuo file HTML, aggiungi un collegamento al CSS nel tag head:

   <collegamentorel="foglio di stile"tipo="testo/css"href="stili.css">

7. 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.

1. All'interno del tuo file HTML, collega a un nuovo file JavaScript nella parte inferiore del tag body:

   <corpo>
    Il tuo codice qui 
   <copionesrc="script.js">copione>
   corpo>

2. Crea script.js e inizia ottenendo l'elemento DOM del canvas:

   var tela = documento.getElementById("serpente");

3. 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");

4. Imposta altre variabili di gioco, ad esempio se il gioco è terminato e l'altezza e la larghezza della tela:

   var giocoFine = falso;
   canvas.width = 400;
   canvas.altezza = 400;

5. Dichiara 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 snakeSegmenti = [];
   var lunghezza del serpente = 1;
   

6. Dichiara la posizione iniziale X e Y del serpente:

   var serpenteX = 0;
   var serpenteY = 0;

7. Crea una nuova funzione. All'interno, aggiungi il pezzo di serpente iniziale all'array snakeSegments, con le sue coordinate X e Y iniziali:

   funzionemoveSnake() {
    snakeSegments.unshift({ X: serpenteX, si: serpenteY });
   }

8. Crea una nuova funzione. All'interno, imposta lo stile di riempimento su nero. Questo è il colore che userà per disegnare il serpente:

   funzionedrawSnake() {
    canvas2d.fillStyle = "nero"; 
   }

9. Per ogni segmento che compone le dimensioni del serpente, disegna un quadrato con una larghezza e un'altezza di 10 pixel:

   per (var io = 0; i < snakeSegments.length; i++) {
    canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 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:

    funzionegameLoop() {
     mossaSerpente();
     drawSnake();

11. 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.

1. Nella parte superiore del file, dichiara la direzione iniziale del serpente:

   var direzioneX = 10;
   var direzione Y = 0;
   

2. Aggiungi un gestore di eventi che si attiva quando il giocatore preme un tasto:

   documento.onkeydown = funzione(evento) {
   };

3. All'interno del gestore dell'evento, cambia la direzione in cui si muove il serpente, in base al tasto premuto:

   interruttore (event.keyCode) {
   caso37: // Freccia sinistra
    direzioneX = -10;
    direzione Y = 0;
   rottura;
   caso38: // Freccia su
    direzioneX = 0;
    direzione Y = -10;
   rottura;
   caso39: // Freccia destra
    direzioneX = 10;
    direzione Y = 0;
   rottura;
   caso40: // Freccia in giù
    direzioneX = 0;
    direzione Y = 10;
   rottura;
   }

4. 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:

   funzionemoveSnake() {
    snakeSegments.unshift({ X: serpenteX, si: serpenteY });
    serpenteX += direzioneX;
    serpenteY += direzioneY;
   }

5. Il gioco attualmente non rimuove i segmenti precedenti mentre il serpente è in movimento. Questo renderà il serpente simile a questo:
6. 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, tela.larghezza, tela.altezza);

7. Dovrai anche rimuovere l'ultimo elemento dell'array snakeSegments, all'interno della funzione moveSnake():

   Mentre (snakeSegments.length > snakeLength) {
    snakeSegmenti.pop();
   }

8. 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.

1. Dichiara una nuova variabile nella parte superiore del file per memorizzare una serie di pezzi di cibo:

   var punti = [];

2. 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:

   funzionespawnDots() {
   Se(punti.lunghezza < 10) {
   var puntoX = Matematica.pavimento(Matematica.random() * canvas.width);
   var punto Y = Matematica.pavimento(Matematica.random() * tela.altezza);
    punti.push({ X: puntoX, si: puntoY });
    }
   }

3. Dopo aver generato le coordinate X e Y per il cibo, disegnale sulla tela usando un colore rosso:

   per (var io = 0; i < punti.lunghezza; i++) {
    canvas2d.fillStyle = "rosso";
    canvas2d.fillRect (punti[i].x, punti[i].y, 10, 10);
   }

4. Chiama la nuova funzione spawnDots() all'interno del ciclo di gioco:

   funzionegameLoop() {
    mossaSerpente();
    drawSnake();
    spawnDots();
   Se(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. 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.

1. Crea una nuova funzione. Al suo interno, passa attraverso ogni elemento nell'array di punti:

   funzionecheckCollision() {
   per (var io = 0; i < punti.lunghezza; i++) {
   
    }
   }

2. Se la posizione del serpente corrisponde alle coordinate di qualsiasi punto, incrementa la lunghezza del serpente ed elimina il punto:

   Se (serpenteX < punti[i].x + 10 && 
    serpenteX+ 10 > punti[i].x && 
    serpenteY < punti[i].y + 10 && 
    serpente Y + 10 > punti[i].y) {
    serpenteLunghezza++;
    punti.giunzione (i, 1);
   }

3. Chiama la nuova funzione checkCollision() nel ciclo di gioco:

   funzionegameLoop() {
    mossaSerpente();
    drawSnake();
    spawnDots();
    checkCollision();
   Se(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. 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.

1. Crea una nuova funzione per stampare un avviso "Game Over".

   funzionegame Over() {
    setTimeout(funzione() {
    mettere in guardia("Game Over!");
    }, 500); 
    giocoFine = VERO
   }

2. All'interno della funzione checkCollision(), controlla se il serpente ha colpito una delle pareti della tela. In tal caso, chiama la funzione gameOver():

   Se (serpenteX < -10 || 
    serpente Y < -10 || 
    snakeX > canvas.width+10 ||
    serpenteY > tela.altezza+10) {
    game Over();
   }

3. Per verificare se la testa del serpente si è scontrata con uno qualsiasi dei segmenti della coda, passa attraverso ogni pezzo del serpente:

   per (var io = 1; i < snakeSegments.length; i++) {
   }

4. 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:

   Se (serpenteX serpenteSegmenti[i].x && serpenteY serpenteSegmenti[i].y) {
    game Over();
   }

5. 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.