Snake Games is a very popular game design that is essential for every programmer to know. These games can be created using basic HTML, CSS, and JavaScript programming code. I've already made a lot of games like this. However, I have made this game more beautiful and professional by adding some new features. You can make this game with programming languages like c, c +, java, python, etc. However, if you want to create such games using common HTML CSS and JavaScript programming language i.e. web-development language, you can do so in very little time and easily.
Some special information about this snake game
📌 I designed this game in a fully responsive way. So that you can use it on any device.
📌 This is basically a desktop game. But you can use it in the case of a mobile or its tab if you want.
📌 In the case of mobile, you can control the game by touching the screen. In the case of a computer, you can use the keyboard.
📌 There are also four arrow buttons in the game. You can control this game by clicking on these buttons.
📌 I am sure you will like this game very much and you will learn very well from here how to make a snake game.
📌 This game is designed using only HTML, CSS, and JavaScript programming code. The codes are written as simply as possible with new programmers in mind when creating them. So that everyone can understand and make it by themselves.
📌 It is fully responsive so you can play it nicely in case of computer, mobile, Android, etc. devices.
📌 The game continues in a large square box. In this case, a snake wanders around in a box that you can control. You have to eat these fruits one by one. The more fruits you can eat, the more your points will increase and the size of the snake will increase.
📌 You get out of the game when you hit the wall of that square box. This time a box will open showing a message. There will be written that you are out of the game.
📌 Above there is a score meter to see how much you have scored in the game. There is also the option to show the highest score, which means that if you have ever played before, this score is saved in the database of this game. Then later you can see the high score when you play it again.
Hope you understand how this game works and what features are in this game.
How To Make This Snake Game
Now I will show you the complete step by step how I made this game very easily using simple programming code. You can download all the necessary codes by clicking on the download button below.
I'm basically using three types of programming code to make it. These three codes I have given you below. Copy those codes and paste them into the HTML file you created. If you do not know how to create HTML files. But first, you have to open a text editor or a notepad. Then copy and paste the structure given below into that editor. Then add the rename of your choice and save the file with dot HTML. Below I have shown in full how you will add these three required codes.
Add HTML Code
The following codes are HTML codes that were originally used for this game structure. Basically here I am using very little HTML code. You copy the following HTML codes and then paste them in the upper structure where the add HTML code is written.
<div class="snake">
<div class="header">
<h1>Snake JavaScript</h1>
</div>
<div class="details">
<span class="new_Score">Current Score: <span class="score_Number">0</span></span>
<span class="best_Score">Best Score: <span class="best_Score_Number">0</span></span><!-- /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/-->
</div>
<div class="game">
<div class="container"></div>
</div>
<div class="buttons">
<button type="button" data-num="1" class="topBtn btn">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<title>arrow-up-outline</title>
<path class="cls-1"
d="M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.16,0,256,0Zm0,469.33c-117.63,0-213.33-95.7-213.33-213.33S138.37,42.67,256,42.67,469.33,138.37,469.33,256,373.63,469.33,256,469.33Z" />
<path class="cls-1"
d="M271.08,155.58a21.33,21.33,0,0,0-30.17,0l-64,64a21.33,21.33,0,0,0,30.17,30.17l27.58-27.58V384a21.33,21.33,0,1,0,42.67,0V222.17l27.58,27.58a21.33,21.33,0,0,0,30.17-30.17Z" />
</svg></button>
<br><!-- /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/-->
<button type="button" data-num="2" class="leftBtn btn">
<svg id="Layer_1" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<title>arrow-left-outline</title>
<path class="cls-1"
d="M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.16,0,256,0Zm0,469.33c-117.63,0-213.33-95.7-213.33-213.33S138.37,42.67,256,42.67,469.33,138.37,469.33,256,373.63,469.33,256,469.33Z" />
<path class="cls-1"
d="M384,234.67H222.17l27.58-27.58a21.33,21.33,0,0,0-30.17-30.17l-64,64a21.33,21.33,0,0,0,0,30.17l64,64a21.33,21.33,0,1,0,30.17-30.17l-27.58-27.58H384a21.33,21.33,0,0,0,0-42.67Z" />
</svg></button>
<button type="button" data-num="3" class="rightBtn btn">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<title>arrow-right-outline</title>
<path class="cls-1"
d="M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.16,0,256,0Zm0,469.33c-117.63,0-213.33-95.7-213.33-213.33S138.37,42.67,256,42.67,469.33,138.37,469.33,256,373.63,469.33,256,469.33Z" />
<path class="cls-1"
d="M292.42,176.92a21.33,21.33,0,0,0-30.17,30.17l27.58,27.58H128a21.33,21.33,0,0,0,0,42.67H289.83l-27.58,27.58a21.33,21.33,0,1,0,30.17,30.17l64-64a21.33,21.33,0,0,0,0-30.17Z" />
</svg></button>
<br><!-- /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/-->
<button type="button" data-num="4" class="downBtn btn">
<svg id="Layer_1" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<title>arrow-down-outline</title>
<path class="cls-1"
d="M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.16,0,256,0Zm0,469.33c-117.64,0-213.33-95.7-213.33-213.33S138.36,42.67,256,42.67,469.33,138.37,469.33,256,373.64,469.33,256,469.33Z" />
<path class="cls-1"
d="M304.92,262.25l-27.58,27.58V128a21.33,21.33,0,1,0-42.67,0V289.83l-27.58-27.58a21.33,21.33,0,1,0-30.17,30.17l64,64a21.33,21.33,0,0,0,30.17,0l64-64a21.33,21.33,0,1,0-30.17-30.17Z" />
</svg></button>
</div>
</div>
<div class="end">
<div class="bkColor"></div>
<div class="fail">
<img class="img" src="https://mohamedelghandour.github.io/Snake/img/game%20over.png" alt="">
</div>
</div>
<div class="warning-rotate">
<h1>try to rotate the phone to play with The best performance.</h1>
</div><!-- /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/-->
<div class="hidden-Sound">
<audio class="eat-sound" controls>
<source src="https://mohamedelghandour.github.io/Snake/sound/eat.ogg" type="audio/ogg">
<source src="https://mohamedelghandour.github.io/Snake/sound/eat.wav" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio class="die-sound" controls>
<source src="https://mohamedelghandour.github.io/Snake/sound/gameover.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<audio class="background-sound" controls loop>
<source src="https://mohamedelghandour.github.io/Snake/sound/backgroundmusic.mp3" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
<a href="https://codepen.io/MohamedElGhandour" target="_blank">
<div class="profile tooltip">
<span class="tooltiptext">Mohamed Elghandour</span>
</div>
</a>
Add CSS Code
CSS cones were originally used to design this game and for color combinations. Here I have used a lot of CSS code. Some special CSS code (@media) has been used to make this game responsive. You copy the code below then paste it in the place where the ad CSS code is written at the top. If you want to create a separate CSS file, then you must attach your CSS file to the HTML file.
/* latin-ext */
@font-face {
font-family: 'Courier Prime';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Courier Prime Regular'), local('CourierPrime-Regular'), url(https://fonts.gstatic.com/s/courierprime/v2/u-450q2lgwslOqpF_6gQ8kELaw9pWt_-.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
/* latin */
@font-face {
font-family: 'Courier Prime';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Courier Prime Regular'), local('CourierPrime-Regular'), url(https://fonts.gstatic.com/s/courierprime/v2/u-450q2lgwslOqpF_6gQ8kELawFpWg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body, html {
margin: 0;
padding: 0;
background-color: #131417;
color: white;
text-align: center;
position: relative;
}
@media only screen and (max-width: 850px) {
/* For mobile phones: */
.game {
transform: scale(.75);
}
} /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
@media only screen and (max-width: 650px) {
/* For mobile phones: */
.warning-rotate {
transform: scale(1) !important;
}
body, html {
overflow: hidden;
}
}
.snake .header h1 {
font-family: 'Courier Prime', monospace;
font-size: 50px;
}
.snake .details {
width: 400px;
margin: auto; /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
padding: 20px 0;
}
.snake .details .new_Score {
float: left;
}
.snake .details .best_Score {
float: right;
}
.snake .game {
width: 625px;
height: 400px;
background-color: rgb(37 40 48);
margin: auto;
margin-top: 15px;
overflow: auto;
border: 1px solid #5a5f73; /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
position: relative;
}
.snake .game .box {
width: 25px;
height: 25px;
float: left;
position: relative;
}
.snake .game .box.even {
background-color: #131417;
}
.snake .game .box.odd {
background-color: rgb(37 40 48);
}
.snake .game .snake_Box {
background-color: #0078d4;
position: absolute;
width: 25px;
height: 25px; /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
z-index: 2;
}
.snake .game .snake_Head {
transition: all .1s linear;
}
.snake .game .fruit {
position: absolute;
width: 25px;
height: 25px;
}
.end {
transform: scale(0);
transition: all .2s linear;
width: 100%;
height: 100%;
top: 0%;
overflow: hidden;
position: absolute;
z-index: 30;
}
.fail {
width: 400px;
background-color: #131417; /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
height: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bkColor {
width: 100%;
height: 100%;
background-color:rgba(19, 20, 23, .7);
position: absolute;
top: 0%;
left: 0%;
overflow: hidden;
}
.fail img {
width: 70%;
margin: auto;
text-align: center;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
} /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
.hidden-Sound {
display: none;
}
.buttons {
position: absolute;
bottom: 0;
left: 0;
opacity: .5;
transform: scale(1.5) translate(21px, -21px);
z-index: 20;
}
.buttons button {
padding: 5px;
background-color: #455f73;
border: none;
margin: auto;
color: white;
border-radius: 50%;
width: 40px;
height: 40px;
z-index: 40; /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
}
button:focus {
outline: none;
}
.buttons svg {
width: 30px;
}
.buttons .rightBtn {
margin-left: 15px;
}
.buttons .leftBtn {
margin-right: 15px;
}
.warning-rotate {
background-color: #131417;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 30;
transition: all .2s linear;
transform: scale(0);
} /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
.warning-rotate h1 {
text-align: center;
font-size: x-large;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.profile {
width: 65px;
height: 65px;
position: fixed;
bottom: 20px;
right: 20px;
background-image: url(https://mohamedelghandour.github.io/Snake/img/profile.png); /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
border-radius: 50%;
background-size: 150%;
background-repeat: no-repeat;
background-position: 45% 2%;
z-index: 9999;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
font-family: 'Courier Prime', monospace;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 15%;
right: 114%;
opacity: 0;
transition: opacity 0.5s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 39%;
left: 104%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent; /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
transform: rotate(-90deg);
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
Add JavaScript Code
The role of JavaScript programming code in creating any game is always more. In this game too, I have given the highest priority to JavaScript programming code.
In this game, all the activity and movement of the snake are all controlled by JavaScript programming code. You copy your JavaScript programming code then paste it in the structure above where add javascript is written. Then save your HTML file.
(function snakeGame() {
const game = document.querySelector('.container'),
pexelNumber = (625 / 25) * (400 / 25);
var arr = [],
gameIsWorked = true;
var arrSnakeBody = [],
newNum,
indexScore = 0; /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
//create Pexel
for (var index = 0; index < pexelNumber; index++) {
var pexel = document.createElement("div");
pexel.setAttribute('number', index);
if (index % 2 == 0) // even
pexel.classList.add('box', 'even');
else // odd
pexel.classList.add('box', 'odd');
arr.push(pexel);
game.appendChild(pexel);
}
//create snake
var snake = document.createElement("div"),
randomArrItem = Math.round(Math.random() * (arr.length));
snake.classList.add('snake_Head');
function createSnake(snake, randomArrItem) {
snake.setAttribute("number", randomArrItem);
snake.classList.add('snake_Box');
game.appendChild(snake);
snake.style.left = ` ${arr[snake.getAttribute("number")].offsetLeft}px`;
snake.style.top = ` ${arr[snake.getAttribute("number")].offsetTop}px`;
return snake; /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
}
createSnake(snake, randomArrItem);
//move Snake
window.addEventListener('keydown', function (e) {
snakeMove(e);
});
// Class Interval
function Interval(fn, time) {
var timer = false;
this.start = function () {
if (!this.isRunning())
timer = setInterval(fn, time);
};
this.stop = function () {
clearInterval(timer);
timer = false;
};
this.isRunning = function () {
return timer !== false;
};
}
var arrowValRFN = new Interval(arrowValR, 250),
arrowValLFN = new Interval(arrowValL, 250), /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
arrowValUFN = new Interval(arrowValU, 250),
arrowValDFN = new Interval(arrowValD, 250),
arrFN = [arrowValRFN, arrowValLFN, arrowValUFN, arrowValDFN];
// create fruit
var fruit = document.createElement("img"),
testFruit = true;
function createFruit() {
var randomfruit = Math.round(Math.random() * (arr.length));
fruit.classList.add('fruit');
while (testFruit) {
if (arrSnakeBody.length) {
if (randomfruit == randomArrItem) {
testFruit = true;
randomfruit = Math.round(Math.random() * (arr.length));
} else {
testFruit = false;
}
arrSnakeBody.forEach(element => {
testFruit = false;
if (parseInt(element.getAttribute("number")) == randomfruit) {
testFruit = true;
randomfruit = Math.round(Math.random() * (arr.length));
} /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
});
} else {
if (randomfruit == randomArrItem) {
testFruit = true;
randomfruit = Math.round(Math.random() * (arr.length));
} else {
testFruit = false;
}
}
}
fruit.setAttribute("number", randomfruit);
var randomFruitImg = Math.round(Math.random() * 8) + 1,
imgSrc = `img/${randomFruitImg}.png`;
fruit.setAttribute("src", imgSrc);
fruit.setAttribute("src", "https://mohamedelghandour.github.io/Snake/" + imgSrc);
game.appendChild(fruit);
fruit.style.left = ` ${arr[fruit.getAttribute("number")].offsetLeft}px`;
fruit.style.top = ` ${arr[fruit.getAttribute("number")].offsetTop}px`;
}
createFruit();
function snakeMove(e) { /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
if (gameIsWorked) {
document.querySelector('.background-sound').play();
document.querySelector('.background-sound').volume = 0.1;
if (arrSnakeBody.length) {
switch (e.which) {
case 39: // Arrow Right
arrowRightProcessCaseOne();
break;
case 37: // Arrow Left
arrowLeftProcessCaseOne();
break;
case 38: // Arrow Up
arrowUpProcessCaseOne();
break;
case 40: // Arrow Down
arrowDownProcessCaseOne();
break;
default:
break;
};
} else {
switch (e.which) {
case 39: // Arrow Right
arrowRightProcessCaseTwo();
break; /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
case 37: // Arrow Left
arrowLeftProcessCaseTwo();
break;
case 38: // Arrow Up
arrowUpProcessCaseTwo();
break;
case 40: // Arrow Down
arrowDownProcessCaseTwo();
break;
default:
break;
};
}
}
}
document.querySelectorAll('.btn').forEach(element => {
element.addEventListener('click', function () {
if (gameIsWorked) {
document.querySelector('.background-sound').play();
document.querySelector('.background-sound').volume = 0.1;
if (arrSnakeBody.length) {
switch (parseInt(element.getAttribute('data-num'))) { /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
case 3: // Arrow Right
arrowRightProcessCaseOne();
break;
case 2: // Arrow Left
arrowLeftProcessCaseOne();
break;
case 1: // Arrow Up
arrowUpProcessCaseOne();
break;
case 4: // Arrow Down
arrowDownProcessCaseOne();
break;
default:
break;
};
} else {
switch (parseInt(element.getAttribute('data-num'))) {
case 3: // Arrow Right
arrowRightProcessCaseTwo();
break; /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
case 2: // Arrow Left
arrowLeftProcessCaseTwo();
break;
case 1: // Arrow Up
arrowUpProcessCaseTwo();
break;
case 4: // Arrow Down
arrowDownProcessCaseTwo();
break;
default:
break;
};
}
}
});
});
function arrowRightProcessCaseOne() {
if (!(arrowValRFN.isRunning())) {
if (arrowValLFN.isRunning()) {
console.log('Dimensions cannot be reversed');
} else {
arrFN.forEach(element => {
if (element.isRunning()) /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
element.stop();
});
arrowValR();
arrowValRFN.start();
}
}
}
function arrowLeftProcessCaseOne() {
if (!(arrowValLFN.isRunning())) {
if (arrowValRFN.isRunning()) {
console.log('Dimensions cannot be reversed');
} else {
arrFN.forEach(element => {
if (element.isRunning())
element.stop();
});
arrowValL();
arrowValLFN.start();
}
}
} /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
function arrowUpProcessCaseOne() {
if (!(arrowValUFN.isRunning())) {
if (arrowValDFN.isRunning()) {
console.log('Dimensions cannot be reversed');
} else {
arrFN.forEach(element => {
if (element.isRunning())
element.stop();
});
arrowValU();
arrowValUFN.start();
}
}
}
function arrowDownProcessCaseOne() {
if (!(arrowValDFN.isRunning())) {
if (arrowValUFN.isRunning()) {
console.log('Dimensions cannot be reversed');
} else {
arrFN.forEach(element => {
if (element.isRunning())
element.stop();
});
arrowValD(); /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
arrowValDFN.start();
}
}
}
function arrowRightProcessCaseTwo() {
if (!(arrowValRFN.isRunning())) {
arrFN.forEach(element => {
if (element.isRunning())
element.stop();
});
arrowValR();
arrowValRFN.start();
}
}
function arrowLeftProcessCaseTwo() {
if (!(arrowValLFN.isRunning())) {
arrFN.forEach(element => {
if (element.isRunning())
element.stop(); /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
});
arrowValL();
arrowValLFN.start();
}
}
function arrowUpProcessCaseTwo() {
if (!(arrowValUFN.isRunning())) {
arrFN.forEach(element => {
if (element.isRunning())
element.stop();
});
arrowValU();
arrowValUFN.start();
}
}
function arrowDownProcessCaseTwo() {
if (!(arrowValDFN.isRunning())) {
arrFN.forEach(element => {
if (element.isRunning())
element.stop();
}); /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
arrowValD();
arrowValDFN.start();
}
}
// create the snake body
// function setCookie(name, value, expires) {
// document.cookie = name + "=" + value + ((expires == null) ? "" : ";expires=" + expires.toGMTString())
// }
// function getCookie(name) {
// const value = `; ${document.cookie}`;
// const parts = value.split(`; ${name}=`);
// if (parts.length === 2) return parts.pop().split(';').shift();
// }
// if (getCookie("best_Score_Number") == undefined) {
// setCookie("best_Score_Number", indexScore);
// document.querySelector('.best_Score_Number').innerText = getCookie("best_Score_Number");
// } else {
// document.querySelector('.best_Score_Number').innerText = getCookie("best_Score_Number");
// } /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
if (localStorage.getItem("best_Score_Number") == undefined) {
localStorage.setItem("best_Score_Number", indexScore);
document.querySelector('.best_Score_Number').innerText = localStorage.getItem("best_Score_Number");
document.querySelector('.score_Number').innerText = indexScore;
} else {
document.querySelector('.best_Score_Number').innerText = localStorage.getItem("best_Score_Number");
document.querySelector('.score_Number').innerText = indexScore; /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
}
function moved(number) {
if (arrSnakeBody.length) {
arrSnakeBody.forEach(element => {
if (parseInt(element.getAttribute('number')) == number) {
console.log('LOSE');
gameIsWorked = false;
console.log('from function moved(number)');
fail();
}
});
}
snake.style.left = ` ${arr[parseInt(snake.getAttribute("number"))].offsetLeft}px`;
snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;
if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) {
document.querySelector('.eat-sound').play();
createFruit();
var snakeBody = document.createElement("div"),
snakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number"))); /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
arrSnakeBody.push(snakeBodyItem);
document.querySelector('.score_Number').innerText = ++indexScore;
// if (parseInt(getCookie("best_Score_Number")) < parseInt(document.querySelector('.score_Number').innerText)) {
// setCookie("best_Score_Number", indexScore);
// document.querySelector('.best_Score_Number').innerText = getCookie("best_Score_Number");
// }
if (parseInt(localStorage.getItem("best_Score_Number")) < parseInt(document.querySelector('.score_Number').innerText)) {
localStorage.setItem("best_Score_Number", indexScore);
document.querySelector('.best_Score_Number').innerText = localStorage.getItem("best_Score_Number");
}
}
if (arrSnakeBody.length) {
newNum = snakeBodyMove(number, arrSnakeBody[0]);
}
if (arrSnakeBody.length > 1) {
for (var index = 1; index < arrSnakeBody.length; index++) {
newNum = snakeBodyMove(newNum, arrSnakeBody[index]);
}
}
}
function snakeBodyMove(number, tail) {
tail.style.left = ` ${arr[number].offsetLeft}px`;
tail.style.top = ` ${arr[number].offsetTop}px`;
var lastNum = parseInt(tail.getAttribute("number"));
tail.setAttribute("number", number); /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
return lastNum;
}
const onEndBtnClicK = (e) => {
document.querySelector('.end').style.transform = 'scale(0)';
document.querySelector('.container').remove();
var gameEle = document.createElement('div');
var snakeEle = document.querySelector('.game');
gameEle.classList.add('container');
snakeEle.appendChild(gameEle);
snakeGame();
document.querySelector('.end').removeEventListener("click", onEndBtnClicK);
}
const onEndKeyClick = (e) => {
if (e.which == 13) {
document.querySelector('.end').style.transform = 'scale(0)';
document.querySelector('.container').remove();
var gameEle = document.createElement('div');
var snakeEle = document.querySelector('.game'); /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
gameEle.classList.add('container');
snakeEle.appendChild(gameEle);
snakeGame();
window.removeEventListener("keydown", onEndKeyClick);
}
}
function fail() {
document.querySelector('.end').style.transform = 'scale(1)';
document.querySelector('.background-sound').pause();
document.querySelector('.die-sound').play();
document.querySelector('.end').addEventListener("click", onEndBtnClicK);
window.addEventListener("keydown", onEndKeyClick);
arrFN.forEach(element => {
if (element.isRunning())
element.stop();
});
}
function arrowValR() {
if ((parseInt(snake.getAttribute("number")) + 1) % 25 == 0) {
console.log('LOSE');
gameIsWorked = false;
fail();
console.log('from function arrowValR()');
} else {
var lastNum = parseInt(snake.getAttribute("number"));
snake.setAttribute("number", parseInt(snake.getAttribute("number")) + 1);
moved(lastNum);
} /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
};
function arrowValL() {
if ((parseInt(snake.getAttribute("number"))) % 25 == 0) {
console.log('LOSE');
gameIsWorked = false;
fail();
console.log('from function arrowValL()');
} else {
var lastNum = parseInt(snake.getAttribute("number"));
snake.setAttribute("number", parseInt(snake.getAttribute("number")) - 1);
moved(lastNum);
}
};
function arrowValU() {
if (parseInt(snake.getAttribute("number")) - 25 < 0) {
console.log('LOSE');
gameIsWorked = false;
fail();
console.log('from function arrowValU()'); /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
} else {
var lastNum = parseInt(snake.getAttribute("number"));
snake.setAttribute("number", parseInt(snake.getAttribute("number")) - 25);
moved(lastNum);
}
};
function arrowValD() {
if (parseInt(snake.getAttribute("number")) + 25 > 399) {
console.log('LOSE');
gameIsWorked = false;
fail();
console.log('from function arrowValD()');
} else {
var lastNum = parseInt(snake.getAttribute("number"));
snake.setAttribute("number", parseInt(snake.getAttribute("number")) + 25);
moved(lastNum);
} /*bkColor {width: 100%;height: 100%;background-color:rgba(19, 20,ition: absolute;top: left: overflow: hidden;.fail imgsnake.style.left = ` ${arr[parseIn(snake.getAttribute("number"))].offsetLeft}px`;snake.style.top = ` ${arr[parseInt(snake.getAttribute("number"))].offsetTop}px`;if (arr[parseInt(snake.getAttribute("number"))] == arr[parseInt(fruit.getAttribute("number"))]) document.querySelector('.eat-sound').play()createFruvar snakeBody = document.createElement("dsnakeBodyItem = createSnake(snakeBody, parseInt(snake.getAttribute("number")));arrSnakeBody.push(snakeBodocument.querySelector('.score_Number').innerText = ++indexScore;*/
};
}())
I have shown here very easily and step by step how you make it. If you encounter any problems while making this snake game, you can definitely comment. Hope you can easily and nicely understand how I made snake game using only HTML, CSS, and JavaScript programming code.
❤Sharing is caring❤
