贪吃蛇，创建地图、蛇、食物后如何设计代码啊？

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>贪吃蛇</title>
<style>#mydiv{
border:0px solid blue;
width:520px;
margin:50px;
}
table{
margin:10px;
border-collapse: collapse;
border-spacing:0;
    }
td{width:10px;height:10px;border:1px solid black;}</style><script type="text/javascript" language="javascript">//行和列
var rows=20;
var cols=20;//蛇的随机坐标
var snake_x=parseInt(Math.random()*rows);
var snake_y=parseInt(Math.random()*cols);//食物的随机坐标
var food_x=parseInt(Math.random()*rows);
var food_y=parseInt(Math.random()*cols);//创建地图
function map()
{
var mydiv = document.getElementById("mydiv");// 获取div
var mytable = document.createElement("table");// 创建<table>元素 for(var j = 0; j < rows; j++)
{
var row = document.createElement("tr");
for(var i = 0; i < cols; i++)
{
var cell = document.createElement("td");
row.appendChild(cell);
}
mytable.appendChild(row);
}
mydiv.appendChild(mytable);
food();
snake();
}//创建食物
function food()
{

//忽略节点间的空文本
x=document.getElementById('mydiv').childNodes;
for(i=0;i<x.length;i++)
{
if(x[i].nodeType==1)
var getNode=x[i];
}

//得到列的集合
food_cells=getNode.rows[food_x-1].cells;
//显示食物颜色
food_cells[food_y-1].style.background="blue";
}//创建蛇
function snake()
{ //忽略节点间的空文本
x=document.getElementById('mydiv').childNodes;
for(i=0;i<x.length;i++)
{
if(x[i].nodeType==1)
var getNode=x[i];
}

//得到列的集合
food_cells=getNode.rows[snake_x-1].cells;
//显示蛇的颜色
food_cells[snake_y-1].style.background="red";

}</script></head>
<body onload="map()">
<div id="mydiv"></div>
</body>
</html>接下来要让贪吃蛇在它随机出现的地方开始移动怎么设计啊