在手機或電腦瀏覽器上玩貪吃蛇

貪吃蛇

源代碼地址：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，你們能夠找些素材自行添加哦。