<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jogo da Cobrinha</title>
<link rel="stylesheet" href="style.css">
<style type="text/css" id="dcoder_stylesheet">body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
}
h1 {
margin-bottom: 20px;
}
canvas {
border: 1px solid #fff;
}
#controls {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.control-row {
display: flex;
justify-content: center;
}
button {
width: 50px;
height: 50px;
margin: 5px;
font-size: 18px;
background-color: #444;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #666;
}
#inputContainer {
display: flex;
flex-direction: column;
align-items: center;
}
#inputContainer label {
margin-bottom: 10px;
font-size: 20px;
}
#inputContainer input {
margin-bottom: 10px;
padding: 5px;
font-size: 18px;
}</style></head>
<body>
<h1>Jogo da Cobrinha</h1>
<div id="inputContainer">
<label for="playerName">Nome do Jogador:</label>
<input type="text" id="playerName">
<button onclick="startGame()">Iniciar Jogo</button>
</div>
<canvas id="gameCanvas" width="400" height="400" style="display: none;"></canvas>
<div id="controls" style="display: none;">
<div class="control-row">
<button onclick="setDirection('UP')">8</button>
</div>
<div class="control-row">
<button onclick="setDirection('LEFT')">4</button>
<button onclick="setDirection('DOWN')">2</button>
<button onclick="setDirection('RIGHT')">6</button>
</div>
</div>
<script src="script.js"></script>
<script type="text/javascript" id="dcoder_script">const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const box = 20;
const rows = canvas.height / box;
const cols = canvas.width / box;
let snake;
let food;
let score;
let d;
let game;
let playerName;
let highScore = localStorage.getItem("highScore") || 0;
let highScorePlayer = localStorage.getItem("highScorePlayer") || "N/A";
function startGame() {
playerName = document.getElementById("playerName").value || "Jogador";
document.getElementById("inputContainer").style.display = "none";
canvas.style.display = "block";
document.getElementById("controls").style.display = "block";
init();
}
function init() {
snake = [];
snake[0] = { x: Math.floor(cols / 2) * box, y: Math.floor(rows / 2) * box };
food = {
x: Math.floor(Math.random() * cols) * box,
y: Math.floor(Math.random() * rows) * box
};
score = 0;
d = "RIGHT"; // Movimento inicial da cobra
if (game) clearInterval(game);
game = setInterval(draw, 100);
}
document.addEventListener("keydown", direction);
function direction(event) {
switch (event.keyCode) {
case 37: // seta para esquerda
case 100: // número 4 no teclado numérico
if (d != "RIGHT") d = "LEFT";
break;
case 38: // seta para cima
case 104: // número 8 no teclado numérico
if (d != "DOWN") d = "UP";
break;
case 39: // seta para direita
case 102: // número 6 no teclado numérico
if (d != "LEFT") d = "RIGHT";
break;
case 40: // seta para baixo
case 98: // número 2 no teclado numérico
if (d != "UP") d = "DOWN";
break;
}
}
function setDirection(newDirection) {
if (newDirection === 'LEFT' && d !== 'RIGHT') d = 'LEFT';
if (newDirection === 'UP' && d !== 'DOWN') d = 'UP';
if (newDirection === 'RIGHT' && d !== 'LEFT') d = 'RIGHT';
if (newDirection === 'DOWN' && d !== 'UP') d = 'DOWN';
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x == array[i].x && head.y == array[i].y) {
return true;
}
}
return false;
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < snake.length; i++) {
ctx.fillStyle = (i == 0) ? "green" : "white";
ctx.fillRect(snake[i].x, snake[i].y, box, box);
ctx.strokeStyle = "red";
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
}
ctx.fillStyle = "red";
ctx.fillRect(food.x, food.y, box, box);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (d == "LEFT") snakeX -= box;
if (d == "UP") snakeY -= box;
if (d == "RIGHT") snakeX += box;
if (d == "DOWN") snakeY += box;
if (snakeX == food.x && snakeY == food.y) {
score++;
food = {
x: Math.floor(Math.random() * cols) * box,
y: Math.floor(Math.random() * rows) * box
};
} else {
snake.pop();
}
let newHead = {
x: snakeX,
y: snakeY
};
if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
// Salvar a pontuação mais alta
if (score > highScore) {
highScore = score;
highScorePlayer = playerName;
localStorage.setItem("highScore", highScore);
localStorage.setItem("highScorePlayer", highScorePlayer);
}
init(); // Reinicia o jogo
} else {
snake.unshift(newHead);
}
ctx.fillStyle = "white";
ctx.font = "20px Changa one";
ctx.fillText("Jogador: " + playerName, 2 * box, 1.2 * box);
ctx.fillText("Recorde: " + highScorePlayer + " (" + highScore + ")", 2 * box, 2.2 * box);
ctx.font = "45px Changa one";
ctx.fillText(score, 2 * box, 3.2 * box);
}
init();</script></body></html>
