Jogo Snake em HTML5 - por Samuel Leonardo

Vim postar um exemplo de jogo que fiz há alguns anos. Estou postando pra caso alguém queira estudar o código. Eu tentei deixar o máximo de faciliadde possível pra entender. A lógica é bem simples ao meu ver. Segue: Copie e salve o código abaixo como snake.js // as variáveis de "saída" ``` var canvas; var context; ``` // as variáveis do jogo var state = 0; // estado do jogo var TILESIZE; // tamanho dos "tiles", apenas para desenhar na tela var pieces; // a cobra var apple; // a maçã var keyUp, keyRight, keyDown, keyLeft; // teclas pressionadas ou soltas var UP, DOWN, LEFT, RIGHT; // direção da cobra var velX, velY; // velocidade nos eixos var collision; // indica colisão da cabeça com alguma parte da cobra var mapWidth, mapHeight; // dimensão do "mapa" // as imagens ``` var imgApple; var imgPiece; var imgHead; function loadImage ( imgUrl ) ``` { ``` var img = new Image(); img.src = imgUrl; return img; } function Piece ( x, y, dir ) ``` { ``` this.id = -1; this.x = x || 0; this.y = y || 0; this.dir = dir || 0; } ``` Piece.prototype = { ``` setPos: function (x, y) { this.x = x; this.y = y; }, randomPos: function ( ) { var repeat; var newPos = {x:0, y:0}; do { repeat = false; newPos.x = Math.floor(Math.random() * mapWidth); newPos.y = Math.floor(Math.random() * mapHeight); for (var i = 0; i < pieces.length; i++) if (pieces[i].id == this.id || (pieces[i].x == newPos.x && pieces[i].y == newPos.y)) repeat = true; } while (repeat); this.x = newPos.x; this.y = newPos.y; }, draw: function ( img ) { context.drawImage(img, this.x * TILESIZE, this.y * TILESIZE); } } function keyboardDown ( event ) ``` { ``` var ev = event || window.event; switch (ev.keyCode) { case 37: // seta esquerda keyLeft = true; break; case 38: // seta para cima keyUp = true; break; case 39: // seta direita keyRight = true; break; case 40: // seta para baixo keyDown = true; break; case 80: // tecla p = pause game velX = velY = 0; break; default: break; } } function keyboardUp ( event ) ``` { ``` var ev = event || window.event; switch (ev.keyCode) { case 37: // seta esquerda keyLeft = false; break; case 38: // seta para cima keyUp = false; break; case 39: // seta direita keyRight = false; break; case 40: // seta para baixo keyDown = false; break; default: break; } } function gameInit ( ) ``` { ``` TILESIZE = 32; mapWidth = 20; mapHeight = 15; canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); canvas.width = mapWidth * TILESIZE; canvas.height = mapHeight * TILESIZE; imgPiece = loadImage("piece.png"); imgApple = loadImage("apple.png"); imgHead = loadImage("head.png"); pieces = new Array(new Piece(), new Piece(), new Piece()); apple = new Piece(); apple.id = -10; velX = velY = 0; collision = false; // direções a seguir UP = 0; RIGHT = 1; DOWN = 2; LEFT = 3; // inicializando a parte A - a cabeça pieces[2].id = 2; pieces[2].x = 3; pieces[2].y = 3; pieces[2].dir = RIGHT; // inicializando a parte B pieces[1].id = 1; pieces[1].x = 2; pieces[1].y = 3; pieces[1].dir = RIGHT; // inicializando a parte C - o rabo pieces[0].id = 0; pieces[0].x = 1; pieces[0].y = 3; pieces[0].dir = RIGHT; // escolhe as coordenadas da maçã apple.randomPos(); // por fim seta o estado para 1 state = 1; // atualiza o tamnho atual na pagina html document.getElementById("currSize").innerHTML = pieces.length; // atualiza o tamanho anterior na pagina html document.getElementById("lastSize").innerHTML = 0; } function gameReset ( ) ``` { // atualiza o tamanho anterior na pagina html ``` document.getElementById("lastSize").innerHTML = pieces.length; // retira o excesso de elementos deixa só 3 pra reiniciar while (pieces.length > 3) pieces.pop(); velX = velY = 0; collision = false; // reinicializando as peças // inicializando a parte A - a cabeça pieces[2].id = 2; pieces[2].x = 3; pieces[2].y = 3; pieces[2].dir = RIGHT; // inicializando a parte B pieces[1].id = 1; pieces[1].x = 2; pieces[1].y = 3; pieces[1].dir = RIGHT; // inicializando a parte C - o rabo pieces[0].id = 0; pieces[0].x = 1; pieces[0].y = 3; pieces[0].dir = RIGHT; apple.randomPos(); // atualiza o tamnho atual na pagina html document.getElementById("currSize").innerHTML = pieces.length; } function gameLoop ( ) ``` { ``` if (keyLeft) { if (pieces[pieces.length - 1].dir != RIGHT) { velX = -1; velY = 0; pieces[pieces.length - 1].dir = LEFT; } } else if (keyUp) { if (pieces[pieces.length - 1].dir != DOWN) { velX = 0; velY = -1; pieces[pieces.length - 1].dir = UP; } } else if (keyRight) { if (pieces[pieces.length - 1].dir != LEFT) { velX = 1; velY = 0; pieces[pieces.length - 1].dir = RIGHT; } } else if (keyDown) { if (pieces[pieces.length - 1].dir != UP) { velX = 0; velY = 1; pieces[pieces.length - 1].dir = DOWN; } } // atualiza as posições das pieces se estiver movendo if (velX != 0 || velY != 0) { for (var i=0; i < pieces.length - 1; i++) { pieces[i].x = pieces[i + 1].x; pieces[i].y = pieces[i + 1].y; pieces[i].dir = pieces[i + 1].dir; } } if (pieces[pieces.length - 1].x == apple.x && pieces[pieces.length - 1].y == apple.y) { pieces.push(new Piece()); pieces[pieces.length - 1].x = apple.x; pieces[pieces.length - 1].y = apple.y; pieces[pieces.length - 1].dir = pieces[pieces.length - 2].dir; pieces[pieces.length - 1].id = pieces.length - 1; apple.randomPos(); // atualiza o tamanho atual na pagina html document.getElementById("currSize").innerHTML = pieces.length; } // agora move a cabeça pieces[pieces.length - 1].x += velX; pieces[pieces.length - 1].y += velY; // depois de mover a cabeça limita o movimento no canvas // Para o eixo X if (pieces[pieces.length - 1].x >= mapWidth) { pieces[pieces.length - 1].x = 0; collision = true; } else if (pieces[pieces.length - 1].x < 0) { pieces[pieces.length - 1].x = mapWidth - 1; collision = true; } // Para o eixo Y if (pieces[pieces.length - 1].y >= mapHeight) { pieces[pieces.length - 1].y = 0; collision = true; } else if (pieces[pieces.length - 1].y < 0) { pieces[pieces.length - 1].y = mapHeight - 1; collision = true; } // se colidiu com alguma parte da cobra if (collision) { gameReset(); } // verifica se colidiu com alguma parte da cobra for (var i=0; i < pieces.length - 2 && !collision; i++) if (pieces[pieces.length - 1].x == pieces[i].x && pieces[pieces.length - 1].y == pieces[i].y) collision = true; context.fillStyle = "#FFFFFF"; context.fillRect(0,0,canvas.width,canvas.height); // desenha o corpo da cobra (sem a cabeça) for (var i=0; i < pieces.length - 1; i++) pieces[i].draw(imgPiece); // desenha a maçã apple.draw(imgApple); // desenha a cabeça pieces[pieces.length - 1].draw(imgHead); } function gameMain ( ) ``` { switch (state) { case 0: ``` gameInit(); break; case 1: gameLoop(); break; default: state = 0; break; } } Agora, copie e salve o código abaixo como snake.html ``` ``` Jogo Snake em HTML5 - por Samuel Leonardo

TAMANHO ATUAL: - TAMANHO ANTERIOR:

MOVER use SETAS do teclado

mais jogos AQUI!

Lembrando que você precisa dessas imagens abaixo: Salve todas elas e coloque tudo na mesma pasta do snake.js e snake.html ![piece.png.a774edaaf96f958dfc288e22e4bb4ee9.png](https://forum.imasters.com.br/monthly_2019_10/piece.png.a774edaaf96f958dfc288e22e4bb4ee9.png)/monthly_2019_10/head.png.89e75154b4fe55f9c7c55063dbc0152d.png" alt="head.png.89e75154b4fe55f9c7c55063dbc0152d.png" />![apple.png.c34802e2f2054f53df764deb332dbd16.png](https://forum.imasters.com.br/monthly_2019_10/apple.png.c34802e2f2054f53df764deb332dbd16.png) São 3 imagens separadas. Depois só abrir o snake.html com um browser como o firefox. Setas movem a snake. Como é só um exemplo pra estudo, coloquei suporte só para desktop. ```

samleo

Exemplom de jogo Snake em HTML5 com javascript