Gioco del 15 online

In questo tutorial impareremo a creare il gioco del 15 online con JavaScript.

Cliccate sul pulsante gioca e cominciate a muovere i numeri, semplicemente passandoci sopra, fino a riordinare il tutto. Quando avrete finito vi comparirà il messaggio di vittoria.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15


Implementazione del gioco del 15 online con JavaScript

Realizzeremo questo gioco in maniera molto semplice utilizzando i fogli di stile e i metodi di JavaScript per gestire gli eventi.

Chiaramente ci sono tantissime implementazioni di questo gioco online con JavaScript, io ve ne propongo una.

Utilizzeremo il metodo addEventListener che attiveremo all’evento mouseover, cioè quando passeremo con il mouse sul tassello da spostare.

Codice HTML

Il codice HTML per lo sviluppo del gioco sarà semplicemente costitutito da un container per tutti i tasselli a cui diamo la classe tasselli e da ogni singolo tassello che inizialmente è nel suo posto.

Infine aggiungo il pulsante gioca che serve ad iniziare il gioco.

   <div class="tasselli">
      <div class="tassello" style="order: 0;"><span>1</span></div>
      <div class="tassello" style="order: 1;"><span>2</span></div>
      <div class="tassello" style="order: 2;"><span>3</span></div>
      <div class="tassello" style="order: 3;"><span>4</span></div>
      <div class="tassello" style="order: 4;"><span>5</span></div>
      <div class="tassello" style="order: 5;"><span>6</span></div>
      <div class="tassello" style="order: 6;"><span>7</span></div>
      <div class="tassello" style="order: 7;"><span>8</span></div>
      <div class="tassello" style="order: 8;"><span>9</span></div>
      <div class="tassello" style="order: 9;"><span>10</span></div>
      <div class="tassello" style="order: 10;"><span>11</span></div>
      <div class="tassello" style="order: 11;"><span>12</span></div>
      <div class="tassello" style="order: 12;"><span>13</span></div>
      <div class="tassello" style="order: 13;"><span>14</span></div>
      <div class="tassello" style="order: 14;"><span>15</span></div>
      <div class="ultimo" style="order: 15;"></div>
    </div>
    <p>
      <button id="gioca" onclick="gioca()">Gioca</button>
    </p>

Foglio di stile per il gioco del 15

Costruiamo il nostro foglio di stile costruendo i nostri tasselli larghi e alti 60 pixel. Diamo un bordo di 10 pixel di colore grigio chiaro per simulare meglio il gioco. L’ultimo tassello sarà 79 pixel di altezza e larghezza.

.tasselli {
  width: 320px;
  height: 315px;
  display: flex;
  flex-wrap: wrap;
}
.tasselli .tassello {
  border: 10px solid #ddd;
  width: 60px;
  height: 60px;
  color:#ffffff;
  background: #5cb1d6;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
.tasselli .ultimo {
  width: 79px;
  height: 79px;
}

Codice JavaScript

Costruiamo una funzione gioca che semplicemente crea dei numeri casuali senza ripetizioni. Scambiando gli elementi iniziali con quelli generati utilizzando la funzione scambia. Notate che lo scambio viene attivato sulla proprietà style del livello div.

Dopo attiviamo lo scambio della casella solo se la distanza dx e dy ta l’ultimo tassello e il tassello in considerazione sia 0 e 1 oppure 1 e 0.

Infine se ogni elemento dell’array è al suo posto allora abbiamo risolto il nostro gioco del 15 online.

<script>	
function gioca(){
    i = 0;
    while (i<15) {
        a = Math.random() * 15 >>> 0;
        b = Math.random() * 15 >>> 0;
        if (a==b) continue;
        scambia(ar[a], ar[b]);
        i++;
    }
};
function scambia({style: a}, {style: b}) {
	temp=a.order;
	a.order=b.order;
	b.order=temp;
}
function cambiaX({style}) {
    return parseInt(style.order)%4;
}
function cambiaY({style}) {
    return parseInt(style.order)/4 >>> 0;
} 
      
ultimo = document.querySelector(".ultimo");
ar= Array.from(document.querySelectorAll(".tassello"));

function move(tassello) {
    ux=cambiaX(ultimo);
    x=cambiaX(tassello);
    uy=cambiaY(ultimo);
    y=cambiaY(tassello);
    dx=Math.abs(ux-x),  dy=Math.abs(uy-y);
    if (dx==0 && dy==1 || dx==1 && dy==0) {
        scambia(ultimo, tassello);
        if (ar.every((p, i) => i == cambiaX(p) + cambiaY(p) * 4)) {
           alert("Hai vinto!");
        }
    }
}
ar.forEach(tassello => {
    tassello.addEventListener("mouseover", ev => move(tassello));
});
</script>

Alcuni link utili

Indice tutorial linguaggio JavaScript

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript

Autore dell'articolo: cristina

Avatar per Coding Creativo

2 commenti su “Gioco del 15 online

    Avatar per Nunziata

    Nunziata

    (18 Giugno 2019 - 18:14)

    Complimenti il gioco è divertente e funziona benissimo.

      Avatar per cristina

      cristina

      (18 Giugno 2019 - 22:08)

      Grazie 🙂

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *