摘要：利用制作簡單的貪吃蛇游戲首先，我們先來分析一下整個頁面的構(gòu)成。代碼如下因為我們需要兼容移動端設備和端設備，所以我們需要在前加上媒體查詢樣式，并且在使用單位時，需要用到而不是。

首先，我們先來分析一下整個頁面的構(gòu)成。一看可知，游戲框內(nèi)是一個盒子里面有許多的小方塊，我們可以利用 ul和li標簽來制作蛇和食物。右側(cè)就是簡單的 2個p標簽·一個select標簽· 2個input標簽而已。代碼如下

    


    


    
最佳歷史紀錄:0
    
當前長度:0
    
        初級
        中級
        較難
    
    
    


        
        
    
    
    
    

因為我們需要很多的小格子，所以 li標簽 我們將用利用js里的for循環(huán)來創(chuàng)建，這樣會使我們的代碼量減少，減輕我們的工作量，我們在介紹js代碼會詳細介紹，現(xiàn)在先不多說。我們接下來要為html文檔加上樣式，因為代碼比較簡單，所以我們可以將樣式隨意寫在什么地方。css代碼如下：

*{
    margin: 0;
    padding: 0;
}
input{
    outline: none;
    margin: auto;
    
}       
.box{
    width: 3.2rem;
    margin: auto;
    float: left;
}
.oul{
    width: 3.14rem;
    height: 3.14rem;
    border:0.03rem solid peru;
}
.oul li{
    list-style: none;
    width: 5%;
    height: 5%;
    float: left;
}
.box1{
    width: 2rem;
    height: 1rem;
    padding-top: 0.3rem;
    font-size: 0.2rem;
    margin: auto;
    float: left;
}
#level{
    width: 100%;
    height: 0.4rem;
}
#ls{
    color:paleturquoise;
    margin-left: 0.1rem;
}
#dqcd{
    color:paleturquoise;
    margin-left: 0.01rem;
}
#btn1{
    width: 50%;
    height:0.3rem;
    margin-left: 0.4rem;
    margin-top: 0.2rem;
    background: palegreen;
    color: #fff;
    
}
#btn2{
    width: 50%;
    height: 0.3rem;
    margin-left: 0.4rem;
    margin-top: 0.2rem;
    background: palegreen;
    color: #fff;
}

因為我們需要兼容移動端設備和pc端設備，所以我們需要在css前加上媒體查詢樣式，并且在使用單位時，需要用到rem而不是px。
媒體查詢代碼如下：

@media screen and (min-width: 320px) {
    html {
      font-size: 100px; } }  
@media screen and (min-width: 360px) {
html {
    font-size: 113px; } }   
@media screen and (min-width: 375px) {
html {
    font-size: 117px; } }
@media screen and (min-width: 384px) {
html {
    font-size: 120px; } } 
@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; } }

上面我們已經(jīng)將基本樣式都寫好，下面我們就要編輯js代碼
因為我們需要兼容移動端設備，而現(xiàn)在的移動設備大多數(shù)沒有鍵盤，所以我們需要引入一些庫來支持手指劃動，比如 bammer.js或者touch.js等等。我們這里使用的是touch.js。

在上面，我們并沒有在html文檔中建立 li標簽，所以我們需要在js里建立，利用for循環(huán)：

var oul = document.getElementById("oul"); 
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var bgaudio = document.getElementById("bgaudio");
var si = document.getElementById("go");
var chi = document.getElementById("chi");
var dqcd = document.getElementById("dqcd");
var ls = document.getElementById("ls");
var level = document.getElementById("level");
// 首先我們先獲取各個標簽的id，在后面會用到 
var ox = document.createDocumentFragment();
function ab (){
    for(var i = 0 ; i<400 ; i++){
        var oli = document.createElement("li")
        ox.appendChild(oli)
    }
}
ab();
oul.appendChild(ox);

如果你建立后看的不直觀，你可以給 li標簽 一個邊框，以便于觀看，由于我們需要看到每一個小格子的索引，所以我們在循環(huán)內(nèi)添加（oli.innerHTML = i），我們就可以清楚的看到每一個格子的索引值。

建立了游戲外邊框后，我們開始建立蛇的身體和蛇的食物。在每一次的刷新后，我們會發(fā)現(xiàn)蛇身體和食物的顏色都會隨機變化，所以我們需要建立一個隨機顏色的函數(shù),在每一次使用時直接調(diào)用就可以了。

function co (){
    return "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")"
}

建立蛇身，蛇身長五，所以我們初始化一個變量,然后利用for循環(huán)建立

var snk = [];
snk = oul.children;
var snkbody = [];
var ox = document.createDocumentFragment();
for(var i=0;i<5;i++){
    snkbody.push({pos:i,color:co()})
}
// 創(chuàng)建蛇身
function cd (){
    for(var j=0,l=snkbody.length;j
然后我們?yōu)槟銥樯呓⑹澄?，但是我們需要注意食物不能與蛇身在初始化到一起，所以我們需要如下代碼：
var food = [{pos:0,color:"red"}];
function isin (index){
    for(var j=0,l=snkbody.length;j
下面我們就需要讓蛇動起來
var snkh = snkbody.slice(-1)[0].pos;
var snkw = snkbody.slice(0,1)[0].pos;
// 獲取蛇頭蛇尾位置
for(var k=0,l=snkbody.length;k
然而我們像現(xiàn)在發(fā)現(xiàn)蛇雖然會走了，但是蛇尾的顏色并不會改變，所以我們還需要將蛇尾的顏色改變。
snk[snkw].style.background=0;
如果我們需要改變蛇的前進方向，我們需要清楚我們的設備，如果是移動設備，我們需要使用手指滑動方法，如果是pc設備，我們需要識別按鍵，所以我就使用了獲取body.width的方法，如果大于1024，即識別為pc端，否則為移動端。
var bodywid = document.body.offsetWidth;
if(bodywid>1024){
    document.addEventListener("keydown",function(e){
        e=e||window.event;
        switch(e.keyCode){
            case 37:{
                //  left
                if(fxg==39)return false;
                fxg=e.keyCode;
                break;
            }
            case 38:{
                if(fxg==40)return false;
                fxg=e.keyCode;
                break;
                // up 
            }
            case 39:{
                if(fxg==37)return false;
                fxg=e.keyCode;
                break;
                // right   
            }
            case 40:{
                if(fxg==38)return false;
                fxg=e.keyCode;
                break;
                // down
            }
        }
    },false);
    // 識別按鍵
}else{
    oul.touch({
        swipeLeft:function(){
            kkk(37)
        },
        swipeRight:function(){
            kkk(39)
        },
        swipeUp:function(){
            kkk(38)
        },
        swipeDown:function(){
            kkk(40)
        },
    });
    // 劃動改變函數(shù)kkk的值，使蛇改變方向
    function kkk (e){
          switch(e){
            case 37:{
                //  left
                if(fxg==39)return false;
                fxg=e;
                break;
            }
            case 38:{
                if(fxg==40)return false;
                fxg=e;
                break;
                // up 
            }
            case 39:{
                if(fxg==37)return false;
                fxg=e;
                break;
                // right   
            }
            case 40:{
                if(fxg==38)return false;
                fxg=e;
                break;
                // down
            }
        }
    }
    // 39：右  1：40  2：37  3：38
}
if(fxg==40){
        snkbody[l-1].pos=snkbody[l-1].pos+20;  
    }else if(fxg==37){
        snkbody[l-1].pos=snkbody[l-1].pos-1;
    }
    else if(fxg==38){
        snkbody[l-1].pos=snkbody[l-1].pos-20;
    }
    else if(fxg==39){
        snkbody[l-1].pos=snkbody[l-1].pos+1;
    }
// 根據(jù)我們的索引可以看出，向下就是依次+20，向上就是-20，向左就是-1，向右就是+1，所以我們在按鍵之后改變蛇頭的方向即可
我們的蛇現(xiàn)在就可以走了，我們還想讓他能夠吃到食物
if(snkh==food.pos){
    snkbody.unshift({pos:snkw,color:food.color});
    // 將食物放到蛇尾
    snkfood();
    // 再次刷新食物
    chi.play();
    // 播放吃食物音效
    var snkbodycd = snkbody.length-5;
    // 獲取分數(shù)
    dqcd.innerText=snkbodycd;   
    // 刷新當前分數(shù)
}
我們在平時玩貪吃蛇的時候，碰壁也會死亡，所以我們還需要做一下碰壁處理
// 我們的小格子邊框是20個，所以我們要在全局建立個數(shù)變量
var geshu = 20;
// 之后根據(jù)索引找出各個邊框處小格子的規(guī)律，并且識別蛇頭方向，進行碰壁處理
var fxg = 39;
// 初始化方向為向右
if((snkh+1)%geshu==0&&fxg==39){    
    sile();  
}
else if(snkh>=400-geshu&&fxg==40){    
    sile();   
}
else if(snkh%geshu==0&&fxg==37){
    sile();  
}
else if(snkh
我們在識別完墻壁后，我們還需要識別自己，讓蛇撞上自己之后，也會死亡。
for(var i =0,l=snkbody.length;i
這樣我們的貪吃蛇游戲已經(jīng)完成了大半
下面就是我們將制作點擊按鈕和暫停按鈕
btn1.onclick=function(){
    sudu = level.value
    // 設置速度
    clearInterval(ffffd)
    // 首先清除定時器，防止多次點擊定時器沖突
    ffffd=setInterval(function(){
        fzhs ();
    },sudu) 
    // 將以上蛇開始運動的代碼放入一個名為fzhs的代碼中循環(huán)
    bgaudio.play();  
    // 播放背景音樂
}
// 點擊開始
btn2.onclick=function(){
    clearInterval(ffffd);
    // 清除定時器
    bgaudio.pause();
    // 聲音暫停
}
在蛇死亡后，還需要死亡音效，彈出框，頁面刷新
function sile(){
    var l = snkbody.length-5;
    // 計算蛇吃了幾個食物
    var score = localStorage.getItem("score")
    if(l>score){
        localStorage.setItem("score",l)
    }
    // 如果當前分數(shù)大于歷史最高分數(shù)，我們要將歷史最高分數(shù)設置為當前分數(shù)
    si.play();
    // 播放死亡音樂
    alert("GameOver");
    // 彈出GameOver
    location.reload();
    頁面刷新
    return false; 
}
我們還需要設置歷史最高分數(shù)
var score = localStorage.getItem("score")||0;
ls.innerHTML = score;
這樣一個貪吃蛇小游戲就做完了，你還可以對樣式和js進行改進，并告訴我，讓我們共同進步?。?！
最后，我的github游戲奉上，希望你喜歡。
https://Smallmotor.github.io/...