js小游戏之经典炸弹人（1）--地图实现

前段时间，写了一款js小游戏--经典炸弹人，因为这是第一次写游戏，对很多东西都不是很熟悉。于是，疯狂的上网找资料，结果发现，关于经典炸弹人的js资料少的可怜。所以，很是头疼了一段时间。在写完经典炸弹人大概逻辑后，觉得有必要分享出来，方便更多的小伙伴学习。

首先，想必这款游戏大家都不陌生，玩家通过相应按键实现上下左右移动，这里我是使用的是W、A、S、D四个键控制玩家方向，空格键放置炸弹，接下来，我们来说说它的业务逻辑：

1、Canvas实现地图

2、实现玩家的上下移动

3、实现空格放炸弹

4、敌人的移动

5、障碍物判断

6、实现爆炸效果

总的来说，目前我也只是实现了大概的功能，像分数以及其他关卡及地图动画，有兴趣的话可以自行添加。

接下来，就是绘制地图了，话不多说，先来看看绘制出来的地图效果

那么，这又是怎么实现的呢？其实，这张地图就是通过下面图片的一小部分，用canvas画布画出来的

好了，接下来进入主题了，我们先来假设一下，要画出这个平面地图，我们需要哪些东西？如何将地图数据读取成我们所需要的图片，最后显示在浏览器上。

在这里我新建了两个js，map.js存储地图数据，cell.js根据传入的地图参数绘制图片。

很显然，我们需要用到一个二维数组存储我们的地图数据，就如：

var mapData=[
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,1,1,1,1,1,2,1,2,2,2,1,2,2,2,1,0],
        [0,1,0,1,0,1,0,1,0,1,0,1,0,1,0,1,0],
        [0,2,1,1,1,1,1,1,1,1,1,2,1,1,1,2,0],
        [0,1,0,1,0,1,0,1,0,1,0,2,0,1,0,1,0],
        [0,1,1,1,1,1,1,1,1,1,1,2,1,1,1,1,0],
        [0,1,0,1,0,1,0,1,0,2,0,1,0,1,0,1,0],
        [0,2,1,1,1,2,1,1,1,1,1,1,1,1,1,1,0],
        [0,1,0,1,0,1,0,1,0,2,0,1,0,1,0,1,0],
        [0,1,1,1,1,1,1,2,2,1,1,1,1,1,1,1,0],
        [0,1,0,2,0,1,0,1,0,1,0,1,0,1,0,2,0],
        [0,1,1,1,1,1,1,1,1,2,1,1,1,1,1,1,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
    ];

其中0表示的实心墙，1表示的是草地，2表示的是可以被炸毁的墙，所有数据和地图上的数据一一对应。

接下来就是创建二维数组，初始化地图，并将地图的数据传入到cell.js中

this.init=function () {
        //创建二维数组绘制地图
        var length = rowNum;
        for(var i=0;i<length;i++){
            cells[i]= [];
            var buffer=mapData[i];
            for(var j=0;j<buffer.length;j++){
                var cell = new Cell();
                cell.init(buffer[j],j*cellWidth,i*cellHight);
                cells[i][j]=cell;
            }
        }
    }

其中，

cell.init(buffer[j],j*cellWidth,i*cellHight);

buffer[j]表示地图中的数值，即0、1、2,后面的两个参数，表示的是横纵坐标。

接下来，看看cell.js需要做什么，其实，你也应该猜到了，我们现在已经获取了里面的数据，现在需要的是把数据用图片形式表示出来。

this.init=function (type1,cellX1,cellY1) {
        cellX=cellX1;
        cellY=cellY1;
        type= type1;
        //console.log(type);
        //console.log(cellX,cellY);
        cell =  new Image();
        switch(type){
            case 0:
                cell.src="./img/wall.png";
                break;
            case 1:
                cell.src="./img/floor.png";
                break;
            case 2:
                cell.src="./img/obstacle.png";
                break;
        }
    }

至此，一切都很清楚明了了，不同数据取得的图片路径不同，这时，只需要调用run方法绘制图片即可：

 this.run=function (paint) {
        paint.drawImage(cell,cellX,cellY,40,40);
    }

现在，绘制地图的主要业务逻辑已经出来了，源码已上传至GitHub地址：https://github.com/Violet-coco/Bomber，有兴趣的小伙伴可以看看。

当然咯，就像我之前所说的，这个小游戏还是有很多需要进一步改进的地方，希望大家可以一起探讨学习！

js小游戏之经典炸弹人（1）--地图实现

猜你喜欢