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();

現在頁面開啟就已經初始化好了蛇，豆子，棋盤。