今天使用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>
如果觉得好玩记得点击小心心哦~
欢迎一起讨论~
