Jogo da cobrinha em JavaScript com Iniciar/Reiniciar

48 Atif.designer.developer

Abrir no Editor Video Publique Seu Código

Jogo da cobrinha em JavaScript com Iniciar/Reiniciar

Recomendado

14 January 2026

Clone do jogo Geometry Dash em JavaScript

30 March 2025

Efeito de embaralhamento de texto

16 December 2025

Emulador de jogo HTML5 Street Fighter II Turbo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Snake Game with Start & Restart</title>
  <style>
    body {
      background: #111;
      color: #fff;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

canvas {
      background: #000;
      border: 2px solid #00ff99;
      margin: 10px 0;
    }

button {
      padding: 10px 18px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      background: #00ff99;
      border: none;
      border-radius: 6px;
      margin: 5px;
    }

.controls {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 60px 60px 60px;
      grid-gap: 8px;
      justify-content: center;
    }

.empty {
      visibility: hidden;
    }
  </style>
</head>
<body>

<h2>paint Game</h2>
  <p>Score: <span id="score">0</span></p>

<div>
    <button onclick="startGame()">START</button>
    <button onclick="restartGame()">RESTART</button>
  </div>

<div class="controls">
    <div class="empty"></div>
    <button onclick="setDirection('UP')">⬆</button>
    <div class="empty"></div>

const box = 15;
    let score = 0; 
    let game = null;
    let running = false;

let snake;
    let direction;
    let food;

function initGame() {
      score = 0;
      document.getElementById("score").innerText = score;

snake = [{ x: 150, y: 150 }];
      direction = "RIGHT";

food = {
        x: Math.floor(Math.random() * 20) * box,
        y: Math.floor(Math.random() * 20) * box
      };

draw();
    }

function startGame() {
      if (!running) {
        running = true;
        game = setInterval(draw, 120);
      }
    }

function restartGame() {
      clearInterval(game);
      running = false;
      initGame();
    }

document.addEventListener("keydown", (e) => {
      if (e.key === "Enter") startGame();
      if (e.key === "ArrowUp" && direction !== "DOWN") direction = "UP";
      if (e.key === "ArrowDown" && direction !== "UP") direction = "DOWN";
      if (e.key === "ArrowLeft" && direction !== "RIGHT") direction = "LEFT";
      if (e.key === "ArrowRight" && direction !== "LEFT") direction = "RIGHT";
    });

function setDirection(dir) {
      if (dir === "UP" && direction !== "DOWN") direction = "UP";
      if (dir === "DOWN" && direction !== "UP") direction = "DOWN";
      if (dir === "LEFT" && direction !== "RIGHT") direction = "LEFT";
      if (dir === "RIGHT" && direction !== "LEFT") direction = "RIGHT";
    }

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Snake
      for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = i === 0 ? "#00ff99" : "#00cc77";
        ctx.fillRect(snake[i].x, snake[i].y, box, box);
      }

// Food
      ctx.fillStyle = "red";
      ctx.fillRect(food.x, food.y, box, box);

let headX = snake[0].x;
      let headY = snake[0].y;

if (direction === "UP") headY -= box;
      if (direction === "DOWN") headY += box;
      if (direction === "LEFT") headX -= box;
      if (direction === "RIGHT") headX += box;

// Eat food
      if (headX === food.x && headY === food.y) {
        score++;
        document.getElementById("score").innerText = score;
        food = {
          x: Math.floor(Math.random() * 20) * box,
          y: Math.floor(Math.random() * 20) * box
        };
      } else {
        snake.pop();
      }

let newHead = { x: headX, y: headY };

// Game Over
      if (
        headX < 0 || headY < 0 ||
        headX >= canvas.width || headY >= canvas.height ||
        collision(newHead, snake)
      ) {
        clearInterval(game);
        running = false;
        alert("Game Over! Score: " + score);
      }

snake.unshift(newHead);
    }

function collision(head, body) {
      return body.some(part => head.x === part.x && head.y === part.y);
    }

initGame();
  </script>

</body>
</html>

Jogo da cobrinha em JavaScript com Iniciar/Reiniciar

Recomendado

Clone do jogo Geometry Dash em JavaScript

Efeito de embaralhamento de texto

Emulador de jogo HTML5 Street Fighter II Turbo

HTML

CSS

JS

Recomendado

Clone do jogo Geometry Dash em JavaScript

Efeito de embaralhamento de texto

Emulador de jogo HTML5 Street Fighter II Turbo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS