chushi = 5;//初始蛇的长度为5个格子

首先定义蛇，为一个数组。

she = new Array();//蛇

var shs = 0;

var shs0 = 0;

var shs1 = 0;

var cx = 3;//初始蛇的x坐标，为从左边数第四列

var cy = heng/2;//初始蛇的y坐标，为整个行数的二分之一，就是显示在棋盘中间

cy=parseInt(cy);//取整数

for (var sh=0;sh<chushi;sh++) //循环生成蛇的五个格子的位置。

{

shs0 = shs;

shs1 = shs+1;

she[shs0] = (cx+sh)*jiangew;

she[shs1] = cy*jiangeh;

shs = shs +2;

}

效果像下面一样

蛇的第一个格子的坐标x为4，y为高度的二分之一，第二个格子的x坐标为5，y为高度的二分之一，以此类推。

其中数组she[]的内容大概像这样

she[0] = 3; //蛇的第一节x坐标

she[1] = 11; //蛇的第一节y坐标

she[2] = 4; // 蛇的第二节x坐标

she[3] = 11; //蛇的第二节y坐标

she[4] = 5; //蛇的第三节x坐标

she[5] = 11; //蛇的第三节y坐标

--------省略，这个蛇可以无限长，只要增加数组的长度就行了。

定义好坐标之后，再加上已经知道每个格子的宽度和高度，所以把蛇画出来，非常容易了。

hua = 0;

var hua1 = 0;

for(var count=0;count<she.length/2;count++){

//循环画出蛇的每一个格子，由上面she数组的定义可知，每次取两个数据，

一、为x坐标，

二、为y坐标。

hua = count*2;

hua1 = count*2+1;

cas.beginPath();

cas.fillRect(she[hua],she[hua1],jiangew,jiangeh);

cas.closePath();

}

而画蛇吃的豆子就更简单了，只需要两个变量，豆子的x坐标和y坐标。

我们这里设置成在蛇的前方三个格子的位置。

douzix = she[hua]+jiangew*3;//设置豆子的x坐标为蛇前三个格子

douziy = she[hua1]; //设置豆子的y坐标为蛇的同一行

cas.beginPath();

cas.fillRect(douzix,douziy,jiangew,jiangeh); //画豆子

cas.closePath();

现在页面打开就已经初始化好了蛇，豆子，棋盘。