横板闯关游戏的地图设定

前言

上一篇文章中定义了移动组件，但不论是怎样的移动，都脱离不了地图大小的限制。今天我们就来看一下地图组件的定义。

地图的定义

1. 地图的宽高：其实地图最重要的属性也就是宽高，然后因为我们的地图可能是带有纵深的，所以我们加入了地图纵深;这个纵深其实也就是你的角色可以向上行走的距离，如果是纯跳跃的横板闯关游戏，那么这个纵深就是0了。
2. 地图的开放性：这也是横板闯关游戏惯有的设计方式，一般都是闯过一段地图才会开放另一段地图，直到整个场景的最后出现boss，然后过关，当然，你也可以黑屏，更换另一张地图。

根据这两个特性我们给一下地图类的代码：

export default class GameMap {
    //完整地图的宽度 
    private mapWidth: number = 0;
    //完整地图的高度
    private mapHeight: number = 0;

    //完整地图的纵深
    private mapDepth: number = 0;

    //开放的范围宽度
    private rangeWidth: number = 0;
    //开放的范围高度
    private rangeHeight: number = 0;
    //开放的范围深度
    private rangeDepth: number = 0;

    //摄像机可到达的最左侧坐标
    private rangeX: number = 0;
    //摄像机可到达的最底部坐标
    private rangeY: number = 0;
    //摄像机可到达的最外侧坐标
    private rangeZ: number = 0;
    
    protected top: number = 0;

    protected right: number = 0;

    init(w: number, h: number, r: number = 0) {
        this.mapWidth = w;
        this.mapHeight = h;
        this.setMapDepth(r)
        this.setRangeWidth(this.mapWidth)
        this.setRangeHeight(this.mapHeight)
        this.setRangeDepth(this.mapDepth)
    }


    setMapWidth(w: number) {
        this.mapWidth = w;
    }

    setMapDepth(d: number) {
        this.mapDepth = d;
        this.updateTop();
    }

    /**
 * 是否在地图内
 * @param x 
 * @param y 
 */
    isInMap(x: number, y: number) {
        return x >= 0 && x <= this.mapWidth && y >= 0 && y <= this.mapHeight;
    }

    getMapWidth() {
        return this.mapWidth
    }

    getMapHeight() {
        return this.mapHeight;
    }

    getMapDepth() {
        return this.mapDepth;
    }

    getTop() {
        return this.top;
    }

    getRight() {
        return this.right;
    }

    setRangeX(x: number) {
        this.rangeX = x;
        this.updateRight()
    }

    getRangeX() {
        return this.rangeX;
    }

    setRangeY(y: number) {
        this.rangeY = y;
    }

    getRangeY() {
        return this.rangeY
    }

    setRangeZ(z: number) {
        this.rangeZ = z;
        this.updateTop();
    }

    updateTop() {
        this.top = this.rangeZ + this.mapDepth;
    }

    updateRight() {
        this.right = this.rangeX + this.rangeWidth
    }

    getRangeZ() {
        return this.rangeZ;
    }

    setRangeWidth(w: number) {
        this.rangeWidth = w;
        this.updateRight()
    }

    getRangeRight(width: number) {
        return this.right - width
    }

    setRangeDepth(r: number) {
        this.rangeDepth = r;
    }

    getRangeDepth() {
        return this.rangeDepth;
    }

    getRangeTop(height: number) {
        return this.rangeY + this.rangeHeight - height
    }

    getRangeWidth() {
        return this.rangeWidth;
    }

    setRangeHeight(h: number) {
        this.rangeHeight = h;
    }

    getRangeHeight() {
        return this.rangeHeight
    }
}

结语

代码其实并不多，但是是非常重要的概念，涉及的变量名也可以根据自己的喜好而定。下一篇我会给出自定义摄像机的定义，然后给出完整的实理。