從零開始的基礎RPG框架

Entity:
{
    name: "monster"                            // 此Entity的名稱或類別
    pos: { x: 0, y: 0 },
    vel: { x: 0, y: 0 },
    acc: { x: 0, y: 0 },
    zindex: 20,
    collider: {                         // 碰撞盒範圍，不規則多邊形則指定相對位置頂點
        x: -15, y: -15,
        w: 30, h: 30
    },
    bounceToMap: false,                 // 是否與地圖發生向量鏡射的反彈回饋
    collisionToMap: true,               // 是否與地圖發生碰撞
    world: Worldmap,                    // 所在的地圖
    animation: {                        // 圖片的設置
        frameWidth: 44,
        frameHeight: 40,
        renderScale: 1 / 2,
        imgName: 'coin',
        speed: 15,
        action: {                       // 設定個動作的循環
            'default': '0-9',           // 可連續設置也可跳號指定
            'atk':'11,12,14,19',
            'imgMode','25'              // 靜態圖片模式
        }
    },
    survivalMode : false,               // 是否消失
    survivalTime : -1,                  // 設定存在時間
    hitActionData :{                    // 事件觸發器: 設定此Endity在更新時要和誰互動的事件
        target: [...],                  // 設定那些物體會觸發
        action: (ent1, ent2) {
            // ent1為自己、ent2為其他entity
            // 設定兩物體接觸後的處理，如碰撞分離、更改速度等等的事件觸發器
        }
    }
}

TileEntity = {
        name: 'layerObj',
        pos: { x: 0, y: 0 },    // 設定為每塊Tile所在的位置
        collisionToMap: false,
        hitActionData: {
            parent: this,       // 觸發器的本體是誰
            target: ['player','enemy1'],    // 設定和player與enemy兩種Entity反應
            // 對target中的物體執行對應動作
            action: function (ent1, ent2) {
                // 取得自己與其他Entity的碰撞盒
                let collider1 = ent1.getCollisionBox();
                let collider2 = ent2.getCollisionBox();
                // 碰撞檢測
                if (!box2box(collider1.getBoundingBox(), collider2.getBoundingBox())) return;
                // 處理碰撞後的推擠判斷與向量鏡射
                let mtv = collider1.collideWith(collider2);
                if (mtv.axis) {
                    let v = separate(collider1, collider2, mtv)
                    ent2.pos.add(v);
                    mtvBounce(ent2, mtv)
                }
            }
        },
        drawBase: true
    }

// 程式中的主循環
function update(dt, tickcount) {
    let entities = world.gameObjs;
    // 更新所有物體
    for (const entity of entities) {
        entity.update(dt);
    }
    // 逐一檢測各Entity的事件觸發器
    for (let i = entities.length - 1; i >= 0; i--) {
        let entity = entities[i];
        let had = entity.hitActionData;
        if (!had) continue; // 此物體沒有觸發器的話就直接跳過
        for (let j = entities.length - 1; j >= 0; j--) {
            let entity2 = entities[j];
            // 判斷這個物體是否在觸發器的目標中
            if (had.target.indexOf('ALL') != -1 || had.target.indexOf(entity2.name) != -1) {
                // 執行觸發器對應的處理
                had.action(entity, entity2);
            }
        }
    }

    // 檢測那些物體該被移除
    for (let i = entities.length - 1; i >= 0; i--) {
        const entity = entities[i];
        if (entity.isDead) entities.splice(i, 1);
    }
    // camera.follow(dt, player);
    cameraControl();// 更新攝影機位置
}