今天简单介绍一下贪吃蛇游戏引擎和随机食物的构造，之后再补充整个游戏中蛇的构造以及蛇的运动。
下面是游戏截图：
image.png
制作这样的游戏，思路是这样的构建一个游戏引擎，也就是整个容器，然后在容器里面随机构建食物，最后再搭建蛇以及蛇的运动，最后一步有点难度，放在下次完善，今天先来分享一下游戏引擎和食物的构建。
创建游戏引擎和食物的样式
<style>
table{
border-collapse: collapse;//表格间距边框全部删除。
border:2px solid #000;
margin: auto;
}//这个是大容器的样式，因为整个游戏界面是由表格样式制成的。
td{
width: 15px;
height: 15px;
}//设置每个小方块的高宽
.food{
background: #f00;//给食物加上红色背景。
}
</style>
目前引擎和食物的样式就这么多，后面补充贪吃蛇的时候会增加其他样式。
js部分（游戏引擎和随机食物的创建）
//新建一个对象，代表整个游戏引擎。
var gameBox={
rows:20,//rows代表行数；
cols:20,//cols代表列数；
start:function(){ //start游戏开始时创建所有的游戏环境。
var oTable=document.createElement("table");
document.body.appendChild(oTable);//新建一个表格，加到页面上去，代表游戏容器。
gameBox.allTd=[];//设置食物所在位置时，我们需要知道它所在位置，整个容器由不同td构成，所以要把每个td按行列加入到一个大数组里面。
for(i=0;i<gameBox.rows;i++){
var otr=document.createElement("tr");
var arrTr=[];在每一行，新建tr，再新建一个数组arrTr来容纳这一行的td。
for(a=0;a<gameBox.cols;a++){
var otd=document.createElement("td");
otr.appendChild(otd);//当前行再新建td，并将td放于每个tr之内。
arrTr.push(otd);//将每个td添加到当前行的数组里面。
}
oTable.appendChild(otr);//再将每个完整的tr放到table标签里面，构造成20*20的完整表格。
gameBox.allTd.push(arrTr);//最后将每一行的数组添加到游戏引擎的大数组内，这样就能通过gameBox.allTd来获取每一个td了。
}
//到这里，整个游戏的框架已经建成。现在开始构造随机食物。
//当游戏开始时，游戏引擎中的食物随机构造出来，可以把食物出现写成一个函数。
gameBox.food=new Food();
}
}
//这边是食物构造函数。
function Food(){
var x=parseInt(Math.random()*gameBox.cols)；
var y=parseInt(Math.random()*gameBox.rows);
//随机得到0到19的x和y，用于获取某一个方块。
gameBox.allTd[x][y].className="food";
//将这个随机的方块变成food，背景变红。
}
gameBox.start();
//最后启动游戏，整个界面中的容器和食物也就出来了。
关于贪吃蛇的游戏引擎和随机食物的构造已经讲完，关于蛇的构建和运动请听下回分解。
