【前端自学-网页游戏】0基础开发文字类页游-第二课：物品搜索及掉落(javascript/html/css)

--写的略仓促，待润色

前言

前天，我用苹果电脑拿着第一课写的代码及效果，走上我家大别墅第五楼的娱乐室里找到了管家老王，让他欣赏一下我第一课所写的东西；老王把一麻袋巴西钻石整齐的摆放进我的保险柜后，转头匆匆扫了一眼我的苹果电脑，非常不客气的说道：“太low了，这就像一个精神分裂者喝了假酒写出来的东西一样！”我白了一眼老王，拿出iphone250土豪金定制版变形金刚式机器人手机二合一设备，打给了三楼的财务，只说了一句：”把老王的帐结一下安排他离职！”，回到我第36楼的5000多平米大书房，从进门开着室内电车20分钟来到窗口，看了眼楼下的珠穆朗玛峰，我叹了口气，坐在桌前，放好电脑，心里想：老王说的并没有什么卵用，老王只是太皮了，心直口快，我虽然写的代码很low，也不能做我最理想的职业：程序猿，但我依然会坚持下去，我，即便没到终点，即便一辈子也到不了终点，也，没关系，那是因为，我，已经在路上了！恩，就这样。

 

需求：

1.物品掉落数量为随机的

2.掉落的物品为随机的；

我们先初步构想出结构：

ok，根据初步的设想，我改了改第一课的html和css文件（文章底部会放出源码）效果如下：

虽然说丑是丑了点，但是还是那句话，只要是html和css那都不重要，功能性的东西只要写好了，样式什么慢慢调不急，我们先把技术的本质和核心学出来再关心美化，就好比你还没找到工作呢，就先想着晚上去哪个洗头房推油比较好，那是不切实际的，先解决温饱，才能思淫欲。

首先，我们进入正题，首先设想的过程是：

1，点击start按钮完成开始剧情（第一课），

2.出现search（搜索）按钮，点击search按钮后，“地上”那一栏多出几个div标签的小方块代表物品，div里面显示的是物品名字，看下图：

 

这里就引出另外一个对于游戏来说无比重要的概念，“物品掉落”和“随机性”。

首先来说第一点：物品掉落，相信绝大多数的游戏都会有这个概念，当然你说我玩愤怒的小鸟就没有，那我没意见，你那个是点击类游戏，游戏的重点都不同，所以说，物品，是游戏数一数二重要的特性，而物品掉落，则是物品出现的重要方式，无论你是打怪掉落还是探索掉落，首先它得先出现，我们才能考虑后续的什么--捡起到背包啊---使用合成啊----出售丢弃啊---一系列其他的功能。

接着第二点：随机性，游戏的随机性越大，游戏的自由度越高，这里说的随机性包含在各个方面，比如说怪的种类，物品的种类，角色及任务的种类啦，地点啦等等等等，为什么这么说呢，比如说你玩游戏，啊，前方遇到一个敌人，他是鸡鸡怪，打死后掉落一根毛，又走了一段，前方又遇到一个鸡鸡怪，打死后它还是掉落一根毛，结果你玩了一天遇到一万多个鸡鸡怪，背包里装了一万多个毛。。。所以，随机性的高度一部分决定了游戏的有趣程度。你不知道会遇到什么才是最值得期待的，而游戏的随机性往往需要庞大的后台数据作为代价

废话就说道这里，接下来我们的目标就是：点击搜索按钮 ，从“物品数据”文件中抽取随机数量的随机物品（注意两个随机的意思），并放置在名字为“地上”栏位的区域。

1.物品数据的存放：首先我们考虑建立一个“容器”来存储游戏的“物品数据”，那么这个容器可以是json，xml，数据库等一系列的东西，为了快速达到目标，我们这里就只建立一个js文件，用一个数组来存放一种类型物品数据，如下：

var item_food=[
	{
		name:"苹果",
		No:1,
	},
	{
		name:"香蕉",
		No:2,
	},
	{
		name:"牛奶",
		No:3,
	},
	{
		name:"狗屎",
		No:4,
	},
]

item_food代表了一个数组，里面每一项又是一个物品的对象，物品对象里面可以放多种属性，比如名字，编号，属性等内容，放什么内容具体看这个对象所要做的事情，这里我只放了两个属性：名字和编号，随着以后的深入可添加其他属性。

另外还有一点就是既然建立的是一个数组，那么所有对象还有一个隐藏属性，就是它的排序号。这个东西后面会用到。

2.点击“search"按钮掉落随机数量的物品。

首先我们建立一个函数，来输出随机整数，具体代码是这样实现的：

function getRandomInt(min, max) 
{
	return Math.floor(Math.random() * (max - min)) + min;
}

• Math.random()这个函数的作用 是从0～1中间取一个随机的浮点数
• 参数中的min和max则是设置的最小数及最大数，我们要利用这两个数来定义随机数的范围
• Math.floor则是取整的意思，将小数掉后面抹掉
• 那么假设我们需要取一个0到5范围的整数我们则会将min传入0.max传入6！（同学们可以自己验证一下）

接下来，我们考虑，从物品数据文件中抽取x个物品出来，作为这次物品掉落的数量。同时用for循环x次，为游戏中“地面”div栏增加x个物品div，代码如下：

function item_down(min, max)
{
	var item_amount=getRandomInt(min,max+1);	
	var down=document.getElementById('down');
        var itemE=document.createElement('div');
	var itemE_text=document.createTextNode(item_food[0].name);
        itemE.appendChild(itemE_text);
	itemE.className="items";
	for (var i=0;i<item_amount; i++)
	{		
			
			down.appendChild(itemE);			
	}	
}
var srh_btn=document.getElementById("srh")
srh_btn.onclick=function()
{
	item_down(1,4);
}

• 在这个item_down（物品掉落）的函数中，传入两个参数，min最小值max最大值，就是上面随机数的那两个参数，用于决定随机数的范围，假设是0～3
• 变量item_amount用来接收一个随机数，假设是2.
• down来存储物品掉落所在的区域的div
• for循环加入条件如果不小于item_amount次，则停止
• itemE是新建一个div，字符是item_food[0].name，也就是item文件中的第一个物品：苹果，而class样式为我们在css文件中设置的样式 类className：items；
• 最终循环插入两次这个div

效果如下：

显然这是不够的，因为掉落了两个物品都是苹果，即便我们随机到了掉落数量是4，根据上面的代码

也只会是掉落四个一样的物品：苹果。

而我们真正的是需求，不但可以掉落随机数量的物品，还要求掉落的物品本身也是随机的！

也就是能够做到从item文件中随机抽取掉落物品（无论item文件中有多少条目的物品数据）

其实，实现这条也很简单，我们开头讲过，item.js文件在存储数据的时候是用来一个数组的形式来存所有的物品数据，

那么我们只需要在页面渲染物品的div标签时，将文字内容也从item文件中随机抽取一个序号的name，不就可以得到随机物品咯

并且这个方法以后如果物品增多的话，只需要修改取随机数的范围，涵盖虽有物品的序列号就可以随机出所有物品！

接下来修改上面的代码，如下图：

function item_down(min, max)
{
	var item_amount=getRandomInt(min,max+1);	
	var down=document.getElementById('down');
	for (var i=0;i<item_amount; i++)
	{
			var itemE=document.createElement('div');
			//在item.js游戏物品库中有多少个物品，则抽取0号到最后一号物品作为编号抽取
			var itemE_text=document.createTextNode(item_food[getRandomInt(0,4)].name);
			itemE.appendChild(itemE_text);
			itemE.className="items";
			down.appendChild(itemE);
			
	}
	
}
var srh_btn=document.getElementById("srh")
srh_btn.onclick=function()
{
	item_down(1,4);
}

修改的内容为

• 将var itemE生成新的物品div放入的for循环中
• 将itemE_text生成的节点文本使用item_food[随机数].name的形式读取物品文件中随机物品的名字，增加到itemE中。
• 将新生成的物品div加入到down栏中。完成随机数的随机物品掉落功能。

效果如下

但这个效果显然存在着一些严重的问题。

1.首先考虑，游戏的物品在某一个条件下是不可能无限掉落的，要么只掉落一次，例如击杀怪掉落一次，或者搜索区域掉落一次。要么第二次的物品掉落则刷掉第一次的掉落，例如你打了第二个怪，发现第一个怪的掉落物还在地上，或是说你打了1w多个怪，所有掉落物都在地上不会消失，这显然是不合理的，那么我们这次设置为，我们每次点击search按钮，清空掉上一次的掉落物品，并掉落新的物品，这也为以后复用这个方法埋下基础。

接着修改代码：

var srh_btn=document.getElementById("srh")
function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
  }
//物品掉落  item_down(最少min个，最多max个）
function item_down(min, max)
{
	var item_amount=getRandomInt(min,max+1);	
	var down=document.getElementById('down');
	for (var i=0;i<item_amount; i++)
	{
			var itemE=document.createElement('div');
			//在item.js游戏物品库中有多少个物品，则抽取0号到最后一号物品作为编号抽取
			var itemE_text=document.createTextNode(item_food[getRandomInt(0,4)].name);
			itemE.appendChild(itemE_text);
			itemE.className="items";
			down.appendChild(itemE);
			
	}
	
}
srh_btn.onclick=function()
{
	var down=document.getElementById('down');
	var all_items=down.getElementsByClassName('items');
	var No=all_items.length;
	for (var i=0;i<No;i++)
	{
		down.removeChild(all_items[0]);
	}
	item_down(1,4);
}

• srh_btn.onclick事件的最开始，我们考虑优先清空上一次的物品掉落，然后在进行本次物品掉落；
• var down获取物品掉落容器div，var all获取该容器中所有物品div；
• var No存储了当前down容器中item的数量，并传入下面的循环中作为条件
• for循环中使用了removeChild这个函数连续删除排在第一的物品div子元素，重复做No次，就可以删除所有当前物品
• 执行item_down设置参数1和4表示掉落数量在1和4间随机，来进行新一次的物品掉落行为。
• 留个坑：为何要定义一个变量No来存储当前容器中的物品数量呢？而为何不可以直接用all_items.length当作循环条件？直接当作循环条件是不行的，大家自己思考一下～

至此，完成了我们本节课所需要的内容，效果如下：

最后附上源码