贪吃蛇，创建地图、蛇、食物后如何设计代码啊？
<!DOCTYPE htmlPUBLIC "-//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>