Scribd
Upload
8 views8 pages

Js Right

The document provides code for a snake game including HTML, CSS and JavaScript. It includes instructions on setting up the game board, controlling the snake, tracking score and handling collisions.

Uploaded by

olatunjibasit01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views8 pages

Js Right

The document provides code for a snake game including HTML, CSS and JavaScript. It includes instructions on setting up the game board, controlling the snake, tracking score and handling collisions.

Uploaded by

olatunjibasit01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

so at this stage only your index.html should have the following code <!

DOCTYPE html>

<!-- Coding By MR KIKSY -->

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<title>Snake Game JavaScript | MR KIKSY CODING </title>

<link rel="stylesheet" href="C:\Users\user\Desktop\MR KIKSY GAMES\Snake Game\style.css">

<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">

<script src="C:\Users\user\Desktop\MR KIKSY GAMES\Snake Game\script.js" defer></script>

</head>

<body>

<div class="wrapper">

<div class="game-details">

<span class="score">Score: 0</span>

<span class="high-score">High 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>
</body>

</html>

and your Styles.css FILE should have the following code/* 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;

h1{ display: top;

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;

border-radius: 5px;

background: #293447;

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: #60CBFF;

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

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 = `High Score: ${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( " MR KIKSY: Game Over! You are a FAILURE , you can never make it.. Press OK if you AGREE...");

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 = `Score: ${score}`;

highScoreElement.innerText = `High Score: ${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, 100);

document.addEventListener("keyup", changeDirection);

You might also like