摘要：貪吃蛇源代碼地址在手機瀏覽器上的顯示效果貪吃蛇的基本框架首先確定蛇的移動區域，由一組標簽構成，給予一個寬高，就組成了蛇的活動區域。以最小寬度為基準貪吃蛇的框架補全在里添加要創建個來作為貪吃蛇的活動場所。

源代碼地址：https://github.com/jiaoshibo/...

在手機瀏覽器上的顯示效果

首先確定蛇的移動區域，由一組"ul"標簽構成，給予"ul"一個寬高，就組成了蛇的活動區域。"li"標簽構成了蛇的身體和行進路線，以及蛇的食物，由不同的色塊進行區分。"li"標簽是在js文件里進行添加的，這個后面再提。

接下來設置游戲的難度選項，用一組"select"標簽和三個"option"標簽構成了游戲的三個不同的難度等級。游戲的分數記錄以及開始、暫停等按鍵我們也一并設置。

    
最高分：0
    
當前得分：0


    簡單
    中等
    困難

為了適配移動端各種屏幕分辨率，我們在 css 里使用媒體查詢。

@media screen and (min-width: 320px) {
    html {
        font-size: 100px;
    }
}

@media screen and (min-width: 360px) {
    html {
        font-size: 112px;
    }
}
/* 以最小寬度320px為基準 */
ul{
    width: 3.18rem;
    height: 3.18rem;
    border: 0.01rem solid #8312D5;
}
li{
    width: 0.159rem;
    height: 0.159rem;
    float: left;
}

貪吃蛇的框架補全

在"ul"里添加"li"要創建400個"li"來作為貪吃蛇的活動場所。使用for循環將"li"添加到"ul"中

var lis=[];
function initSpace(){
    var frag=document.createDocumentFragment();
    for(var i=0;i<400;i++){
        var lidom=document.createElement("li");
        lidom.innerHTML=i//顯示坐標
        ulBox.appendChild(lidom);
    }
    ulBox.appendChild(frag)
    lis=ulBox.children
}

下面是效果

初始化蛇的位置以及蛇的食物

var snake=[{pos:0,color:"#666"},{pos:1,color:"blue"},{pos:2,color:"green"},{pos:3,color:"red"},{pos:4,color:"#82286c"}]

var food={pos:0,color:"red"}

初始化蛇的狀態

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

function initSnake(){
    for(var i=0;i
初始化蛇的食物。食物的位置隨機生成的，我們還要保證食物生成的時候不會出現在蛇的身體內，就需要進行判定.
function isinSnake(index){
    for(var i=0;i
設置蛇的運動
function snakeMove(){
    var snakeHead = snake.slice(-1)[0].pos;//確定蛇頭的位置
    var sankeTail = snake.slice(0,1)[0].pos;//蛇尾
    lis[snakeTail].style.backgroundColor = "#fff";
    for(var i=0,l=snake.length;i
控制蛇的運動方向。
var fangxiang = 39 //39 right;40 down;37 left; 38 up;
//鍵位的綁定
document.addEventListener("keydown",function(a){
    a = a||window.event;
    switch(a.keyCode){
        case 37:{
            //left
            if(fangxiang==39)return false;
            fangxiang=a.keyCode;
            break;
            
        }
        case 38:{
            //up
            if(fangxiang==40)return false;
            fangxiang=a.keyCode;
            break;
        }
        case 39:{
            //right
            if(fangxiang==37)return false;
            fangxiang=a.keyCode;
            break;
        }
        case 40:{
            //down
            if(fangxiang==38)return false;
            fangxiang=a.keyCode;
            break;
        }
    }
},false);
為了能在移動設備上運行，我們還需要引入‘touch.js’，添加滑動操作
box.touch({
    swipeDown:function(){
       sw(40);
    },
    swipeLeft:function(){
       sw(37);
    },
    swipeUp:function(){
        sw(38);
    },
    swipeRight:function(){
        sw(39)
    }
})

function sw(e){
    switch(e){
        case 40:{
            if(fangxiang==38)return false;
            fangxiang=e;
            break;
        }
        case 37:{
            if(fangxiang==39)return false;
            fangxiang=e;
            break;
        }
        case 38:{
            if(fangxiang==40)return false;
            fangxiang=e;
            break;
        }
        case 39:{
            if(fangxiang==37)return false;
            fangxiang=e;
            break;
        }
    }
}
控制蛇的運動方向，以及蛇吃食物
function snakeMove(){
     if(fangxiang==40){//down
        snake[l-1].pos=snake[l-1].pos+20
    }else if(fangxiang==37){//left
        snake[l-1].pos=snake[l-1].pos-1
    }else if(fangxiang==38){//up
        snake[l-1].pos=snake[l-1].pos-20
    }else if(fangxiang==39){//right
        snake[l-1].pos=snake[l-1].pos+1
    }
    snakeHead=snake[l-1].pos;

    if(snakeHead==food.pos){
        snake.unshift({pos:snakeTail,color:food.color});
        initFood();
    }
}
蛇的碰撞檢測，包括邊界檢測和自身碰撞檢測
function snakeMove(){
    var snakeHead = snake.slice(-1)[0].pos;
    //墻的碰撞檢測
    if((snakeHead+1)%20==0&&fangxiang==39){//右邊界的判斷
        alert("GAME OVER!!!");
        location.reload();
        return false;
    }else if((snakeHead+20)>399&&fangxiang==40){//下邊界的判斷
        alert("GAME OVER!!!");
        location.reload();
        return false;
    }else if(snakeHead<20&&fangxiang==38){//上邊界的判斷
        alert("GAME OVER!!!");
        location.reload();
        return false;
    }else if(snakeHead%20==0&&fangxiang==37){//左邊界檢測
        alert("GAME OVER!!!");
        location.reload();
        return false;
    }

    //自身碰撞檢測
    for(var i=0,l=snake.length;i
掃尾工作
分數的計算。蛇每次吃食物就加一份，gameover的時候計算最高分
// 初始化最高分
var score = localStorage.getItem("score")||0;
max.innerHTML=score;
// 最高分
var l=sanke.length;
if((l-5)>score){
    localStorage.setItem("score",l-5);
}
設置游戲難度。利用‘option’的value值來控制游戲的難度
簡單
中等
困難
初始化速度為500
var speed = 500;
按下開始按鈕啟動一個定時器，蛇就可以自動往前運動了。
var timer=null
start.onclick=function(){//開始游戲
    //難度等級
    speed=level.value;
    //蛇的運動
    clearInterval(timer);
    timer=setInterval(snakeMove,speed);
    //背景音樂
    bgm.play();
}
timeOut.onclick=function(){//暫停游戲
    clearInterval(timer);
}
就醬，我們的貪吃蛇小游戲就編輯完成啦。還有游戲的BGM，大家可以找些素材自行添加哦。