juego de serpiente

2441 Andev.web

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

10 July 2025

Plantilla de menú de restaurante HTML

25 June 2025

Un código de Mete

10 September 2024

Tarjeta de producto de Glassmorphism

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Andev web</title>
</head>
<body>
    <div class="wrapper">
        <div class="game-details">
            <span class="score">Score: 0</span>
            <span class="high-score">Highest score: 0</span>
        </div>
        <div class="play-board"></div>
        <div class="controls">
            <i data-key="ArrowLeft" class="fa-solid fa-arrow-left-long"></i>
            <i data-key="ArrowUp" class="fa-solid fa-arrow-up-long"></i>
            <i data-key="ArrowRight" class="fa-solid fa-arrow-right-long"></i>
            <i data-key="ArrowDown" class="fa-solid fa-arrow-down-long"></i>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #e3f2fd;
}

.wrapper{
    width: 65vmin;
    height: 70vmin;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    background: #293447;
    border-radius: 5px;
    box-shadow: 0 20px 40px rgba(52, 87, 220, 0.2);
}

.game-details{
    color: #b8c6dc;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 20px 27px;
    display: flex;
    justify-content: space-between;
}

.play-board{
    height: 100%;
    width: 100%;
    display: grid;
    background: #212837;
    grid-template: repeat(30, 1fr) / repeat(30, 1fr);
}

.play-board .food{
    background: #ff003d;
}

.play-board .head{
    background: #60ff70;
}

.controls{
    display: none;
    justify-content: space-between;
}

.controls i{
    padding: 25px 0;
    text-align: center;
    font-size: 1.3rem;
    color: #b8c6dc;
    width: calc(100% / 4);
    cursor: pointer;
    border-right: 1px solid #171b26;
}

@media screen and (max-width: 800px) {
    .wrapper{
        width: 90vmin;
        height: 115vmin;
    }

.game-details{
        font-size: 1rem;
        padding: 15px 27px;
    }

.controls{
        display: flex;
    }

.controls i{
        padding: 15px 0;
        font-size: 1rem;
    }
}

JS

const playBoard = document.querySelector(".play-board");
const scoreElement = document.querySelector(".score");
const highScoreElement = document.querySelector(".high-score");
const controls = document.querySelectorAll(".controls i");

let gameOver = false;
let foodX, foodY;
let snakeX = 5, snakeY = 5;
let velocityX = 0, velocityY = 0;
let snakeBody = [];
let setIntervalId;
let score = 0;

// Get high score from local storage

let highScore = localStorage.getItem("Puntuación Más Alta") || 0;
highScoreElement.innerText = `Puntuación Más Alta: ${highScore}`;

// Pass a random between 1 and 30 as food position

const updateFoodPosition = () => {
    foodX = Math.floor(Math.random() * 30) + 1;
    foodY = Math.floor(Math.random() * 30) + 1;
}

const handleGameOver = () => {
    clearInterval(setIntervalId);
    alert("Game Over! Press OK to replay...");
    location.reload();
}

// Change velocity value based on key press

// Change Direction on each key click

controls.forEach(button => button.addEventListener("click", () => changeDirection({ key: button.dataset.key })));

const initGame = () => {
    if (gameOver) return handleGameOver();
    let html = `<div class="food" style="grid-area: ${foodY} / ${foodX}"></div>`;

// When snake eat food
    if (snakeX === foodX && snakeY === foodY) {
        updateFoodPosition();
        snakeBody.push([foodY, foodX]); //Add food to snake body array
        score++;
        highScore = score >= highScore ? score : highScore; // if score > high score => high score = score

localStorage.setItem("Puntuación Más Alta", highScore);
        scoreElement.innerText = `Puntuación: ${score}`;
        highScoreElement.innerText = `Puntuación Más Alta: ${highScore}`;
    }

// Update Snake Head
    snakeX += velocityX;
    snakeY += velocityY;

// Shifthing forward values of elements in snake body by one

for (let i = snakeBody.length - 1; i > 0; i--) {
        snakeBody[i] = snakeBody[i - 1];
    }

snakeBody[0] = [snakeX, snakeY];

// Check snake body is out of wall or no

if (snakeX <= 0 || snakeX > 30 || snakeY <= 0 || snakeY > 30) {
        return gameOver = true;
    }

// Add div for each part of snake body

for (let i = 0; i < snakeBody.length; i++) {
        html += `<div class="head" style="grid-area: ${snakeBody[i][1]} / ${snakeBody[i][0]}"></div>`;
        // Check snake head hit body or no
        if (i !== 0 && snakeBody[0][1] === snakeBody[i][1] && snakeBody[0][0] === snakeBody[i][0]) {
            gameOver = true;
        }
    }
    playBoard.innerHTML = html;
}

updateFoodPosition();
setIntervalId = setInterval(initGame, 100);
document.addEventListener("keyup", changeDirection);

Recomendado

Plantilla de menú de restaurante HTML

Un código de Mete

Tarjeta de producto de Glassmorphism

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS