Making simple Snake game with js

First, let's analyze the composition of the whole page. As you can see, the game box is a box with many small squares. We can use ul and li tags to make snakes and food. On the right are two simple p tags, one select tag and two input tags. The code is as follows

<div class="box" id="box">
    <ul class="oul" id="oul">

    </ul>
</div>
<div class="box1" id="box1">
    <p>Best Historical Record:<span id="ls">0</span></p>
    <p >Current length:<span id="dqcd">0</span></p>
    <select id="level">
        <option value="300">primary</option>
        <option value="200">intermediate</option>
        <option value="100">More difficult</option>
    </select>
    <input type="button" id="btn1" value="start">
    <input type="button" id="btn2" value="suspend">
</div>
<audio src="mp3/bg.mp3" loop id="bgaudio"></audio>
        <audio src="mp3/go.wav" id="go"></audio>
        <audio src="mp3/chi.mp3" id="chi"></audio>
    <script type="text/javascript" src="zepto.min.js"></script>
    <script type="text/javascript" src="touch.js"></script>
    <script type="text/javascript" src="sss.js"></script>
    <!-- Introducing support libraries -->

Because we need a lot of small lattices, we will use the for loop in js to create li tags, which will reduce the amount of our code and reduce our workload. We will introduce the js code in detail, let's not talk about it now. Next, we need to add styles to html documents, because the code is relatively simple, so we can write styles wherever we want. The css code is as follows:

*{
    margin: 0;
    padding: 0;
}
input{
    outline: none;
    margin: auto;
    
}       
.box{
    width: 3.2rem;
    margin: auto;
    float: left;
}
.oul{
    width: 3.14rem;
    height: 3.14rem;
    border:0.03rem solid peru;
}
.oul li{
    list-style: none;
    width: 5%;
    height: 5%;
    float: left;
}
.box1{
    width: 2rem;
    height: 1rem;
    padding-top: 0.3rem;
    font-size: 0.2rem;
    margin: auto;
    float: left;
}
#level{
    width: 100%;
    height: 0.4rem;
}
#ls{
    color:paleturquoise;
    margin-left: 0.1rem;
}
#dqcd{
    color:paleturquoise;
    margin-left: 0.01rem;
}
#btn1{
    width: 50%;
    height:0.3rem;
    margin-left: 0.4rem;
    margin-top: 0.2rem;
    background: palegreen;
    color: #fff;
    
}
#btn2{
    width: 50%;
    height: 0.3rem;
    margin-left: 0.4rem;
    margin-top: 0.2rem;
    background: palegreen;
    color: #fff;
}

Because we need compatibility with mobile devices and pc devices, we need to add media query style before css, and use rem instead of px when using units.
The media query code is as follows:

@media screen and (min-width: 320px) {
    html {
      font-size: 100px; } }  
@media screen and (min-width: 360px) {
html {
    font-size: 113px; } }   
@media screen and (min-width: 375px) {
html {
    font-size: 117px; } }
@media screen and (min-width: 384px) {
html {
    font-size: 120px; } } 
@media screen and (min-width: 412px) {
html {
    font-size: 128px; } }
@media screen and (min-width: 414px) {
html {
    font-size: 129px; } }
@media screen and (min-width: 440px) {
html {
    font-size: 138px; } }
@media screen and (min-width: 480px) {
html {
    font-size: 150px; } }

Now that we've written all the basic styles above, let's edit the js code
Because we need compatibility with mobile devices, and most of today's mobile devices do not have keyboards, we need to introduce libraries to support finger strokes, such as bammer.js or touch.js. We use touch.js here.

Above, we didn't create li tags in html documents, so we need to create li tags in js, using for loops:

var oul = document.getElementById("oul"); 
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var bgaudio = document.getElementById("bgaudio");
var si = document.getElementById("go");
var chi = document.getElementById("chi");
var dqcd = document.getElementById("dqcd");
var ls = document.getElementById("ls");
var level = document.getElementById("level");
// First, we get the id of each tag, which will be used later. 
var ox = document.createDocumentFragment();
function ab (){
    for(var i = 0 ; i<400 ; i++){
        var oli = document.createElement("li")
        ox.appendChild(oli)
    }
}
ab();
oul.appendChild(ox);

If you don't see it intuitively, you can give the li tag a border for easy viewing. Since we need to see the index of each small grid, we add it in the loop (oli.innerHTML = i), and we can see the index value of each grid clearly.

After setting up the outside frame of the game, we started to build the body of the snake and the food of the snake. After each refresh, we will find that the color of snake body and food will change randomly, so we need to establish a function of random color, which can be called directly in each use.

function co (){
    return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"
}

Set up the snake body, the length of the snake body is five, so we initialize a variable, and then use the for loop to build it.

var snk = [];
snk = oul.children;
var snkbody = [];
var ox = document.createDocumentFragment();
for(var i=0;i<5;i++){
    snkbody.push({pos:i,color:co()})
}
// Create snake body
function cd (){
    for(var j=0,l=snkbody.length;j<l;j++){  
        snk[snkbody[j].pos].style.background=snkbody[j].color;   
    }      
}
cd(); 
// Add random colors to snakes

Then we build food for the snake, but we need to be careful that the food can't be initialized with the snake body, so we need the following code:

var food = [{pos:0,color:"red"}];
function isin (index){
    for(var j=0,l=snkbody.length;j<l;j++){
        if(snkbody[j].pos==index){
                return true;
            break;
        }    
    }
    return false;    
};
function snkfood (){
    var index = Math.floor(Math.random()*400);
    while(isin(index)){
        index = Math.floor(Math.random()*400);
    }
    food = {pos:index,color:co()}
    snk[index].style.background=food.color;
}
// If the food is covered by the snake body, it is randomly generated again to produce a food.
snkfood();

Next we need to get the snake moving.

var snkh = snkbody.slice(-1)[0].pos;
var snkw = snkbody.slice(0,1)[0].pos;
// Obtain the position of snakehead and snaketail
for(var k=0,l=snkbody.length;k<l-1;k++){
        snkbody[k].pos=snkbody[k+1].pos;
    }
snkh = snkbody[l-1].pos;
// The snake took a step forward

However, as we now find, although the snake will go, the color of the tail will not change, so we need to change the color of the tail.

snk[snkw].style.background=0;

If we need to change the direction of the snake, we need to be clear about our device. If it's a mobile device, we need to use finger sliding method. If it's a pc device, we need to identify the keys. So I used the method of getting body.width. If it's greater than 1024, it's identified as a pc terminal, otherwise it's a mobile terminal.

var bodywid = document.body.offsetWidth;
if(bodywid>1024){
    document.addEventListener("keydown",function(e){
        e=e||window.event;
        switch(e.keyCode){
            case 37:{
                //  left
                if(fxg==39)return false;
                fxg=e.keyCode;
                break;
            }
            case 38:{
                if(fxg==40)return false;
                fxg=e.keyCode;
                break;
                // up 
            }
            case 39:{
                if(fxg==37)return false;
                fxg=e.keyCode;
                break;
                // right   
            }
            case 40:{
                if(fxg==38)return false;
                fxg=e.keyCode;
                break;
                // down
            }
        }
    },false);
    // Identification key
}else{
    oul.touch({
        swipeLeft:function(){
            kkk(37)
        },
        swipeRight:function(){
            kkk(39)
        },
        swipeUp:function(){
            kkk(38)
        },
        swipeDown:function(){
            kkk(40)
        },
    });
    // Scratch the value of kkk to change the direction of the snake
    function kkk (e){
          switch(e){
            case 37:{
                //  left
                if(fxg==39)return false;
                fxg=e;
                break;
            }
            case 38:{
                if(fxg==40)return false;
                fxg=e;
                break;
                // up 
            }
            case 39:{
                if(fxg==37)return false;
                fxg=e;
                break;
                // right   
            }
            case 40:{
                if(fxg==38)return false;
                fxg=e;
                break;
                // down
            }
        }
    }
    // 39:Right 1:402:373:38
}
if(fxg==40){
        snkbody[l-1].pos=snkbody[l-1].pos+20;  
    }else if(fxg==37){
        snkbody[l-1].pos=snkbody[l-1].pos-1;
    }
    else if(fxg==38){
        snkbody[l-1].pos=snkbody[l-1].pos-20;
    }
    else if(fxg==39){
        snkbody[l-1].pos=snkbody[l-1].pos+1;
    }
// According to our index, down is + 20, up is - 20, left is - 1, right is + 1, so we can change the direction of the snake head after pressing the key.

Our snake can go now, and we want him to eat food.

if(snkh==food.pos){
    snkbody.unshift({pos:snkw,color:food.color});
    // Put food in snake tail
    snkfood();
    // Refresh the food again
    chi.play();
    // Play Food Sound
    var snkbodycd = snkbody.length-5;
    // Gain score
    dqcd.innerText=snkbodycd;   
    // Refresh the current score
}

When we play with snakes, we will die when we bump into walls, so we need to do some wall-bumping treatment.

// Our small grid border is 20, so we need to set up a number of variables globally.
var geshu = 20;
// Then, according to the index, we can find out the rules of small lattices at each border, and identify the direction of snake head, and deal with the wall impact.
var fxg = 39;
// Initialization direction is right
if((snkh+1)%geshu==0&&fxg==39){    
    sile();  
}
else if(snkh>=400-geshu&&fxg==40){    
    sile();   
}
else if(snkh%geshu==0&&fxg==37){
    sile();  
}
else if(snkh<geshu&&fxg==38){  
    sile();  
}

After we recognize the wall, we also need to recognize ourselves, so that when the snake hits itself, it will die.

for(var i =0,l=snkbody.length;i<l-1;i++){
        if(snkbody[i].pos==snkh){
            sile(); 
        }
    }
    cd();

So our Snake Eating game has been completed for the most part.
Here we will make the click button and pause button.

btn1.onclick=function(){
    sudu = level.value
    // set speed
    clearInterval(ddd)
    // Firstly, clear the timer to prevent multi-click timer collision
    ddd=setInterval(function(){
        fzhs ();
    },sudu) 
    // Loop the above Snake code into a code called fzhs
    bgaudio.play();  
    // Play background music
}
// Click Start
btn2.onclick=function(){
    clearInterval(ddd);
    // Clear timer
    bgaudio.pause();
    // Voice pause
}

After the snake dies, it also needs death sound effects, pop-up boxes and page refreshes.

function sile(){
    var l = snkbody.length-5;
    // Calculate how many snakes eat
    var score = localStorage.getItem("score")
    if(l>score){
        localStorage.setItem("score",l)
    }
    // If the current score is greater than the historical maximum score, we will set the historical maximum score to the current score.
    si.play();
    // Play Death Music
    alert("GameOver");
    // Pop up GameOver
    location.reload();
    //page refresh
    return false; 
}

We also need to set the highest score in history.

var score = localStorage.getItem("score")||0;
ls.innerHTML = score;

Such a snake-eating game is finished, you can also improve the style and js, and tell me, let's make progress together!!!

Finally, my github game is on offer. I hope you like it.
https://Smallmotor.github.io/...