摘要：貪吃蛇制作部分首先我們需要一個的頁面制作歷史最高分數當前分數簡單中級較難開始暫停部分緊接著我們需要一個的頁面我是用來做的上面的代碼是大盒子移動端的配置部分下面我們需要頁面來做效果首先我們要獲取

（https://wujian1994.github.io/...）

    



    
歷史最高分數：0
    
當前分數：5
    

        簡單
        中級
        較難
    
    

    

.container{
    width: 3.2rem;
    height: 3.2rem;
    float: left;
    ul{
        width: 3.16rem;
        height: 3.16rem;
        border: 2px solid #FF9797;
        li{
            list-style: none;
            width: 0.158rem;
            height: 0.158rem;
            float: left;
            border-radius: 10px;
        }
    }
}

上面的css代碼是ul大盒子

.oper{
    font-size: 0.1rem;
    padding: 0.2rem 0;
    width: 3.2rem;
    float: left;
    #level{
        width: 0.5rem;
        height: 0.2rem;
    }
    input{
        margin-top: 0.1rem;
        width: 0.5rem;
        border-radius: 6px;
        height: 0.2rem;
        color: #fff;
        background: green;
        border: none;
        outline: none;
        font-weight:bold;
    }
    input:active{
        background:#93FF93;
    }
}

移動端的配置

@media screen and (min-width:320px){
    html{
        font-size: 100px;
    }
}
@media screen and (min-width:360px){
    html{
        font-size: 112px;
    }
}
@media screen and (min-width:375px){
    html{
        font-size: 117px;
    }
}
@media screen and (min-width:412px){
    html{
        font-size: 128px;
    }
}
@media screen and (min-width:414px){
    html{
        font-size: 129px;
    }
}
@media screen and (min-width:440px){
    html{
        font-size: 138px;
    }
}
@media screen and (min-width:480px){
    html{
        font-size: 150px;
    }
}
@media screen and (min-width:640px){
    html{
        font-size: 200px;
    }.container{margin: 0 auto;}
}
@media screen and (max-width:640px){
    html{
        font-size: 200px;
    }
}

首先我們要獲取我們需要的標簽

var oul = document.getElementById("oul");
var btnStart = document.getElementById("btnStart");
var btnsuspend = document.getElementById("btnsuspend");
var bjyy = document.getElementById("bjyy");
var siwang = document.getElementById("siwang");
var siwu = document.getElementById("siwu");
var zuigao = document.getElementById("zuigao");
var fenshu = document.getElementById("fenshu");
var level = document.getElementById("level");

我們需要初始化ul下面的每一個li

//初始化格子
function init(){
    var pianduan = document.createDocumentFragment();
    for(var i = 0 ; i < 400 ; i++){
        var oli = document.createElement("li");
        pianduan.appendChild(oli); 
    }
    oul.appendChild(pianduan);
    lis = oul.children;
}

我們需要判斷初始化顯示幾個盒子，加入隨機顏色

var snake= [];
for(var i=0 ; i<5 ; i++){
    snake.push({pos:i , color:randColor()})
}

//隨機色
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,l=snake.length ; i
接著我們需要初始化一個食物
//食物的索引
var food = {pos:0,color:"yellow"};

//生成食物
function initFood(){
    var index = Math.floor(Math.random()*400);
    while(isInSnake(index)){
        index = Math.floor(Math.random()*400);
    }
    food = {pos:index,color:randColor()};
    lis[food.pos].style.background=food.color;
}
判斷食物不能出現在蛇的位置
//判斷食物不能出現蛇的位置
function isInSnake(index){
    for(var i=0,l=snake.length ; i
當我們讓蛇運動的時候，每前進一步，最后面的一個將變成白色
var shewei = snake.slice(0,1)[0].pos;
lis[shewei].style.background = "#fff";
for(var i=0 , l=snake.length ; i
接著我們在吃掉食物之后，將吃掉的食物累加都蛇尾
//蛇吃食物的碰撞檢測
if(shetou == food.pos){
    //將食物放到數組的前面
    snake.unshift({pos:shewei,color:food.color});
    //音樂特效
    siwu.play();
    //分數
    fenshu.innerHTML = snake.length;
    //生成新的食物
    initFood();
}
下面我們做蛇與墻壁的碰撞
var direction = 39;//方向   37左鍵 38上鍵 39右鍵 40下鍵
//個數
var geshu = 20;

//蛇跑
var shetou = snake.slice(-1)[0].pos;
//關于墻的碰撞檢測
if((shetou+1)%geshu == 0 && direction == 39){
    death()    
}else if(shetou>=(400-geshu) && direction == 40){
    death()
}else if((shetou < geshu) && direction == 38){
   death()
}else if(shetou%geshu == 0 && direction == 37){
   death()
}
接著我們檢測是否碰撞到自身
//檢測是否吃到自己
for(var i=0 , l=snake.length ; i
下面我們控制方向
if(direction == 40){//向下
    snake[l-1].pos = snake[l-1].pos+geshu;
}else if(direction == 37){//向左
    snake[l-1].pos = snake[l-1].pos-1;
}else if(direction == 39){//向右
    snake[l-1].pos = snake[l-1].pos+1;
}else if(direction == 38){//向上
    snake[l-1].pos = snake[l-1].pos-geshu;
}
    
//給文檔加點擊下鍵事件
document.addEventListener("keydown" , function(e){
    e=e || window.event;
    //獲取按下的是什么鍵
    switch(e.keyCode){
        //左鍵
        case 37:{
            if(direction == 39)return false;
            direction = e.keyCode;
            break;
        }
        //上鍵
        case 38:{
            if(direction == 40)return false;
            direction = e.keyCode;
            break;
        }
        //右鍵
        case 39:{
            if(direction == 37)return false;
            direction = e.keyCode;
            break;
        } 
        //下鍵
        case 40:{
            if(direction == 38)return false;
            direction = e.keyCode;
            break;
        }
    }
} , false)

如果碰撞到墻壁和自身以后調用死亡函數
//死亡函數
function death(){
    alert("你以頭破血流，游戲結束！");
    //location.href=location.href;
    location.reload();
}
接著我們來做開始游戲和暫停游戲
var timer = null;
//開始游戲
btnStart.onclick = function(){
    clearInterval(timer);
    timer =  setInterval(yundong,shudu);

    //背景音樂開始
    bjyy.play();
}
    //暫停游戲
btnsuspend.onclick = function(){
    clearInterval(timer);
}
下面我們設置游戲難度
//蛇的熟讀
var shudu = 100;
//設置難度
shudu = level.value;
緊跟著我們需要做歷史最高分數和當前分數
//獲取蛇的長度
//分數
fenshu.innerHTML = snake.length;
//歷史最高分
var score = localStorage.getItem("score")||0;

//分數
fenshu.innerHTML = snake.length;
     
var changdu = snake.length;
//歷史最高分
var score = localStorage.getItem("score")||0;
if(changdu > score){
    localStorage.setItem("score" , changdu);
}
最后我們做手機效果，上下左右滑動
function hua(e){
        //獲取按下的是什么鍵
        switch(e){
            //左鍵
            case 37:{
                if(direction == 39)return false;
                direction = e;
                break;
            }
            //上鍵
            case 38:{
                if(direction == 40)return false;
                direction = e;
                break;
            }
            //右鍵
            case 39:{
                if(direction == 37)return false;
                direction = e;
                break;
            } 
            //下鍵
            case 40:{
                if(direction == 38)return false;
                direction = e;
                break;
            }
        }
    }

    //位置改變

    //開啟滑動
    hammertime.get("swipe").set({ direction: Hammer.DIRECTION_ALL });
    hammertime
        .on("swipeleft", logEventType1)
        .on("swiperight", logEventType3)
        .on("swipeup",logEventType2)
        .on("swipedown", logEventType4);

    function logEventType1() {
        hua(37);
    }
    function logEventType2() {
        hua(38);
    }
    function logEventType3() {
        hua(39);
    }
    function logEventType4() {
        hua(40);
    }