JavaScript实现贪吃蛇游戏

今天使用JavaScript简单快速的实现一个贪吃蛇小游戏。首先分析一下如何实现，首先需要一个确定大小的区域，让“蛇”在上面运动，如果撞到边缘或者自己的尾巴，就视为游戏失败。其次我们需要初始化一条“蛇”，以及第一个等待被“蛇”吞掉的和“蛇”宽度相同的矩形，最后当我们使用“↑→↓←”就可以操纵蛇的运动轨迹。大概的思路如上所述。

首先用canvas建立一个400*400的画布。canvas是H5中的标签，可以建立一个画布，然后使用JavaScript在画布上作画。

<canvas id="can" width="400" height="400" style="background:grey"></canvas>

接下来在JavaScript中编写代码,建立一些后期会用到的变量：

var snake=[42,41],last=43,fx=1,n,bk=document.getElementById("can").getContext("2d");

以上的代码定义了一些变量，具体的意义以下的代码会逐渐显示。变量bk就是我们分析时的一个蛇运动的区域，getContext('"2d")可以画一个平面的图形，若是 3d则可以画一个立体的图形。
接下来是一个自执行函数，！function这种写法相当于(function(){})，告诉浏览器自动执行这个函数。

!function(){
        snake.unshift(n=snake[0]+fx);
        if(snake.indexOf(n,1)>0 || n<0 ||n>399||fx==1&&n%20==0||fx==-1&&n%20==19) {
}
        return alert("游戏失败");
        draw(n,"orange");
        if(n==last){
            var aa = Math.random();
            while(snake.indexOf(last=~~(aa*400))>=0);
            draw(last,"Yellow");
        }else
            draw(snake.pop(),"grey");
        setTimeout(arguments.callee,130);
    }();

首先取snake数组中的第一个元素+1赋值给变量n，unshift()方法可以向数组的开头增加一个或者是多个元素，并且改回新的数组。首先判断这条蛇是否撞到了“墙”，是否撞到了自己的尾巴等。如果没有那么就继续在画布上继续画蛇。调用draw方法：

function draw(t,c){
        bk.fillStyle=c;
        bk.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);
    }

当使用“↑→↓←”是调用了下面的方法：

document.onkeydown=function(e){
fx=snake[1]-snake[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx)?fx:n};

随着位置的改变，snake的位置也在改变。

效果图：

源代码：

<canvas id="can" width="400" height="400" style="background:grey"></canvas>
<script>
    var snake=[42,41],last=43,fx=1,n,bk=document.getElementById("can").getContext("2d");
    function draw(t,c){
        bk.fillStyle=c;
        bk.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);
    }

    !function(){
        snake.unshift(n=snake[0]+fx);
        if(snake.indexOf(n,1)>0 || n<0 ||fx==1&&n%20==0||fx==-1&&n%20==19){
            return alert("游戏失败");
        } else if(n == 399){
            return alert("恭喜通关！");
        }else{
            draw(n,"orange");
        }
        if(n==last){
            var aa = Math.random();
            while(snake.indexOf(last=~~(aa*400))>=0);
            draw(last,"Yellow");
        }else
            draw(snake.pop(),"grey");
        setTimeout(arguments.callee,130);
    }();
    document.onkeydown=function(e){fx=snake[1]-snake[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx)?fx:n};
</script>

如果觉得好玩记得点击小心心哦~
欢迎一起讨论~