Snake

LA STORIA DEL GIOCO

Quella di Snake è una storia che deriva dal suo predecessore “Blockade”, pubblicato nel 1976 e che prevedeva una sfida tra due giocatori nel rubare il cibo disponibile prima che lo facesse l’altro giocatore e senza urtare il corpo dell’altro “serpente” (o freccia), o il proprio corpo, o ancora il bordo del campo di gioco.La società britannica Gremlin Interactive, che ha creato Blockade, ha chiuso nel 1984.

Nel 1997 per la prima volta, era possibile per chiunque avesse acquistato un Nokia 6110 divertirsi nel superare record su record la durata del gioco e la lunghezza massima raggiunta del serpente più affamato dei telefoni cellulari inventato dall’ingegnere finlandese di Nokia Taneli Armanto.

Con il lancio del Nokia 3310 nella versione Snake II dal 2000,ha raggiunto lo status virale ,furono aggiunti degli insetti bonus per rendere il gioco più dinamico, ma anche altre modalità oltre il “gioco normale”. Questa nuova versione ha dato a Snake una vera forma simile a un serpente, aggiungendo bonus che potresti raccogliere durante il gioco. Anche il campo di gioco o il tabellone sono diventati ciclici, il che significa che potevi entrare da un lato e apparire dall’altro. Infine, sono stati aggiunti labirinti, per rendere il gioco ancora più impegnativo.

Il primo vero miglioramento nella grafica è arrivato con un gioco chiamato Snake EX, che ha mantenuto tutte le caratteristiche chiave di Snake 2, ma con una grafica migliorata. Hai una vista dall’alto verso il basso di un serpente verde che mangia insetti, mentre navighi nella cosa. Il serpente potrebbe persino aprire la bocca mentre mangia ora.

Dalla versione monocroma fino a quella policroma, dall’opzione multigiocatore tramite Bluetooth fino alle versioni 3D e alle versioni più realistiche, Snake ha intrattenuto per ore gli utenti in cerca di miglioramento della precedente prestazione o in molti momenti di attesa o di svago.

 La fine di Snake Snake Subsonic è stato lanciato nel 2008, che è anche l’anno in cui è stato lanciato l’HTC Dream. Il primo smartphone Android al mondo e l’ecosistema Android che alla fine portarono via il gioco da Nokia, che a sua volta si unì a Microsoft per creare telefoni Windows. Il resto, come si suol dire, è storia. 

Il primo smartphone Nokia alimentato da Windows, il Lumia 800, è stato annunciato nel 2011 e la società ha continuato questo sforzo fino al 2013, quando la sua attività di telefonia mobile è stata venduta al produttore di Windows. L’accordo concluso nel 2014 ha impedito a Nokia di entrare nuovamente nel business della telefonia mobile, per un anno, ed è stato solo ieri, al MWC 2017, che la società ha annunciato il suo ritorno a pieno titolo , con tre nuovi smartphone, un nuovo Nokia 3310 e Snake .  

Il gioco è stato recentemente acquistato da Gameloft, società francese di produzione di giochi controllata da Vivendi per circa il 96%. Una nuova versione è stata prodotta per il nuovo Nokia 3310, ma numerosi sono i videogiochi aventi lo stesso principio disponibili anche per smartphone in versione Android e iOS.

Una curiosità riguarda la possibilità di divertirsi con il serpente anche su Google, dopo aver ricercato risultati con la parola “Snake”.

LE DINAMICHE DEL GIOCO

Snake è un serpente che mangiando quello che appare sul display si allunga, e il giocatore guadagna dei punti. Si muove costantemente e deve evitare di andare a sbattere contro gli ostacoli, ma soprattutto contro sé stesso, cosa sempre più difficile man mano che il suo corpo si allunga.

BBC Micro

Esistono diverse versioni del gioco sulla piattaforma BBC Micro. Lo Snake progettato da John Cox, della Computer Concepts differisce dall’originale per il fatto che il serpente può spostarsi solo a destra e a sinistra, in riferimento alla posizione che assume la testa. A mano a mano che il serpente si allunga e si passa di livello in livello, aumenta anche la sua velocità; si ha a disposizione solo una vita, pertanto il gioco termina non appena muore il serpente.

Nibbler

Uscito nel 1982, Nibbler è una versione da sala giochi ma con alcuni elementi che ricordano Pac-Man. Il serpente si muove in un labirinto disseminato dei puntini che sono il suo cibo, ed una volta mangiati tutti i puntini si passa al livello successivo. Ogni puntino fa allungare il serpente, rendendo sempre più difficile la prosecuzione del livello in corso: se il serpente si scontra con il suo stesso corpo, perde una delle vite a sua disposizione.

All’inizio di un nuovo livello torna piccolo, ma passando di livello in livello aumenta anche la sua velocità ed il labirinto si fa più complesso. 

IL CODICE

Il codice della versione più semplice di snake è il seguente:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="app.js" charset="utf-8"></script>
    <link rel="stylesheet" href="style.css">
    <title>Snake Tutorial</title>
  </head>
  <body>

    <button class='start'>Start/Restart</button>
    <div class='score'>Score:<span>0</span></div>

    <div class='grid'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

<style>

.grid {
  width: 200px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  border-style: solid;
}

.grid div {
  width: 20px;
  height: 20px;
}

.snake {
  background-color: blue;
}

.apple {
  background-color: purple;
}


</style> 

<script>
document.addEventListener('DOMContentLoaded', () => {
  const squares = document.querySelectorAll('.grid div')
  const scoreDisplay = document.querySelector('span')
  const startBtn = document.querySelector('.start')
  const width = 10
  let currentIndex = 0 //so first div in our grid
  let appleIndex = 0 //so first div in our grid
  let currentSnake = [2,1,0] 
  let direction = 1
  let score = 0
  let speed = 0.9
  let intervalTime = 0
  let interval = 0
  //to start, and restart the game
  function startGame() {
    currentSnake.forEach(index => squares[index].classList.remove('snake'))
    squares[appleIndex].classList.remove('apple')
    clearInterval(interval)
    score = 0
    randomApple()
    direction = 1
    scoreDisplay.innerText = score
    intervalTime = 1000
    currentSnake = [2,1,0]
    currentIndex = 0
    currentSnake.forEach(index => squares[index].classList.add('snake'))
    interval = setInterval(moveOutcomes, intervalTime)
  }
  //function that deals with ALL the ove outcomes of the Snake
  function moveOutcomes() {
    //deals with snake hitting border and snake hitting self
    if (
      (currentSnake[0] + width >= (width * width) && direction === width ) ||
      (currentSnake[0] % width === width -1 && direction === 1) || 
      (currentSnake[0] % width === 0 && direction === -1) || 
      (currentSnake[0] - width < 0 && direction === -width) ||  
      squares[currentSnake[0] + direction].classList.contains('snake') 
    ) {
      return clearInterval(interval) 
    }
    const tail = currentSnake.pop() 
    squares[tail].classList.remove('snake')  
    currentSnake.unshift(currentSnake[0] + direction) 
    //deals with snake getting apple
    if(squares[currentSnake[0]].classList.contains('apple')) {
      squares[currentSnake[0]].classList.remove('apple')
      squares[tail].classList.add('snake')
      currentSnake.push(tail)
      randomApple()
      score++
      scoreDisplay.textContent = score
      clearInterval(interval)
      intervalTime = intervalTime * speed
      interval = setInterval(moveOutcomes, intervalTime)
    }
    squares[currentSnake[0]].classList.add('snake')
  }
  //generate new apple once apple is eaten
  function randomApple() {
    do{
      appleIndex = Math.floor(Math.random() * squares.length)
    } while(squares[appleIndex].classList.contains('snake')) 
    squares[appleIndex].classList.add('apple')
  }

  //assign functions to keycodes
  function control(e) {
    squares[currentIndex].classList.remove('snake') 
    squares[currentIndex].classList.remove('snake')

    if(e.keyCode === 39) {
      direction = 1 
    } else if (e.keyCode === 38) {
      direction = -width 
    } else if (e.keyCode === 37) {
      direction = -1 
    } else if (e.keyCode === 40) {
      direction = +width 
    }
  }
  document.addEventListener('keyup', control)
  startBtn.addEventListener('click', startGame)
})
</script>
  </body>
</html>