摘要：貪吃蛇源代碼地址在手機(jī)瀏覽器上的顯示效果貪吃蛇的基本框架首先確定蛇的移動(dòng)區(qū)域，由一組標(biāo)簽構(gòu)成，給予一個(gè)寬高，就組成了蛇的活動(dòng)區(qū)域。以最小寬度為基準(zhǔn)貪吃蛇的框架補(bǔ)全在里添加要?jiǎng)?chuàng)建個(gè)來作為貪吃蛇的活動(dòng)場(chǎng)所。

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

在手機(jī)瀏覽器上的顯示效果

首先確定蛇的移動(dòng)區(qū)域，由一組"ul"標(biāo)簽構(gòu)成，給予"ul"一個(gè)寬高，就組成了蛇的活動(dòng)區(qū)域。"li"標(biāo)簽構(gòu)成了蛇的身體和行進(jìn)路線，以及蛇的食物，由不同的色塊進(jìn)行區(qū)分。"li"標(biāo)簽是在js文件里進(jìn)行添加的，這個(gè)后面再提。

接下來設(shè)置游戲的難度選項(xiàng)，用一組"select"標(biāo)簽和三個(gè)"option"標(biāo)簽構(gòu)成了游戲的三個(gè)不同的難度等級(jí)。游戲的分?jǐn)?shù)記錄以及開始、暫停等按鍵我們也一并設(shè)置。

    
最高分：0
    
當(dāng)前得分：0


    簡(jiǎn)單
    中等
    困難

為了適配移動(dòng)端各種屏幕分辨率，我們?cè)?css 里使用媒體查詢。

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

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

貪吃蛇的框架補(bǔ)全

在"ul"里添加"li"要?jiǎng)?chuàng)建400個(gè)"li"來作為貪吃蛇的活動(dòng)場(chǎng)所。使用for循環(huán)將"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//顯示坐標(biāo)
        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"}

初始化蛇的狀態(tài)

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
初始化蛇的食物。食物的位置隨機(jī)生成的，我們還要保證食物生成的時(shí)候不會(huì)出現(xiàn)在蛇的身體內(nèi)，就需要進(jìn)行判定.
function isinSnake(index){
    for(var i=0;i
設(shè)置蛇的運(yùn)動(dòng)
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
控制蛇的運(yùn)動(dòng)方向。
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);
為了能在移動(dòng)設(shè)備上運(yùn)行，我們還需要引入‘touch.js’，添加滑動(dòng)操作
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;
        }
    }
}
控制蛇的運(yùn)動(dòng)方向，以及蛇吃食物
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();
    }
}
蛇的碰撞檢測(cè)，包括邊界檢測(cè)和自身碰撞檢測(cè)
function snakeMove(){
    var snakeHead = snake.slice(-1)[0].pos;
    //墻的碰撞檢測(cè)
    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){//左邊界檢測(cè)
        alert("GAME OVER!!!");
        location.reload();
        return false;
    }

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