Craving Snakes

(https://wujian1994.github.io/...)

Part HTML

First we need an HTML page.

<div class="container">
    <ul class="oul" id="oul"></ul>
</div>
<div class="oper">
    <p style="color:blue">Historically highest score:<span id="zuigao" style="color:#000">0</span></p>
    <p style="color:blue">Current score:<span id="fenshu" style="color:red">5</span></p>
    <p><select id="level">
        <option value="300">simple</option>
        <option value="200" selected>intermediate</option>
        <option value="100">More difficult</option>
    </select></p>
    <p><input type="button" value="start" id="btnStart"/></p>
    <p><input type="button" value="suspend" id="btnsuspend"/></p>
</div>

Part css

Next we need a css page. I did it with sass.

.container{
    width: 3.2rem;
    height: 3.2rem;
    float: left;
    ul{
        width: 3.16rem;
        height: 3.16rem;
        border: 2px solid #FF9797;
        li{
            list-style: none;
            width: 0.158rem;
            height: 0.158rem;
            float: left;
            border-radius: 10px;
        }
    }
}

The css code above is ul big box

.oper{
    font-size: 0.1rem;
    padding: 0.2rem 0;
    width: 3.2rem;
    float: left;
    #level{
        width: 0.5rem;
        height: 0.2rem;
    }
    input{
        margin-top: 0.1rem;
        width: 0.5rem;
        border-radius: 6px;
        height: 0.2rem;
        color: #fff;
        background: green;
        border: none;
        outline: none;
        font-weight:bold;
    }
    input:active{
        background:#93FF93;
    }
}

Mobile Configuration

@media screen and (min-width:320px){
    html{
        font-size: 100px;
    }
}
@media screen and (min-width:360px){
    html{
        font-size: 112px;
    }
}
@media screen and (min-width:375px){
    html{
        font-size: 117px;
    }
}
@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;
    }
}
@media screen and (min-width:640px){
    html{
        font-size: 200px;
    }.container{margin: 0 auto;}
}
@media screen and (max-width:640px){
    html{
        font-size: 200px;
    }
}

Part js

Now we need the js page to do the effect

First we need to get the labels we need.

var oul = document.getElementById("oul");
var btnStart = document.getElementById("btnStart");
var btnsuspend = document.getElementById("btnsuspend");
var bjyy = document.getElementById("bjyy");
var siwang = document.getElementById("siwang");
var siwu = document.getElementById("siwu");
var zuigao = document.getElementById("zuigao");
var fenshu = document.getElementById("fenshu");
var level = document.getElementById("level");

We need to initialize every li under ul

//Initialization Lattice
function init(){
    var pianduan = document.createDocumentFragment();
    for(var i = 0 ; i < 400 ; i++){
        var oli = document.createElement("li");
        pianduan.appendChild(oli); 
    }
    oul.appendChild(pianduan);
    lis = oul.children;
}

We need to determine how many boxes are initially displayed and add random colors.

var snake= [];
for(var i=0 ; i<5 ; i++){
    snake.push({pos:i , color:randColor()})
}

//Random color
function randColor(){
    return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";
}
//Five grids before initialization to change background color
function initSnake(){
    for(var i=0,l=snake.length ; i<l ; i++){
        lis[snake[i].pos].style.background=snake[i].color; 
    }
}

Then we need to initialize a food.

//Index of Food
var food = {pos:0,color:"yellow"};

//Generate food
function initFood(){
    var index = Math.floor(Math.random()*400);
    while(isInSnake(index)){
        index = Math.floor(Math.random()*400);
    }
    food = {pos:index,color:randColor()};
    lis[food.pos].style.background=food.color;
}

Judging where food can't be found in snakes

//Judging where snakes are not present in food
function isInSnake(index){
    for(var i=0,l=snake.length ; i<l ; i++){
        if(snake[i].pos == index){
            return true;
            break;
        }
    }
    return false;
}

When we let the snake move, every step forward, the last one will turn white.

var shewei = snake.slice(0,1)[0].pos;
lis[shewei].style.background = "#fff";
for(var i=0 , l=snake.length ; i<l-1 ; i++){
    snake[i].pos = snake[i+1].pos;
}
shetou = snake[l-1].pos

Then after we eat the food, we add up all the food we eat.

//Collision Detection of Snakes Eating Food
if(shetou == food.pos){
    //Put food in front of the array
    snake.unshift({pos:shewei,color:food.color});
    //Music effects
    siwu.play();
    //Fraction
    fenshu.innerHTML = snake.length;
    //Create new food
    initFood();
}

Next we make snakes collide with walls.

var direction = 39;//Direction 37 left key 38 upper key 39 right key 40 lower key
//Number
var geshu = 20;

//Snakes run
var shetou = snake.slice(-1)[0].pos;
//On Collision Detection of Wall
if((shetou+1)%geshu == 0 && direction == 39){
    death()    
}else if(shetou>=(400-geshu) && direction == 40){
    death()
}else if((shetou < geshu) && direction == 38){
   death()
}else if(shetou%geshu == 0 && direction == 37){
   death()
}

Then we check whether we hit ourselves or not.

//Check if you eat yourself
for(var i=0 , l=snake.length ; i<l-1 ; i++){
    if(snake[i].pos == shetou){
        siwang.play();
        alert("You're self-destructive. The game's over!");
        location.reload();
        break;
    }
}

Now let's control the direction.

if(direction == 40){//down
    snake[l-1].pos = snake[l-1].pos+geshu;
}else if(direction == 37){//Towards the left
    snake[l-1].pos = snake[l-1].pos-1;
}else if(direction == 39){//Towards the right
    snake[l-1].pos = snake[l-1].pos+1;
}else if(direction == 38){//Upward
    snake[l-1].pos = snake[l-1].pos-geshu;
}
    
//Click-and-click events for documents
document.addEventListener("keydown" , function(e){
    e=e || window.event;
    //Get what keys are pressed
    switch(e.keyCode){
        //Left key
        case 37:{
            if(direction == 39)return false;
            direction = e.keyCode;
            break;
        }
        //Upper key
        case 38:{
            if(direction == 40)return false;
            direction = e.keyCode;
            break;
        }
        //Right click
        case 39:{
            if(direction == 37)return false;
            direction = e.keyCode;
            break;
        } 
        //Lower key
        case 40:{
            if(direction == 38)return false;
            direction = e.keyCode;
            break;
        }
    }
} , false)

Call the death function if it hits the wall and itself

//Death function
function death(){
    alert("You bleed with your head broken, the game ended!");
    //location.href=location.href;
    location.reload();
}

Then let's start the game and pause the game.

var timer = null;
//Start the game
btnStart.onclick = function(){
    clearInterval(timer);
    timer =  setInterval(yundong,shudu);

    //Background music begins
    bjyy.play();
}
    //Pause game
btnsuspend.onclick = function(){
    clearInterval(timer);
}

Now let's set the difficulty of the game.

//Serpent's reading
var shudu = 100;
//Setup difficulty
shudu = level.value;

Keep up with what we need to do with the highest score in history and the current score.

//Get the length of the snake
//Fraction
fenshu.innerHTML = snake.length;
//Historically highest score
var score = localStorage.getItem("score")||0;

//Fraction
fenshu.innerHTML = snake.length;
     
var changdu = snake.length;
//Historically highest score
var score = localStorage.getItem("score")||0;
if(changdu > score){
    localStorage.setItem("score" , changdu);
}

Finally, we do mobile phone effects, up and down, left and right sliding

function hua(e){
        //Get what keys are pressed
        switch(e){
            //Left key
            case 37:{
                if(direction == 39)return false;
                direction = e;
                break;
            }
            //Upper key
            case 38:{
                if(direction == 40)return false;
                direction = e;
                break;
            }
            //Right click
            case 39:{
                if(direction == 37)return false;
                direction = e;
                break;
            } 
            //Lower key
            case 40:{
                if(direction == 38)return false;
                direction = e;
                break;
            }
        }
    }

    //Position change

    //Open slide
    hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
    hammertime
        .on('swipeleft', logEventType1)
        .on('swiperight', logEventType3)
        .on('swipeup',logEventType2)
        .on('swipedown', logEventType4);

    function logEventType1() {
        hua(37);
    }
    function logEventType2() {
        hua(38);
    }
    function logEventType3() {
        hua(39);
    }
    function logEventType4() {
        hua(40);
    }