JavaScript入门——使用JavaScript编写简单贪吃蛇游戏

闲来无聊，用JavaScript写了个贪吃蛇，希望对萌新的学习能够有所帮助。
废话不多说，直接开始！

功能分析：
1.显示蛇和食物
2.蛇的移动
3.蛇吃到食物后身体加长，并产生新的食物

首先在HTML的中添加一个大小为400*400的画布,使用canvas画布的2D绘图方式绘制方块，方块连起来表示蛇。

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;">
</canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

创建一个链表，链表每个节点存储的内容为一组(x,y)坐标值，每个节点用来保存蛇的一个节点在画布上的位置，绘制蛇体时只需要遍历此链表，便可以将整条蛇显示在画布上。
解释一下为什么要用链表结构来存储，因为蛇向前移动一个单位，在数据层次可以理解为删除表的最后一个元素，并在表头之前插入一个存储信息为表头+1个移动单位的节点，中间节点不需做出改变，使用链表可以很好适应这样的操作。因为链表的插入和删除是很容易的。

node = function(x,y){
	this.x=x;
	this.y=y;
	this.next=null;
}

var head =new node(0,0);    //链表的表头，保存蛇头的位置

setLocation=function(node,nx,ny){ //改变节点node保存的(x,y),位置值

    node.x=nx;
    node.y=ny;

}
setNext=function (node,next){ //改变当前节点指向的下一个节点

    node.next=next;

}

想要显示蛇体，只需要遍历保存信息的链表，然后再每一个节点代表的位置画一个方块

clearScreen = function(){ //清空屏幕，重新绘制

    ctx.fillStyle="#FFFFFF";
    ctx.fillRect(0,0,400,400);

}

drawSnake = function (){ 

    var temp = head; clearScreen(); 
    ctx.fillStyle="#0000FF"; 
    ctx.fillRect(foodx,foody,19,19); 
    temp=temp.next; //先不画头，头要改变颜色便于区分 
    ctx.fillStyle="#00FF00"; 
    while(temp.next!=null){ 

        ctx.fillRect(temp.x,temp.y,19,19); 
        temp=temp.next; 

    } 
    ctx.fillRect(temp.x,temp.y,19,19); 
    ctx.fillStyle="#FF0000"; //蛇头是红色的 
    ctx.fillRect(head.x,head.y,19,19); 
}

为了实现蛇体的移动，要对链表实现两个方法：
1.在表头之前插入一个元素
2.删除表的最后一个元素
实现如下：

remove = function (){    //删除表的最后一个元素
	var temple = head;
	while(temple.next.next!=null){
		temple=temple.next;
	}
	
	temple.next=null;
}

addHead = function (x,y){    //在表头之前增加一个元素，其保存的位置为x,y

	var temp = new node(head.x,head.y);
	
	setNext(temp,head.next);
	
	setNext(head ,temp);
	
	setLocation(head,x,y);
	
}

至此，大功告成！