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，当然，还有一个es6版本的，有兴趣的小伙伴可以看看。

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

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

js小游戏之经典炸弹人（2）--玩家的移动
在js小游戏之经典炸弹人(1)--地图实现这篇文章中,我们已经实现了地图的绘制,接下来就来谈谈玩家是如何移动的呢? 实现玩家的移动主要依靠的是键盘事件onkeypress,我们要通过操作键盘控制玩家的 ...
是男人就要坚持30秒：原生JS小游戏
在继之前完成的数个JavaScript demo后,我发现我还没有写过JS小游戏,这次呢,我就来分享一个,非常经典的"是男人就要坚持30s"的小游戏.当然我肯定 is a man, ...
html5走格子游戏,JS/HTML5游戏常用算法之碰撞检测地图格子算法实例详解
JS/HTML5游戏常用算法之碰撞检测地图格子算法实例详解发布时间:2020-09-26 20:42:24 来源:脚本之家阅读:112 作者:krapnik 本文实例讲述了JS/HTML5游戏常 ...
100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
js小游戏（飞行的小鸟--canvas）
js小游戏 (飞行的小鸟) 这个里面用到的主要是 canvas 绘图 <!DOCTYPE html> <html><head><meta charset=&q ...
js小游戏动物连连看代码
下载地址 js小游戏动物连连看代码,有多种语言切换,默认是中文.不用部署本地解压即可预览. dd:
糖果粉碎js小游戏代码
下载地址糖果粉碎js小游戏代码,糖果消消乐小游戏源码下载. dd:
【JavaScript】（一）解读一个js小游戏
[前言] 离公司近的好处,就在于每天都能利用自己的下班时间,更好地查漏补缺,充实技能. 最近小编做的项目需要写js偏多,而我不擅长写前端js,利用工作之余,开始学习,下面通过一个成型的js小游戏,开始 ...
JS小游戏 - 盖房子
写这个JS,源于CSDN上看到的一道思考题,挺有趣的一个算法,于是根据规则写了这个JS. < html > < head > < title > JS小游 ...

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

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

最新文章

热门文章