贪吃蛇游戏引擎和食物的构造

今天简单介绍一下贪吃蛇游戏引擎和随机食物的构造，之后再补充整个游戏中蛇的构造以及蛇的运动。
下面是游戏截图：

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();
//最后启动游戏，整个界面中的容器和食物也就出来了。

关于贪吃蛇的游戏引擎和随机食物的构造已经讲完，关于蛇的构建和运动请听下回分解。