分享创作 伪.小世界——地图进阶操作简易教程

不宕 · 2020年09月05日 · 最后由 魔凤啸天 回复于 2020年12月17日 · 562 次阅读
本帖已被设为精华帖!

又是一个开学季啦! 你作业写完了吗?这里宕,又来发没人看的贴了。

旧号那个地图遗憾没有列入精贴,这次带来进阶同时适合萌新的教程。当然,看不懂也没关系 我写的时候就没指望别人能看懂 你能搞清楚逻辑就行了

仿照真.神作.小世界

这是咱们的

玩法:和npc在同一位置可以击杀。 可以在草地盖建筑物,拆建筑物。 可以采集东西。 B退出

备注:在进入主题前,提醒一句:我的代码比较多且不是很简便,可能有很多不必要的部分,但是游戏能运行说明思路是无误的所以只听过程即可

=:var mapx=[];var me={x:14,y:14}

创建空地图和本人初始化坐标

地图是二维数组,也就是一个面,我们先准备一条线的一维数组。而坐标你也可以用MD.x MD.y这样子用变量设(var与MD一样,只是MD能储存)但地图只能是数组

=:function 地图(name){this.src=3,this.name=name,this.thi={name:[],num:[]};this.bud={name:[],id:0};this.npc={name:[],id:0}};//创建地图及地图上事物

准备地图的构造函数

thi物品 bud建筑物 src图片代码,决定地图图片 id是判断地图有没有npc或bud有即是npc位数(可能有俩个)和bud的类型id

在后面会直接给地图mapx这么多属性,只不过后缀(最长是:二维数组里的对象的对象)长了。之前那个地图只有名字,这次则会有很多属性,可以容纳npc,物资,建筑物,当然,野怪也行

=:for(var i=-5;i<34;i++){mapx[i]=[];for(var j=-5;j<34;j++){mapx[i][j]=new 地图("草原")}}//x坐标基础增加y坐标;并铺满草地

初始化二维地图

俩个for是我们的常规操作,一横一竖,线线交叉则为面

=:for(var i=-5;i<0;i++){for(var j=-5;j<34;j++){mapx[i][j].src=4;mapx[j][i].src=4;}};
for(var i=30;i<34;i++){for(var j=0;j<34;j++){mapx[i][j].src=4;mapx[j][i].src=4;}}

把外界变成黑色src4就是黑图代码

因为我们的地图是动的,你玩了应该知道,中心不动,所以到了边界旁边还得有图,否则下面的一条代码会错误。而原本这是草原,为了不会视觉疲劳,变成虚空

=:for(var i=0;i<30;i++){for(var j=0;j<30;j++){var a=["森林","河流","山地"];for(var s=0;s<3;s++){var b=i-1;var d=j-1;if(mapx[i-1][j].name==a[s]||mapx[i][j-1].name==a[s]&&mapx[i][j].name=="草地")
{var c=random_choice_adv([1, 0.7], [2, 0.3])}else{var c=random_choice_adv([1, 0.1], [2, 0.9])};if(c==1){mapx[i][j].name=a[s];mapx[i][j].src=s}}}}

随机生成地图

重点1仨for使用。俩for,如果你看到,就一定是为了让后面的代码块经过每一个数组格子,同时顺序是从左到右,从上到下。因为先出现的是上面和左边,如果 附近 没有则几率小,附近有则几率大。而我们地形有4种,除了普通的草原,3种特殊都得来一次,所以还有一个for。而必须只能是草地,才能生成新板块,否则可能会被覆盖

当然你可以有更厉害的生成方式

=:function 资源(){for(var i=0;i<30;i++){for(var j=0;j<30;j++){var a=random_int(1,10);mapx[i][j].thi.num.push(a);switch(mapx[i][j].name){case "森林":mapx[i][j].thi.name.push("树木");break;case "河流":mapx[i][j].thi.name.push("水");;break;case "山地":mapx[i][j].thi.name.push("石头");break;case "草原":mapx[i][j].thi.name.push("");mapx[i][j].thi.num[0]="";break;}}}};资源()

=://俩循环,因为是从左往右,从上往下,所以判断俩方位,增加几率即可;3个循环;俩个是为了每个格子都经过,一个是3种类型的土地都随机一次。资源按照地形随机

资源是通过switch识别地图来命名,数量是随机

=:function 取名(){var a=random_choice("赵","钱","孙","李","周","吴","郑","王");var b=random_choice("花","草","树","木","风","雪","月","日天");return a+b}

自制取名,俩个随机

=:function 人(){this.name=取名(),this.x=random_int(1,29),this.y=random_int(1,29),this.id=-1,this.move=function (){var a=random_int(1,4);switch(a){case 1:this.x--;break;case 2:this.x++;break;case 3:this.y--;break;case 4:this.y++;break};if(this.x<0){this.x++}else if(this.x>29){this.x--}else if(this.y<0){this.y++}else if(this.y>29){this.y--}}};
var peo=[];for(var i=0;i<30;i++){peo[i]=new 人();for(var b=i-1;b>=0;b--){if(peo[i].name==peo[b].name){peo[i]=null;i--;break}}}

创建npc

还是一个构造函数,其中name直接调用上面的取名字,随机出生地,还有move这个方法,随机加switch选四方向,附带后面的是防撞墙。然后for循环让数组都成为对象,另一个小操作,创建的这个对象名for循环前面的所有已创建npc名字,重复就删除并-i,只要i不满足29就会继续循环,然后就会有29个不重复名字了

当然npc的轨迹也可有智商,比如说在一个范围内,或者两地来回

=:function 人图(i){var x=peo[i].x;var y=peo[i].y;mapx[x][y].npc.name[mapx[x][y].npc.id]=peo[i].name;peo[i].id=mapx[x][y].npc.name.length;mapx[x][y].npc.id++;}

=://添加人物到地图 生成人物及取名 并放置在地图

后用,通过npc坐标,把名字放入mapx.npc里

=:function shang(){if(me.y>0&&ms==1){me.y--};if(ms==3&&zgb>0){gb[zgb]="";zgb--;gx()}};function xia(){if(me.y<29&&ms==1){me.y++};if(ms==3&&zgb<3){gb[zgb]="";zgb++;gx()}};function zuo(){if(me.x>0&&ms==1){me.x--}};function you(){if(me.x<29&&ms==1){me.x++}};var sk=0;function cd(){if(ms!=3){ms=2;sk=1;$("#ck").css("display","block");$("#gf").css("display","none");菜单()}else{if(stone>=sto[zgb]&&wood>=wod[zgb]&&mapx[me.x][me.y].src==3&&mapx[me.x][me.y].bud.id==0){stone-=sto[zgb];wood-=wod[zgb];mapx[me.x][me.y].bud.name.push(build[zgb]);mapx[me.x][me.y].bud.id=1;mapx[me.x][me.y].src=zgb+5;set()}}}

=://上下左右

方向盘和菜单盘

ms模式有移动,详情,建造,后面俩都会暂停setinterval也就是npc不动

方向的上下有调光标(gb)的作用,中间圆球确认盖房作用,要判断ms

=:function 菜单(){地图刷新();this.x=me.x;this.y=me.y;var div="当前位置:<br>("+me.x+","+me.y+")"+mapx[x][y].name+"<br>资源:"+mapx[x][y].thi.name+mapx[x][y].thi.num;if(mapx[x][y].npc.id!=0){div+="<br>NPC:"+mapx[x][y].npc.name};if(mapx[x][y].bud.id!=0){div+="<br>建筑:"+mapx[x][y].bud.name};document.getElementById("ck").innerHTML=div;clearInterval(intv);ms=2}

详情框,点击开启,展开当前信息同时暂停npc移动

=:var map;function 地图刷新(){map="<table>";var a=me.y+6;for(var i=me.y-5;i<a;i++){map+="<tr>";var b=me.x+6;for(var j=me.x-5;j<b;j++){switch(mapx[j][i].src){case 1:map+="<td id='d1'>";break;case 2:map+="<td id='d2'>";break;case 3:map+="<td id='d3'>";break;case 0:map+="<td id='d0'>";break;case 5:map+="<td id='d5'>";break;case 6:map+="<td id='d6'>";break;case 7:map+="<td id='d7'>";break;case 8:map+="<td id='d8'>";break;default:map+="<td id='d4'>";break;};if(j==me.x&&i==me.y){map+="▲"};if(mapx[j][i].npc.id!=0){map+="♟"};map+="</td>"};map+="</tr>"};map+="</table>"}

自动生成表格地图

重点2搬自蝶梦贪吃蛇精贴,因为html就是string,所以用for来一直加td tr。switch判断地图,选择id(下面有css改style),并判断有没有npc在,并把自己放上。 其边框是以自己为中心截取mapx的一部分,这样子大大减小表格标签使用

=:var npcs=0;function 人物刷新(){npcs++;if(npcs==10){npcs=0;for(var i=0;i<peo.length;i++){var x=peo[i].x;var y=peo[i].y;mapx[x][y].npc.id=0;mapx[x][y].npc.name=[];peo[i].id=-1;peo[i].move();人图(i)}}}

=://刷新地图及清除人物

隔10秒移动npc,在移动前清除当前mapx的npc痕迹

=:function js(){var x=me.x;var y=me.y;var id=mapx[x][y].npc.id;while(id>0){for(var i=0;i<peo.length;i++){var py=peo[i].y;var px=peo[i].x;if(y==py&&x==px){mapx[x][y].npc.id--;peo.splice(i,1);id--}}}}

击杀npc

这个自己加的好玩,把自己所在格子的mapx.npc名字与peo里的名字核对,一样则清除该人,其中while可以帮助多杀

=:var wood=0;var stone=0;var water=0;function cj(){var x=me.x;var y=me.y;if(mapx[x][y].thi.num>0){mapx[x][y].thi.num--;switch(mapx[x][y].name){case "森林":wood++;break;case "河流":water++;break;case "山地":stone++;break;}}}

采集,减小mapx.thi.num,加到我身上

=:var zgb=0;var gb=["→","","",""];var build=["小木屋 5木","平房 10木","豪宅 10木10石","别墅 20木20石"];var wod=[5,10,10,20];var sto=[0,0,10,20];
function gx(){gb=["","","",""];gb[zgb]="→";var div=gb[0]+build[0]+"<br>"+gb[1]+build[1]+"<br>"+gb[2]+build[2]+"<br>"+gb[3]+build[3];document.getElementById("gf").innerHTML=div};function jz(){zgb=0;gx();$("#gf").css("display","block");$("#ck").css("display","none");clearInterval(intv);ms=3}

盖房,用gb光标对应位置id到上面的cd()通过判断ms=3来盖,通过判断是否草原和有没有物质来改变src

=:function cc(){mapx[me.x][me.y].id=0;mapx[me.x][me.y].src=3;mapx[me.x][me.y].bud.name=[];mapx[me.x][me.y].bud.id=0}

拆除,清除mapx.bud信息和src即可


=:function int(){if(sk==1){菜单()};人物刷新();地图刷新();document.getElementById("m").innerHTML=map+"水:"+water+"<br>木头:"+wood+"<br>石头:"+stone}

总函数,sk干嘛我忘了。。。应该是ms吧,不清楚,因为菜单会停止setunterval

=:var intv=setInterval("int()",100);function set(){if(ms!=1){ms=1;sk=2;intv=setInterval("int()",100);$("#ck").css("display","none");$("#gf").css("display","none");}};var ms=1;

=://setinterval 游戏核心

调用setinterval,set就是B键,关闭小窗口

然后正文的话就是style和一些div像上面ck就是查看窗口 gf就是盖房窗口 和四个按钮地图直接就是#m

不是我不给你看,太长了,真的,style#d1到d7都是图,还有gf ck按钮的样式,连js你都看完了,html你也没必要在我这看了吧,自己搞定版面

=:var nmap=[];me.x=5;me.y=6

=:for(var i=0;i<12;i++){nmap[i]=[]}

=:nmap[0]=[0,0,0,0,0,0,0,0,0,0,0]

=:nmap[1]=[0,0,0,0,0,0,0,0,0,0,0]

=:nmap[2]=[0,0,0,0,0,0,0,0,0,0,0]

=:nmap[3]=[0,0,3,3,3,3,3,3,3,0,0]

=:nmap[4]=[0,3,1,1,1,3,1,1,1,3,0]

=:nmap[5]=[3,3,3,4,3,3,3,4,3,3,3]

=:nmap[6]=[3,3,3,3,3,2,3,3,3,3,3]

=:nmap[7]=[3,3,3,3,2,2,2,3,3,3,3]

=:nmap[8]=[3,3,3,3,3,3,3,3,3,3,3]

=:nmap[9]=[3,3,1,3,3,3,3,3,1,3,3]

=:nmap[10]=[3,3,3,1,3,3,3,1,3,3,3]

=:nmap[11]=[3,3,3,3,1,1,1,3,3,3,3]

这是游戏彩蛋噢,点击 三剑客 就是这个啦。给青俗的简化数组,里面的数字就是我上面的src,如果不用随机地图,就用这个src来生成map里的其他东西(上面我用的是通过map.name)。你可能会说:这么麻烦,其实很简便了,1.0地图文字版6*9好像是,这个都11*11了呀,主要伤眼。当然,魔凤有个地图生成器,你要是找的到就可以用那个黑科技了。

上次战斗系统还是有很多不足的,多人战斗框架准备制作中,争取更加易上手,敬请期待

共收到 2 条回复
adminer 将本帖设为了精华贴 09月07日 16:24
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册