Scribd
Upload
5 views

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
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

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