在手机或电脑浏览器上玩贪吃蛇

摘要：贪吃蛇源代码地址在手机浏览器上的显示效果贪吃蛇的基本框架首先确定蛇的移动区域，由一组标签构成，给予一个宽高，就组成了蛇的活动区域。以最小宽度为基准贪吃蛇的框架补全在里添加要创建个来作为贪吃蛇的活动场所。

源代码地址：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，大家可以找些素材自行添加哦。