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

贪吃蛇

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

• 在手机浏览器上的显示效果

贪吃蛇的基本框架

首先确定蛇的移动区域，由一组'ul'标签构成，给予'ul'一个宽高，就组成了蛇的活动区域。'li'标签构成了蛇的身体和行进路线，以及蛇的食物，由不同的色块进行区分。'li'标签是在js文件里进行添加的，这个后面再提。

<div class="bigbox" id="box">
    <ul id="ulBox"></ul>
</div>

接下来设置游戏的难度选项，用一组"select"标签和三个"option"标签构成了游戏的三个不同的难度等级。游戏的分数记录以及开始、暂停等按键我们也一并设置。

<div class="pp">
    <p>最高分：<span id="max">0</span></p>
    <p>当前得分：<span id="now">0</span></p>
</div>
<select name="" id="level">
    <option value="">简单</option>
    <option value="">中等</option>
    <option value="">困难</option>
</select>
<input type="button" id="start" value="START">
<input type="button" id="timeOut" value="TIME OUT">

为了适配移动端各种屏幕分辨率，我们在 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<snake.length;i++){
        lis[snake[i].pos].style.backgroundColor=snake[i].color;
    }
}

初始化蛇的食物。食物的位置随机生成的，我们还要保证食物生成的时候不会出现在蛇的身体内，就需要进行判定.

function isinSnake(index){
    for(var i=0;i<snake.length;i++){
        if(snake[i].pos===index){
            return true;
            break;
        }
    }return false;
}

function initFood(){
    var index = Math.floor(Math.random()*400);
    //判定：如果 food 的值在 snake 的数组里，则直接生成一个新的随机值
    while(isinSnake(food)){
        index=Math.floor(Math.random()*400);
    }
    food={pos:index,color:randColor()};
    lis[food.pos].style.backgroundColor=food.color;
}

设置蛇的运动

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<l-1;i++){
        snake[i].pos=snake[i+1].pos;
    }
}

start.onclick=function(){
    snakeMove();
}
initSnake();

控制蛇的运动方向。

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<l-1;i++){
        if(snake[i].pos==snakeHead){
            alert("GAME OVER!!!");
            location.reload();
            return false;
        }
    }
}

扫尾工作

分数的计算。蛇每次吃食物就加一份，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值来控制游戏的难度

<option value="500">简单</option>
<option value="300">中等</option>
<option value="200">困难</option>

• 初始化速度为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，大家可以找些素材自行添加哦。