Snake – gra w węża online

Wąż (ang. snake) to gra komputerowa zainspirowana wydaną w październiku 1976 roku grą na automaty pod nazwą Blockade.

Gracz kontroluje długie i cienkie stworzenie, podobne do węża, które porusza się po obramowanej planszy zbierając jedzenie (lub inne przedmioty), próbując nie uderzyć własną głową o ściany otaczające planszę gry, a także o część własnego ciała.

Kiedy wąż zje kawałek jedzenia, jego ogon robi się coraz dłuższy, co utrudnia grę.

Gracz kontroluje kierunek ruchu węża za pomocą klawiszy strzałek (góra, dół, lewo, prawo).

Gra była spopularyzowana na przełomie XX i XXI wieku dzięki wersjom dla telefonów komórkowych firmy Nokia.

Wąż to jedna z najbardziej kultowych gier w historii, która przetrwała próbę czasu i wciąż jest popularna na całym świecie. W ciągu ponad 40 lat od jej powstania, gra ta przeszła wiele zmian i modyfikacji, ale jej podstawowa mechanika pozostała niezmieniona.

Wąż to gra, która zawsze będzie kojarzona z początkami gier komputerowych i z pewnością zawsze będzie cieszyć się uznaniem graczy.

Wygodniej się gra na pełnym ekranie. Ikonka po prawo na górze.

Gramy?

Jak wstawić Węża na własną stronę?

Można to zrobić ręcznie lub pobrać gotowca i go edytować jak dusza zapragnie.

Tworzymy odpowiednie pliki:

index.html
style.css
script.js

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Gra Snake online</title>
<link rel="stylesheet" href="style.css">    
<script src="script.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
</head>
<body>
<div class="wrapper">
  <div class="game-details"> <span class="score">Wynik: 0</span> <span style="font-size: 1.1rem">SNAKE</span> <span class="high-score">Twój rekord: 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>    
</body>
</html>

style.css

/* Import Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@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: #ffffff;
}
a:link, a:visited {
  color: #2196f3;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  color: whitesmoke;
}
.wrapper {
  width: 95vmin;
  height: 95vmin;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  border-radius: 5px;
  background: #293447;
  box-shadow: 0 3px 5px rgba(52, 87, 220, 0.2);
}
.game-details {
  color: #B8C6DC;
  font-weight: 500;
  font-size: 0.9rem;
  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: #FF0000;
}
.play-board .head {
  background: #2196f3;
}

.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;
  }
}

script.js

// JavaScript Document
// www.skrip.pl
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;

// Getting high score from the local storage
let highScore = localStorage.getItem("high-score") || 0;
highScoreElement.innerText = `Twój rekord: ${highScore}`;

const updateFoodPosition = () => {
    // Passing a random 1 - 30 value as food position
    foodX = Math.floor(Math.random() * 30) + 1;
    foodY = Math.floor(Math.random() * 30) + 1;
}

const handleGameOver = () => {
    // Clearing the timer and reloading the page on game over
    clearInterval(setIntervalId);
    alert("Koniec gry! Naciśnij OK, aby zagrać ponownie...");
    location.reload();
}

const changeDirection = e => {
    // Changing velocity value based on key press
    if(e.key === "ArrowUp" && velocityY != 1) {
        velocityX = 0;
        velocityY = -1;
    } else if(e.key === "ArrowDown" && velocityY != -1) {
        velocityX = 0;
        velocityY = 1;
    } else if(e.key === "ArrowLeft" && velocityX != 1) {
        velocityX = -1;
        velocityY = 0;
    } else if(e.key === "ArrowRight" && velocityX != -1) {
        velocityX = 1;
        velocityY = 0;
    }
}

// Calling changeDirection on each key click and passing key dataset value as an object
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>`;

    // Checking if the snake hit the food
    if(snakeX === foodX && snakeY === foodY) {
        updateFoodPosition();
        snakeBody.push([foodY, foodX]); // Pushing food position to snake body array
        score++; // increment score by 1
        highScore = score >= highScore ? score : highScore;
        localStorage.setItem("high-score", highScore);
        scoreElement.innerText = `Punkty: ${score}`;
        highScoreElement.innerText = `Twój rekord: ${highScore}`;
    }
    // Updating the snake's head position based on the current velocity
    snakeX += velocityX;
    snakeY += velocityY;
    
    // Shifting forward the values of the elements in the snake body by one
    for (let i = snakeBody.length - 1; i > 0; i--) {
        snakeBody[i] = snakeBody[i - 1];
    }
    snakeBody[0] = [snakeX, snakeY]; // Setting first element of snake body to current snake position

    // Checking if the snake's head is out of wall, if so setting gameOver to true
    if(snakeX <= 0 || snakeX > 30 || snakeY <= 0 || snakeY > 30) {
        return gameOver = true;
    }

    for (let i = 0; i < snakeBody.length; i++) {
        // Adding a div for each part of the snake's body
        html += `<div class="head" style="grid-area: ${snakeBody[i][1]} / ${snakeBody[i][0]}"></div>`;
        // Checking if the snake head hit the body, if so set gameOver to true
        if (i !== 0 && snakeBody[0][1] === snakeBody[i][1] && snakeBody[0][0] === snakeBody[i][0]) {
            gameOver = true;
        }
    }
    playBoard.innerHTML = html;
}

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

Top Stories

Cicada 3301 – krótka historia

Do sprzedania: CASIO G-Shock Multi Fluorescent GA-B2100MF-1A Tough Solar – Bluetooth

Grupa PLA Unit 61398 – krótka historia

Kultowa gra Snake online

Wąż to jedna z najbardziej kultowych gier w historii.

Snake – gra w węża online

Gramy?

Jak wstawić Węża na własną stronę?

index.html

style.css

script.js

Lub pobierz gotowe pliki gry Snake

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy

Top Stories

Cicada 3301 – krótka historia

Do sprzedania: CASIO G-Shock Multi Fluorescent GA-B2100MF-1A Tough Solar – Bluetooth

Grupa PLA Unit 61398 – krótka historia

Snake – gra w węża online

Gramy?

Jak wstawić Węża na własną stronę?

index.html

style.css

script.js

Lub pobierz gotowe pliki gry Snake

Może Ci się spodobać:

Zegar cyfrowy v.1 na stronę www

Idziesz do kasyna. Podstawy Ruletki online

Doom – strzelanka online

Botnety – co to takiego?