独立小游戏开发记录-基于官方源码《幽灵射手》001

Creator 3.x
#1

大家好！本周开始，我会在论坛上简单记录一下《勇者世界？》（名字还未起好）的开发进度，以此来督促自己坚持下拉开发游戏！
上周已经在b站发过视频
b站视频地址：【个人开发独立小游戏/混剪】多层无限地图冒险类小游戏 《勇者世界？》开发记录01_哔哩哔哩bilibili
记录内容包括：游戏某些功能的实现思路及最初实现算法（如果涉及的话）、还有大量的bug、以及试玩视频。

开发工具：cocos creator
计划上线平台：微信小游戏、等等
素材来源：unity资源商店（免费、个人购买付费资源）
音响、音乐：无
当前主要完成内容：无限地图、怪物生成（位置不重叠）、树木随机生成
下一步计划内容：怪物AI
说明：如果有什么建议的欢迎评论，你的支持就是我坚持下去的最大动力。
感谢你的支持！

2赞
#2

加油！！！

1赞
#4

一，关于此游戏无限地图生成方案说明和最初代码
思路可以参考九宫格键盘，玩家所在方格可以看成数字5，而其它0-9的数字是包围数字5的其它方格，如果方格5只要大于游戏玩家视野，而玩家角色每次移动都能提前算出周围方格的话， 在创建地图时顺便加点元素等等，给玩家的感觉也相当于无限地图了
从下面是以html/vue写的简单获取周围方格的算法，测试方法，复制保存下方代码，改成html文件，双击运行会在浏览器打开新页面，点击创建按钮就好执行查看效果（别忘按F12）
此算法仅供参考，只是简单的实现，想要更好的实现无限地图，请在论坛上搜索大神们的实现，再次感谢你们的支持！

image
image733×909 24.7 KB

<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>