Online Snake Game

Introduction
The game involves controlling a single block or snakehead by turning only left or right and up or down arrow key on keyboard by ninety degree until you manage to eat an fruets When you get the grout, the Snake grows an extra block or body segment.

Example: we are going to Step by Step Development of Online Snake Game with the Help of HTML, CSS and JavaScript.
Step 1. You have to create img folder and you can Download Number of images or background music file. Download Project Folder

Step 2. mKsnStyl.css

@media only screen and (max-width: 850px) {
    .game {
        transform: scale(.75);
    }
  }
  @media only screen and (max-width: 650px) {
    .warning-rotate {
        transform: scale(1) !important;
    }
    body, html {
        overflow: hidden;
    }
  }

.snake .details {
   width: 400px;
   margin: auto;
   padding: 20px 0;
}
.snake .details .new_Score {
    float: left;
}
.snake .details .best_Score {
    float: right;
}
.snake .game {
    width: 625px;
    height: 400px;
    background-color:#ffffff; /*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;
    
}
.snake .game .box.even {
    background-color: #155805;
}
.snake .game .box.odd {
    background-color: #155805;
}

.snake .game .snake_Box {
	background-color: yellow;
    position: absolute;
    width: 25px;
    height: 25px;
    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;
    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;
}

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

.warning-rotate h1 {
    text-align: center;
    font-size: x-large;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Step 3. mkSnkjavaScrip.js

(function snakeGame() {

//move MkSnake
    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),
        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 (arrMkSnakeBody.length) {
                if (randomfruit == randomArrItem) {
                    testFruit = true;
                    randomfruit = Math.round(Math.random() * (arr.length));
                } else {
                    testFruit = false;
                }
                arrMkSnakeBody.forEach(element => {
                    testFruit = false;
                    if (parseInt(element.getAttribute("number")) == randomfruit) {
                        testFruit = true;
                        randomfruit = Math.round(Math.random() * (arr.length));
                    }
                });
            } 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 = randomFruitImg+'.png';
        fruit.setAttribute("src", imgSrc);
        fruit.setAttribute("src", "img/" + imgSrc);
        game.appendChild(fruit);
        fruit.style.left = arr[fruit.getAttribute("number")].offsetLeft+'px';
        fruit.style.top =  arr[fruit.getAttribute("number")].offsetTop+'px';
    }
    createFruit();

}
        });
    });

// create the snake body

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

Step 4. Snack.html

<html>
<head>
<meta name="viewport"  charset="ISO-8859-1" content="width=device-width, initial-scale=1">
<link href="mKsnStyl.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
 <div class="snake">
        
        <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>
   
    <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="eat.ogg" type="audio/ogg">
            <source src="eat.wav" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        <audio class="die-sound" controls>
            <source src="gameover.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        <audio class="background-sound" controls loop>
            <source src="backgroundmusic.mp3" type="audio/ogg">
            Your browser does not support the audio element.
        </audio>
    </div>
 <script src="mkSnkjavaScrip.js"></script>
</body>
</html>

OUTPUT:

Download Game Project

Online Snake Game

No comments :

Post a Comment

OUR TECH-PROJECTS

DOWNLOAD ANY ONLINE VIDEOS

LABELS

Development Accessories

POPULAR POSTS