一，关于此游戏无限地图生成方案说明和最初代码
思路可以参考九宫格键盘，玩家所在方格可以看成数字5，而其它0-9的数字是包围数字5的其它方格，如果方格5只要大于游戏玩家视野，而玩家角色每次移动都能提前算出周围方格的话， 在创建地图时顺便加点元素等等，给玩家的感觉也相当于无限地图了
从下面是以html/vue写的简单获取周围方格的算法，测试方法，复制保存下方代码，改成html文件，双击运行会在浏览器打开新页面，点击创建按钮就好执行查看效果（别忘按F12）
此算法仅供参考，只是简单的实现，想要更好的实现无限地图，请在论坛上搜索大神们的实现，再次感谢你们的支持！
<html lang="zh-CN">
<head></head>
<body>
<div id="app">
<button type="button" @click="create()">生成</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
maps:[],
map:{
x:0,
y:0,
w:100,
h:100,
create:false
}
},
created() {
console.log("--vue加载成功！--");
},
methods: {
create: function () {
this.createMap(this.map);
console.log(this.maps.map(t=>{return t.x+','+t.y}));
},
createMap(map){
const {x,y,w,h} = map;
let p0 = {...map};
let p1 = {...map,x:x-1,y:y+1};
let p2 = {...map,x:x,y:y+1};
let p3 = {...map,x:x+1,y:y+1};
let p4 = {...map,x:x-1,y:y};
let p5 = {...map,x:x+1,y:y};
let p6 = {...map,x:x-1,y:y-1};
let p7 = {...map,x:x,y:y-1};
let p8 = {...map,x:x+1,y:y-1};
this.addMap(p0);
this.addMap(p1);
this.addMap(p2);
this.addMap(p3);
this.addMap(p4);
this.addMap(p5);
this.addMap(p6);
this.addMap(p7);
this.addMap(p8);
},
addMap(map){
const {x,y} = map;
let findMap = this.maps.find(t=>t.x == x&& t.y==y);
if(!findMap){
this.maps.push(map);
}
},
}
})
</script>
</body>
</html>