标签：
这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊！！适合刚学canvas的同学练习!!
废话不多说,直接来讲思路和代码.
-----------------------------------------------------------------------------------------------------------------
开发思路:首先要有蛇吃的食物，就是一个个canvas随机画出的方块，然后是蛇，蛇也是方块组成。于是我们构造一个函数，功能是产生食物和蛇的原材料,和处理一些关于方块的函数（后面会上代码）。其次是，开始游戏的函数，当页面加载完成后开始游戏，然后是当游戏开始是时候，我们要初始化一个画布和随机产生食物,接着是关于画蛇和控制蛇的构造函数。最后是当触发游戏结束的条件时候的游戏结束函数。首先搭建一个整体思路然后再细细入手，博主是这样写的，大神别笑话.
初始代码如下:
------
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext(‘2d‘);
var gridWidth=10;
var foods=new Array(),snakes=new Array();//放食物和蛇的数组
//原料初始化
function Node(x,y,w){
}
//生成一个画布和食物
function Farm(){
}
//画蛇
function Snake(x,y,len,speed){
}
}
//开始游戏
function gameStart(){
}
gameStart();
//结束游戏
function gameover(){}
<script>
------
接着，就是一个一个思考:首先是Node函数里面设置一些基本生成方块方法，由于，蛇和食物并不同，所以分成单独的2个函数,并且，蛇运动的时候要去掉尾部的方块，所以这里还要加一个去掉clear方法:
---
1 var t=this; 2 t.x=x; 3 t.y=y; 4 t.w=w; 5 //食物 6 t.foodInit=function(){ 7 ctx.fillStyle=‘red‘; 8 ctx.fillRect(x,y,w,w); 9 } 10 //蛇 11 t.snakeInit=function(){ 12 ctx.fillStyle=‘black‘; 13 ctx.strokeStyle=‘white‘; 14 ctx.fillRect(x,y,w,w); 15 ctx.strokeRect(x,y,w,w); 16 } 17 //清除蛇尾 18 t.clear=function(){ 19 ctx.fillStyle=‘white‘; 20 ctx.strokeStyle=‘white‘; 21 ctx.fillRect(x,y,w,w); 22 ctx.strokeRect(x,y,w,w); 23 }
----
接着是Fram函数里，要设置一个画布环境并且要随机产生食物:
----
1 function Farm(){ 2 var t=this; 3 ctx.fillStyle=‘white‘; 4 ctx.fillRect(0,0,canvas.width,canvas.height); 5 //随机生成食物 6 t.addfood=function(){ 7 var x=parseInt(canvas.width/gridWidth*Math.random())*gridWidth; 8 var y=parseInt(canvas.height/gridWidth*Math.random())*gridWidth; 9 var food=new Node(x,y,gridWidth); 10 food.foodInit(); 11 foods.push(food); 12 } 13 }
----
写到这里，当你启动gameStar函数时候会看到一些食物随机产生在画布上，颜色改一下，会有不同的画布环境：
---
1 //开始游戏 2 function gameStart(){ 3 var farm=new Farm(); 4 setInterval(farm.addfood,2000); 5 } 6 gameStart();
---
现在到了最难的地方就是处理蛇，首先是画一条蛇并启动它和键盘事件取如下:
---
1 function Snake(x,y,len,speed){ 2 var t=this; 3 t.x=x; 4 t.y=y; 5 t.dir=‘R‘; 6 //t.len=len; 7 var nx=x;ny=y; 8 t.init=function(){ 9 for (var i = 0; i <len; i++) { 10 var tempNode=new Node(nx,ny,gridWidth); 11 tempNode.snakeInit(); 12 nx-=gridWidth=10; 13 snakes.push(tempNode); 14 }; 15 setInterval(t.move,speed) 16 } 17 18 //取得键盘方向 19 document.onkeydown=function(e){ 20 var code=e.keyCode; 21 switch(code){ 22 case 37: 23 t.dir=‘L‘; 24 break; 25 case 38: 26 t.dir=‘U‘; 27 break; 28 case 39: 29 t.dir=‘R‘; 30 break; 31 case 40: 32 t.dir=‘D‘; 33 break; 34 } 35 }
}
标签：
原文地址：http://www.cnblogs.com/panhe-xue/p/5808319.html
