摘要：有些奇淫技巧玩好的話，就能提升自己的逼格，這不，一行代碼實(shí)現(xiàn)一個(gè)貪吃蛇小游戲就成了裝逼到了最高境界嘛代碼如下當(dāng)前瀏覽器不支持標(biāo)簽游戲結(jié)束我不是來裝逼的。

有些奇淫技巧玩好的話，就能提升自己的逼格，這不，一行js代碼實(shí)現(xiàn)一個(gè)貪吃蛇小游戲就成了裝逼到了最高境界嘛！代碼如下:

(function(){var s = [41,40],d = 1,f = 43,x,c = document.createElement("canvas");c.width=400;c.height=400;c.style.background="#535353";c.textContent="當(dāng)前瀏覽器不支持canvas標(biāo)簽";b=c.getContext("2d");function w(s,c){b.fillStyle = c;b.fillRect(s % 20 * 20, ~~(s / 20) * 20 , 18 , 18);};document.onkeydown=function(e){d = s[1] - s[0] == (x = [-1,-20,1,20][(e || event).keyCode - 37] || d ) ? d : x;};!(function(){s.unshift(x = s[0] + d);if(s.indexOf(x,1) > 0 || x < 0 || x > 399 || d == 1 && x % 20 == 0 || d == -1 && x % 20 == 19)return alert("游戲結(jié)束!");w(x,"#2396ef");x === f ? (()=>{while (s.indexOf(f = ~~(Math.random() * 399)) > 0);w(f,"#35e3dc");})() : w(s.pop(),"#535353");setTimeout(arguments.callee,300);})();document.body.appendChild(c);})();

ps:我不是來裝逼的。！

好了，讓我們來運(yùn)行一下這行代碼，看一下效果:

看動(dòng)圖看著不過癮？，好，你自己去線上看看demo可以撒，具體示例。

裝逼完成，

。

好了，言歸正傳，我怎么可能是來裝逼的，我要來分析一下，這個(gè)是怎么玩的，這才是我的目的。

讓我們拆分代碼來看:

首先，最外層包裹了一個(gè)自調(diào)用函數(shù)，如下:

(function(){
    //具體內(nèi)容
})();
//自調(diào)用函數(shù)當(dāng)然不止這樣的寫法

然后第二步，要畫一個(gè)場(chǎng)景，那很明顯，要用HTML5的canvas標(biāo)簽，我們可以采用document.createElement()這個(gè)方法來創(chuàng)建一個(gè)元素，繼續(xù):

(function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
})();

蛇運(yùn)動(dòng)的場(chǎng)景肯定是固定大小的，也就是說，我們要給canvas設(shè)置寬和高，在這里，我就是設(shè)置的400X400,然后給場(chǎng)景加一個(gè)背景。就這樣:

(function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
    c.width = 400;
    c.height = 400;
    c.style.background = "#535353";
})();

創(chuàng)建了canvas元素，我們要添加到DOM網(wǎng)頁中去，所以用appendChild()來添加。如下:

(function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
    c.width = 400;
    c.height = 400;
    c.style.background = "#535353";
    document.body.appendChild(c);
})();

哦，有些瀏覽器可能不支持canvas標(biāo)簽，所以我們不能忘了給一個(gè)優(yōu)雅的提示:

(function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
    c.width = 400;
    c.height = 400;
    c.style.background = "#535353";
    c.textContent="當(dāng)前瀏覽器不支持canvas標(biāo)簽";
    document.body.appendChild(c);
})();

場(chǎng)景畫好了，接下來，我們要在場(chǎng)景上畫蛇，所以canvas.getContext("2d")這個(gè)方法是必不可少的。

 (function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
    c.width = 400;
    c.height = 400;
    c.style.background = "#535353";
   var b = c.getContext("2d");
   document.body.appendChild(c);
})();

接下來分析蛇的構(gòu)成，實(shí)際上這里的場(chǎng)景，我們可以看成是400個(gè)20*20的塊組成，那么蛇也就可以看成一個(gè)塊一個(gè)塊的組成,用技術(shù)術(shù)語來說就是一個(gè)隊(duì)列,也就是一個(gè)數(shù)組，[20]。在這里初始化蛇為2個(gè)塊，也就是[20,20]，那么蛇初始化位置還是稍微調(diào)整一下嘛，所以也就改成[40,40],其實(shí)在這里第一次出現(xiàn)的時(shí)候，是隱藏了一個(gè)食物的，默認(rèn)就在蛇初始化位置的下一格，然后蛇會(huì)立即吃掉，然后就隨機(jī)出現(xiàn)下一個(gè)食物的位置了，因此默認(rèn)食物的位置是40。為了一個(gè)方便細(xì)小的微差，就稍微調(diào)大一點(diǎn),為43。好了，現(xiàn)在我們要知道蛇運(yùn)行的方向，蛇可以上下左右活動(dòng)，那么，我們定義為s[1] - s[0],這是根據(jù)位置來計(jì)算的。咱們先定義蛇再說:

(function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
    c.width = 400;
    c.height = 400;
    c.style.background = "#535353";
   var b = c.getContext("2d");
   var s = [41,40],//這里41也是有講究的
       d = 1,//定義蛇活動(dòng)方向，默認(rèn)向右
       f = 42;//默認(rèn)食物的位置
   document.body.appendChild(c);
})();

接下來，開始繪制蛇，蛇活動(dòng)的軌跡與食物。定義一個(gè)函數(shù)，利用canvas.fillStyle()填充背景，在這里蛇與食物還有蛇活動(dòng)的軌跡都是一個(gè)小方塊矩形，這樣我們就使用canvas.fillRect()來繪制一個(gè)矩形，這個(gè)方法有四個(gè)參數(shù)，如下圖所示:

蛇活動(dòng)的軌跡坐標(biāo)，也就是定義的蛇數(shù)組的坐標(biāo)，因此第一個(gè)參數(shù)就是s % 20 * 20,第二個(gè)參數(shù)就是~~(s / 20 * 20)。關(guān)于~~這個(gè)操作符，如果不理解的話，可以看我的文章淺談JavaScript位操作符。這里感覺有些抽象，實(shí)際上，需要靠自己的想象力來想象理解。

(function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
    c.width = 400;
    c.height = 400;
    c.style.background = "#535353";
   var b = c.getContext("2d");
   var s = [41,40],//這里41也是有講究的，代表默認(rèn)向右方向
       d = 1,//定義蛇活動(dòng)方向，默認(rèn)向右,蛇運(yùn)動(dòng)方向?yàn)閟[1] - s[0]
       f = 42;//默認(rèn)食物的位置
   //這個(gè)函數(shù)既是繪制蛇方塊，也是繪制食物與蛇活動(dòng)軌跡的定義
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   document.body.appendChild(c);
})();

蛇每吃掉一個(gè)食物，也就是往數(shù)組中添加一個(gè)20*20的小塊，當(dāng)然為了區(qū)分方向，這里的小塊寬高應(yīng)該與繪制的矩形寬高有關(guān)。因此，我們還要定義一個(gè)變量來代表蛇吃掉食物后，隨機(jī)出現(xiàn)的下一個(gè)食物出現(xiàn)的位置。

(function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
    c.width = 400;
    c.height = 400;
    c.style.background = "#535353";
   var b = c.getContext("2d");
   var s = [41,40],//這里41也是有講究的，代表默認(rèn)向右方向
       d = 1,//定義蛇活動(dòng)方向，默認(rèn)向右,蛇運(yùn)動(dòng)方向?yàn)閟[1] - s[0]
       f = 42,//默認(rèn)食物的位置
       x;
   //這個(gè)函數(shù)既是繪制蛇方塊，也是繪制食物與蛇活動(dòng)軌跡的定義
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   document.body.appendChild(c);
})();

接下來就是用戶按鍵盤的方向鍵，當(dāng)然也可以是wsad字母鍵來控制蛇活動(dòng)的方向。不過我們需要知道鍵盤鍵的keyCode,方向鍵的keyCode分別是:向左:37,向上:38,,向右:39,向下:40。鍵盤事件為onkeydown。

(function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
    c.width = 400;
    c.height = 400;
    c.style.background = "#535353";
   var b = c.getContext("2d");
   var s = [41,40],//這里41也是有講究的，代表默認(rèn)向右方向
       d = 1,//定義蛇活動(dòng)方向，默認(rèn)向右,蛇運(yùn)動(dòng)方向?yàn)閟[1] - s[0]
       f = 42,//默認(rèn)食物的位置
       x;
   //這個(gè)函數(shù)既是繪制蛇方塊，也是繪制食物與蛇活動(dòng)軌跡的定義
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   //按方向鍵控制蛇運(yùn)動(dòng)方向,這里根據(jù)食物的位置來控制方向，防止用戶隨便更改方向，然后游戲崩潰
   document.onkeydown = function(e){
       d = s[1] - s[0] === (x = [-1,-20,1,20][e || event].keyCode - 37 ] || d) ? d : x;
   }
   document.body.appendChild(c);
})();

然后蛇吃掉一個(gè)食物就應(yīng)該添加下一個(gè)食物，在這里用unshift()方法來添加數(shù)組。

(function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
    c.width = 400;
    c.height = 400;
    c.style.background = "#535353";
   var b = c.getContext("2d");
   var s = [41,40],//這里41也是有講究的，代表默認(rèn)向右方向
       d = 1,//定義蛇活動(dòng)方向，默認(rèn)向右,蛇運(yùn)動(dòng)方向?yàn)閟[1] - s[0]
       f = 42,//默認(rèn)食物的位置
       x;
   //這個(gè)函數(shù)既是繪制蛇方塊，也是繪制食物與蛇活動(dòng)軌跡的定義
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   //按方向鍵控制蛇運(yùn)動(dòng)方向,這里根據(jù)食物的位置來控制方向，防止用戶隨便更改方向，然后游戲崩潰
   document.onkeydown = function(e){
       //方向由蛇頭來確定，初始化蛇只有2個(gè)小方塊組成，因此蛇的方向就是s[1] - s[0]
       d = s[1] - s[0] === (x = [-1,-20,1,20][e || event].keyCode - 37 ] || d) ? d : x;
   }
   !(function(){
       s.unshift(x = s[0] + d);
   })();//這也是一種自調(diào)用函數(shù)寫法
   document.body.appendChild(c);
})();

接下來判斷蛇如果撞墻或者撞到了自身，則游戲結(jié)束。

(function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
    c.width = 400;
    c.height = 400;
    c.style.background = "#535353";
   var b = c.getContext("2d");
   var s = [41,40],//這里41也是有講究的，代表默認(rèn)向右方向
       d = 1,//定義蛇活動(dòng)方向，默認(rèn)向右,蛇運(yùn)動(dòng)方向?yàn)閟[1] - s[0]
       f = 42,//默認(rèn)食物的位置
       x;
   //這個(gè)函數(shù)既是繪制蛇方塊，也是繪制食物與蛇活動(dòng)軌跡的定義
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   //按方向鍵控制蛇運(yùn)動(dòng)方向,這里根據(jù)食物的位置來控制方向，防止用戶隨便更改方向，然后游戲崩潰
   document.onkeydown = function(e){
       //方向由蛇頭來確定，初始化蛇只有2個(gè)小方塊組成，因此蛇的方向就是s[1] - s[0]
       d = s[1] - s[0] === (x = [-1,-20,1,20][e || event].keyCode - 37 ] || d) ? d : x;
   }
   !(function(){
       s.unshift(x = s[0] + d);
       //判斷蛇如果撞墻或者撞到了自身，則游戲結(jié)束
       if(s.indexOf(x,1) > 0 || x < 0 || x > 399 || d == 1 && x % 20 == 0 || d == -1 && x % 20 == 19)return alert("游戲結(jié)束");
   })();//這也是一種自調(diào)用函數(shù)寫法
   document.body.appendChild(c);
})();

然后開始畫食物，以及判斷食物是否被蛇吃掉，如果吃掉了，則隨機(jī)生成下一個(gè)食物。

(function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
    c.width = 400;
    c.height = 400;
    c.style.background = "#535353";
   var b = c.getContext("2d");
   var s = [41,40],//這里41也是有講究的，代表默認(rèn)向右方向
       d = 1,//定義蛇活動(dòng)方向，默認(rèn)向右,蛇運(yùn)動(dòng)方向?yàn)閟[1] - s[0]
       f = 42,//默認(rèn)食物的位置
       x;
   //這個(gè)函數(shù)既是繪制蛇方塊，也是繪制食物與蛇活動(dòng)軌跡的定義
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   //按方向鍵控制蛇運(yùn)動(dòng)方向,這里根據(jù)食物的位置來控制方向，防止用戶隨便更改方向，然后游戲崩潰
   document.onkeydown = function(e){
       //方向由蛇頭來確定，初始化蛇只有2個(gè)小方塊組成，因此蛇的方向就是s[1] - s[0]
       d = s[1] - s[0] === (x = [-1,-20,1,20][e || event].keyCode - 37 ] || d) ? d : x;
   }
   !(function(){
       s.unshift(x = s[0] + d);
       //判斷蛇如果撞墻或者撞到了自身，則游戲結(jié)束
       if(s.indexOf(x,1) > 0 || x < 0 || x > 399 || d == 1 && x % 20 == 0 || d == -1 && x % 20 == 19)return alert("游戲結(jié)束");
       //然后開始畫蛇節(jié)點(diǎn)的顏色
        w(x,"#e641d3");
        //判斷蛇是不是吃到食物,如果吃到則重新隨機(jī)生成一個(gè)節(jié)點(diǎn)也就是新食物的坐標(biāo),Math.random()方法表示取隨機(jī)數(shù),因?yàn)榉较蛴锌赡苁秦?fù)的,所以用到了~~符號(hào)表示取絕對(duì)值到正數(shù).~就是先取反再減一的意思.
        if(x == f){
            while (s.indexOf(f = ~~(Math.random() * 399)) > 0);
            //重新畫食物顏色
            w(f,"#35e3dc");
        }else{
            //蛇吃到食物,蛇身會(huì)變長(zhǎng),所以不會(huì)改變蛇的運(yùn)動(dòng)軌跡
            w(s.pop(),"#535353");
        }
   })();//這也是一種自調(diào)用函數(shù)寫法
   document.body.appendChild(c);
})();

最后，讓蛇按一定的時(shí)間運(yùn)行，如下:

  (function(){
    //創(chuàng)建canvas標(biāo)簽
    var c = document.createElement("canvas");
    c.width = 400;
    c.height = 400;
    c.style.background = "#535353";
   var b = c.getContext("2d");
   var s = [41,40],//這里41也是有講究的，代表默認(rèn)向右方向
       d = 1,//定義蛇活動(dòng)方向，默認(rèn)向右,蛇運(yùn)動(dòng)方向?yàn)閟[1] - s[0]
       f = 42,//默認(rèn)食物的位置
       x;
   //這個(gè)函數(shù)既是繪制蛇方塊，也是繪制食物與蛇活動(dòng)軌跡的定義
   function w(s,c){
       b.fillStyle = c;
       b.fillRect(s % 20 * 20,~~(s / 20 * 20),18,18);
   }
   //按方向鍵控制蛇運(yùn)動(dòng)方向,這里根據(jù)食物的位置來控制方向，防止用戶隨便更改方向，然后游戲崩潰
   document.onkeydown = function(e){
       //方向由蛇頭來確定，初始化蛇只有2個(gè)小方塊組成，因此蛇的方向就是s[1] - s[0]
       d = s[1] - s[0] === (x = [-1,-20,1,20][e || event].keyCode - 37 ] || d) ? d : x;
   }
   !(function(){
       s.unshift(x = s[0] + d);
       //判斷蛇如果撞墻或者撞到了自身，則游戲結(jié)束
       if(s.indexOf(x,1) > 0 || x < 0 || x > 399 || d == 1 && x % 20 == 0 || d == -1 && x % 20 == 19)return alert("游戲結(jié)束");
       //然后開始畫蛇節(jié)點(diǎn)的顏色
        w(x,"#e641d3");
        //判斷蛇是不是吃到食物,如果吃到則重新隨機(jī)生成一個(gè)節(jié)點(diǎn)也就是新食物的坐標(biāo),Math.random()方法表示取隨機(jī)數(shù),因?yàn)榉较蛴锌赡苁秦?fù)的,所以用到了~~符號(hào)表示取絕對(duì)值到正數(shù).~就是先取反再減一的意思.
        if(x == f){
            while (s.indexOf(f = ~~(Math.random() * 399)) > 0);
            //重新畫食物顏色
            w(f,"#35e3dc");
        }else{
            //蛇吃到食物,蛇身會(huì)變長(zhǎng),所以不會(huì)改變蛇的運(yùn)動(dòng)軌跡
            w(s.pop(),"#535353");
        }
        //這是一種遞歸的寫法
        setTimeout(arguments.callee,300);
   })();//這也是一種自調(diào)用函數(shù)寫法
   document.body.appendChild(c);
})();

到此為止，就拆分完了，其實(shí)這里的邏輯不算難，難的是計(jì)算蛇與蛇運(yùn)動(dòng)軌跡還有食物的坐標(biāo)。能夠理解透，就看個(gè)人的數(shù)學(xué)知識(shí)了，哈哈。最后，將這么多代碼整合成一行代碼，就可以好好的裝逼了！

ps:本文代碼借鑒國外某大神20多行js代碼實(shí)現(xiàn)貪吃蛇，在源代碼基礎(chǔ)上進(jìn)行分析并加以修改封裝而成，不喜勿噴。

鄙人創(chuàng)建了一個(gè)QQ群，供大家學(xué)習(xí)交流，希望和大家合作愉快，互相幫助，交流學(xué)習(xí)，以下為群二維碼：