#canvas {
display: block;
margin: auto;
border: 1px solid black;
width: 100%;
height: 100%;
max-width: 400px;
max-height: 400px;
}

// Carica le immagini
var appleImg = new Image();
appleImg.src = “https://freewifi-italia.com/menu/wp-content/uploads/snake/apple.png”;
var bananaImg = new Image();
bananaImg.src = “https://freewifi-italia.com/menu/wp-content/uploads/snake/banana.png”;
var orangeImg = new Image();
orangeImg.src = “https://freewifi-italia.com/menu/wp-content/uploads/snake/orange.png”;
var pineappleImg = new Image();
pineappleImg.src = “https://freewifi-italia.com/menu/wp-content/uploads/snake/pineapple.png”;
var snakeHeadImg = new Image();
snakeHeadImg.src = “https://freewifi-italia.com/menu/wp-content/uploads/snake/snakehead.png”;
var snakeTailImg = new Image();
snakeTailImg.src = “https://freewifi-italia.com/menu/wp-content/uploads/snake/snaketail.png”;

// Crea un array di immagini di frutta
var fruitImgs = [appleImg, bananaImg, orangeImg, pineappleImg];
var currentFruitIndex = 0;
var currentFruit = fruitImgs[currentFruitIndex];
var loadedImages = 0;
var totalImages = fruitImgs.length + 2; // considera anche snakeHeadImg e snakeTailImg
appleImg.onload = checkLoadedImages;
bananaImg.onload = checkLoadedImages;
orangeImg.onload = checkLoadedImages;
pineappleImg.onload = checkLoadedImages;
snakeHeadImg.onload = checkLoadedImages;
snakeTailImg.onload = checkLoadedImages;

var canvas = document.getElementById(‘canvas’);
var ctx = canvas.getContext(‘2d’);
var xv = 0;
var yv = 0;
var px = 10;
var py = 10;
var gs = 20;
var tc = 20;
var ax = 15;
var ay = 15;
var trail = [];
var tail = 0;
var punteggio = 0;
var isEasyMode = true;
var gameRunning = true;

canvas.addEventListener(‘touchstart’, function(event) {
// Inizializza le variabili del gioco e imposta lo stato di gioco a “in esecuzione” se è fermo
if (!gameRunning) {
xv = 0;
yv = 0;
px = 10;
py = 10;
gs = 20;
tc = 20;
ax = 15;
ay = 15;
trail = [];
tail = 0;
punteggio = 0;
gameRunning = true;
// Aggiorna il valore visualizzato sullo schermo
document.getElementById(“punteggio”).innerHTML = “Punteggio: ” + punteggio;
}
}, { passive: true });

var gameContainer = document.getElementById(‘game-container’);
gameContainer.addEventListener(‘touchstart’, function(evt) {
evt.preventDefault();
var touchobj = evt.changedTouches[0];
startX = touchobj.pageX;
startY = touchobj.pageY;
endX = touchobj.pageX;
endY = touchobj.pageY;
}, { passive: false });

gameContainer.addEventListener(‘touchmove’, function(evt) {
evt.preventDefault();
var touchobj = evt.changedTouches[0];
endX = touchobj.pageX;
endY = touchobj.pageY;
var diffX = endX – startX;
var diffY = endY – startY;
if (Math.abs(diffX) > Math.abs(diffY)) {
// moving horizontally
if (diffX > 0) {
// swiped right
xv = 1;
yv = 0;
} else {
// swiped left
xv = -1;
yv = 0;
}
} else {
// moving vertically
if (diffY > 0) {
// swiped down
xv = 0;
yv = 1;
} else {
// swiped up
xv = 0;
yv = -1;
}
}
}, { passive: false });

document.addEventListener(“keydown”, function(event) {
switch(event.keyCode) {
case 37: // Freccia sinistra
xv = -1;
yv = 0;
break;
case 38: // Freccia su
xv = 0;
yv = -1;
break;
case 39: // Freccia destra
xv = 1;
yv = 0;
break;
case 40: // Freccia giù
xv = 0;
yv = 1;
break;
}
});

// Aggiungi un listener per il selettore del livello di gioco
var difficultySelector = document.getElementById(“difficulty”);
difficultySelector.addEventListener(“change”, function() {
if (difficultySelector.value === “easy”) {
// Imposta il gioco in modalità facile
isEasyMode = true;
} else {
// Imposta il gioco in modalità difficile
isEasyMode = false;
}
});

function checkLoadedImages() {
loadedImages++;
if (loadedImages === totalImages) {
// tutte le immagini sono state caricate, inizia il gioco
setInterval(game, 100);
}
}

function changeFruit() {
// Scegli un’immagine di frutta casuale
currentFruitIndex = Math.floor(Math.random() * fruitImgs.length);
currentFruit = fruitImgs[currentFruitIndex];
// Sposta la frutta in una posizione casuale, evitando la posizione attuale del serpente
do {
ax = Math.floor(Math.random() * tc);
ay = Math.floor(Math.random() * tc);
} while (isInTrail(ax, ay) || (ax === px && ay === py));
}

// Controlla se una determinata posizione è già presente nella coda del serpente
function isInTrail(x, y) {
for (var i = 0; i < trail.length; i++) {
if (trail[i].x === x && trail[i].y === y) {
return true;
}
}
return false;
}

function game() {
if (!gameRunning) {
// Il gioco non è in esecuzione, quindi non fare nulla
return;
}
if (gameRunning) {
// Aggiorna la posizione del serpente
px += xv;
py += yv;
if (isEasyMode) {
// Se il gioco è in modalità facile, riporta il serpente dall'altro lato del canvas se esce dal bordo
if (px tc – 1) {
px = 0;
}
if (py tc – 1) {
py = 0;
}
} else {
// Se il gioco è in modalità difficile, termina il gioco se il serpente tocca il bordo del canvas
if (px tc – 1 || py tc – 1) {
gameRunning = false;
}
}
// Disegna lo sfondo
ctx.fillStyle = “black”;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Disegna la frutta
ctx.drawImage(currentFruit, ax * gs, ay * gs, gs, gs);
// Disegna il serpente
ctx.drawImage(snakeHeadImg, px * gs, py * gs, gs, gs);
for (var i = 0; i tail) {
trail.shift();
}
// Se il serpente mangia la frutta, aumenta la lunghezza della coda e cambia la frutta
if (ax === px && ay === py) {
tail++;
changeFruit();
// Incrementa il punteggio
punteggio++;
// Aggiorna il valore visualizzato sullo schermo
document.getElementById(“punteggio”).innerHTML = “Punteggio: ” + punteggio;
}
// Se il gioco è terminato, mostra il messaggio di fine gioco
if (!gameRunning) {
gameRunning = false;
// Il gioco è finito, disegna un messaggio di game over
clearInterval();
ctx.fillStyle = “#000”;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = “#fff”;
ctx.font = “40px Arial”;
ctx.textAlign = “center”; // Imposta l’allineamento del testo al centro
ctx.fillText(“Gioco terminato”, canvas.width / 2, canvas.height / 2);
ctx.font = “20px Arial”;
if (isEasyMode) {
ctx.fillText(“Hai toccato la tua coda!”, canvas.width / 2, canvas.height / 2 + 30); // Sposta il testo più in basso
ctx.fillText(“Tocca per rigiocare”, canvas.width / 2, canvas.height / 2 + 90); // Sposta il testo più in basso
}
if (!isEasyMode) {
ctx.fillText(“Hai toccato la tua coda”, canvas.width / 2, canvas.height / 2 + 30); // Sposta il testo più in basso
ctx.fillText(“oppure il bordo”, canvas.width / 2, canvas.height / 2 + 60); // Sposta il testo più in basso
ctx.fillText(“Tocca per rigiocare”, canvas.width / 2, canvas.height / 2 + 120); // Sposta il testo più in basso
}
}
}
}