Snake game

Open In Editor Publish Your Code

<!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);

Snake game

Recommended

Brick Breaker Game HTML Canvas JavaScript

TicTacToe Game

Halloween Matching Game

HTML

CSS

JS

Recommended

Brick Breaker Game HTML Canvas JavaScript

TicTacToe Game

Halloween Matching Game

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS