DEV Community

loading...
Cover image for How To Create Snake Game Using HTML, CSS, and JavaScript

How To Create Snake Game Using HTML, CSS, and JavaScript

backlinkn profile image backlinkn ・23 min read

The snake game is a very old and popular game. You can create this snake game using only HTML, CSS, and JavaScript programming languages. In this article, I will help you in this task and try to explain step by step how it is possible to make a snake game using only a simple programming code. This game is completely professional and responsive. You can play this game on any device which means you can use it on all devices like mobile, computer, etc.

Alt Text




Some information about this Snake game

  • This game uses a lot of JavaScript programming code. You can use this game on all kinds of devices.
  • You can control the game with the help of a keyboard.
  • In this game case, there is a lot of food in a square box and a small snake tries to eat them. The more foods you eat, the bigger it will get. This way you can run the game and move forward in the game.
  • In the case of the game, the above will show your current score and the highest score. This means that if you have played before, its score is saved in the database of this game.
  • When you hit the four walls of the game you get out of the game. Then a pop-up box will open in front of you. Where "Game Over" will be written and music will continue to play.
  • Playing this game will play a kind of music in the back. You can delete or change that music if you want.

Hope you like this game and you want to learn how to make it. JavaScript programming code was used for this game. Some amount of HTML and some amount of CSS programming code have been used.

How To Make This Snake game

Below I have written the programming code and told you completely how you can make a professional snake game by adding those programming codes to your own project. I can safely say that in this article you will find the basic ideas of making games and you will learn how to make games. You can download all the source code needed to create this game by clicking on the download button above. You can also watch the live demo of the game by clicking on the demo button above.

<html>
<head>
     <style>
        Add CSS Code
     </style>

</head>
<body>
       Add Html Code
</body>
   <script>
       Add JavaScript Code
   </script>
</html>
Enter fullscreen mode Exit fullscreen mode

To make this game you copy the structure below and then paste it into any of your new HTML files. That structure has all the instructions on how to add the following three codes. You paste the codes accordingly.

Add HTML code to create this game structure

The following codes are HTML programming codes. I used a very small amount of HTML programming code to make this snake game. You copy the following code and then paste it 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>
        </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"> <!--                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/-->
                    <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>
            <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"><!--                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/-->
                    <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><!--                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/-->
                    </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>
            <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><!--                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/-->
                    <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>
    <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><!--                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/-->
            <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>
Enter fullscreen mode Exit fullscreen mode

Add CSS code to design this snake game

These codes are CSS programming codes. Some amount of CSS code has been used in this game. With the help of which the game has been made professional and responsive. As a result, it is effective for any device. You copy the following codes then paste them in the upper structure where add CSS code is written.

 /* 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;
}                                                                                                                                            /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
/* 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);
    }
  }                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
  @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;
   padding: 20px 0;
}
.snake .details .new_Score {
    float: left;
}                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
.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;
    position: relative;
}
.snake .game .box {
    width: 25px;
    height: 25px;
    float: left;
    position: relative;
                                                                                                                                               /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
}
.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;
    z-index: 2;
}
.snake .game .snake_Head {
    transition: all .1s linear;
}

.snake .game .fruit {
    position: absolute;                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
    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;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
    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;
}                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/

.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%;                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
    width: 40px;
    height: 40px;
    z-index: 40;
}
button:focus {
    outline: none;
}
.buttons svg {
    width: 30px;
}
.buttons .rightBtn {
    margin-left: 15px;
}
.buttons .leftBtn {
    margin-right: 15px;
}
                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
.warning-rotate {
    background-color: #131417;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 30;
    transition: all .2s linear;
    transform: scale(0);
}

.warning-rotate h1 {
    text-align: center;
    font-size: x-large;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/


.profile {
    width: 65px;
    height: 65px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-image: url(https://mohamedelghandour.github.io/Snake/img/profile.png);
    border-radius: 50%;
    background-size: 150%;
    background-repeat: no-repeat;
    background-position: 45% 2%;
    z-index: 9999;                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
}

/* 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;                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
    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;
    transform: rotate(-90deg);
  }
                                                                                                                                             /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
Enter fullscreen mode Exit fullscreen mode

Add JavaScript code to create the game

The following codes are JavaScript programming codes. This type of programming code is the most reliable for making any game. Java programming code has been used the most in this game. All control of the game is made with this code. Copy the code given below then paste the above structure where add javascript code is written here.

 (function snakeGame() {

    const game = document.querySelector('.container'),
        pexelNumber = (625 / 25) * (400 / 25);
    var arr = [],
        gameIsWorked = true;
    var arrSnakeBody = [],
        newNum,
        indexScore = 0;
    //create Pexel                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
    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);                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
        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;
    }
    createSnake(snake, randomArrItem);

    //move Snake
    window.addEventListener('keydown', function (e) {
        snakeMove(e);
    });

    // Class Interval
    function Interval(fn, time) {
        var timer = false;                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
        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),
        arrowValUFN = new Interval(arrowValU, 250),
        arrowValDFN = new Interval(arrowValD, 250),
        arrFN = [arrowValRFN, arrowValLFN, arrowValUFN, arrowValDFN];

    // create fruit                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
    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));
                    }
                });
            } else {
                if (randomfruit == randomArrItem) {                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
                    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) {
        if (gameIsWorked) {
            document.querySelector('.background-sound').play();
            document.querySelector('.background-sound').volume = 0.1;
            if (arrSnakeBody.length) {
                switch (e.which) {                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
                    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;                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
                    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) {                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
                document.querySelector('.background-sound').play();
                document.querySelector('.background-sound').volume = 0.1;
                if (arrSnakeBody.length) {
                    switch (parseInt(element.getAttribute('data-num'))) {
                        case 3: // Arrow Right
                            arrowRightProcessCaseOne();
                            break;
                        case 2: // Arrow Left
                            arrowLeftProcessCaseOne();
                            break;
                        case 1: // Arrow Up
                            arrowUpProcessCaseOne();
                            break;
                        case 4: // Arrow Down
                            arrowDownProcessCaseOne();
                            break;                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
                        default:
                            break;
                    };
                } else {
                    switch (parseInt(element.getAttribute('data-num'))) {
                        case 3: // Arrow Right
                            arrowRightProcessCaseTwo();
                            break;
                        case 2: // Arrow Left
                            arrowLeftProcessCaseTwo();
                            break;
                        case 1: // Arrow Up
                            arrowUpProcessCaseTwo();
                            break;
                        case 4: // Arrow Down
                            arrowDownProcessCaseTwo();                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
                            break;
                        default:
                            break;
                    };
                }

            }
        });
    });

    function arrowRightProcessCaseOne() {
        if (!(arrowValRFN.isRunning())) {
            if (arrowValLFN.isRunning()) {
                console.log('Dimensions cannot be reversed');
            } else {
                arrFN.forEach(element => {
                    if (element.isRunning())
                        element.stop();                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
                });
                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();
                });                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
                arrowValL();
                arrowValLFN.start();
            }
        }
    }
    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();
            }
        }
    }                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
    function arrowDownProcessCaseOne() {
        if (!(arrowValDFN.isRunning())) {
            if (arrowValUFN.isRunning()) {
                console.log('Dimensions cannot be reversed');
            } else {
                arrFN.forEach(element => {
                    if (element.isRunning())
                        element.stop();
                });
                arrowValD();
                arrowValDFN.start();
            }
        }
    }

    function arrowRightProcessCaseTwo() {
        if (!(arrowValRFN.isRunning())) {                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
            arrFN.forEach(element => {
                if (element.isRunning())
                    element.stop();
            });
            arrowValR();
            arrowValRFN.start();
        }
    }

    function arrowLeftProcessCaseTwo() {
        if (!(arrowValLFN.isRunning())) {
            arrFN.forEach(element => {
                if (element.isRunning())
                    element.stop();
            });
            arrowValL();
            arrowValLFN.start();                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
        }
    }

    function arrowUpProcessCaseTwo() {
        if (!(arrowValUFN.isRunning())) {
            arrFN.forEach(element => {
                if (element.isRunning())
                    element.stop();
            });
            arrowValU();
            arrowValUFN.start();
        }
    }

    function arrowDownProcessCaseTwo() {                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
        if (!(arrowValDFN.isRunning())) {
            arrFN.forEach(element => {
                if (element.isRunning())
                    element.stop();
            });
            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}`;                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
    //     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");
    // }

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

    function moved(number) {
        if (arrSnakeBody.length) {
            arrSnakeBody.forEach(element => {                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
                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")));
            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");
            }                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
        }
        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);
        return lastNum;
    }
    const onEndBtnClicK = (e) => {
        document.querySelector('.end').style.transform = 'scale(0)';                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
        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');
            gameEle.classList.add('container');
            snakeEle.appendChild(gameEle);
            snakeGame();
            window.removeEventListener("keydown", onEndKeyClick);
        }
    }
                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
    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 {                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
            var lastNum = parseInt(snake.getAttribute("number"));
            snake.setAttribute("number", parseInt(snake.getAttribute("number")) + 1);
            moved(lastNum);
        }
    };

    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);
        }
    };
                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
    function arrowValU() {
        if (parseInt(snake.getAttribute("number")) - 25 < 0) {
            console.log('LOSE');
            gameIsWorked = false;
            fail();
            console.log('from function arrowValU()');
        } 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;                                                                                                                                           /*snakeBodyMove(number, tail) {tail.style.left = ` ${arr[number].offsetLeft}px`;tail.style.top = ` ${arr[number].offsetTop}pxvar lastNum = parseIn(tail.gtAttribute("number"))tail.setAttribute("number", number);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);nakeGame();document.querySelector('.end').removeEventListener("click", onEndBtnClicK);*/
            fail();
            console.log('from function arrowValD()');
        } else {
            var lastNum = parseInt(snake.getAttribute("number"));
            snake.setAttribute("number", parseInt(snake.getAttribute("number")) + 25);
            moved(lastNum);
        }
    };
}())
Enter fullscreen mode Exit fullscreen mode

You can create this game by adding these three types of programming code. I have given above all the instructions on how to play the game. You can play and play the game by following this instruction. It is fully responsive so you can play the game on an Android phone. Hope you like it and you have made this snake game. If you encounter any problems while making this game, be sure to let me know in the comments.

     💬 Please comment and tell us how you like the game 💬
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide