js简易贪吃蛇

有段时间没敲代码了，闲来无事，js写了个简单的贪吃蛇小游戏，自娱自乐。

主要思路很简单，蛇本身是一个数组，当吃下一个食物其实就是数组里push一个数。整个游戏场景是由一个个独立id的小方块组成的，这样才能定位蛇与食物的位置。

var class_game = {
    column: 30, //列
    row: 15, //行
    box_width: 36,
    box_height: 36,
    //生成画布
    init: function() {
        for (var x = 0; x < this.column; x++) {
            for (var y = 0; y < this.row; y++) {
                var div = class_base.create('div');
                div.setAttribute('class', 'box');
                // 二维坐标转换成一维id比如：[1,1]=1*10+1=11
                div.setAttribute('id', y * this.column + x);
                game_location.push(y * this.column + x);
                div.setAttribute('style', 'width:' + this.box_width + 'px;height:' + this.box_height + 'px;top:' + (this.box_height * y) + 'px;left:' + (this.box_width * x) + 'px;');
                div.innerHTML = y * this.column + x + '<br />' + '[' + x + ',' + y + ']';
                class_base.get('game_panel').appendChild(div);
            };
        };
    }
};

2个for循环生成背景小方块的同时，可以获得一个由行和列组成的二维坐标。为了后续工作方便，需要把这些二维坐标转换成一维坐标赋予每个背景方块的id，这里有个小公式：当前行数*总列数+当前列数。

文字表达起来有点难理解，不过将每个背景方块的二维和一维坐标都显示出来就能一目了然了。

有了id，剩下的都是一些数学的计算和实现游戏逻辑了，比如把蛇的数组映射到游戏场景中，随机选择一个空闲方块生成新的食物，绑定按键监听事件等，就不贴代码了。

猜你喜欢