还有一个比较重要的问题没有解决，那就是，渲染的时候，坐标怎么办？如何去更新GameObject的坐标，毕竟渲染都靠Html元素，Html元素可没有什么现成的坐标系可以用。

1.Relative和Absolute组合

类似游戏里的坐标系，我们要怎么实现？毕竟html元素基本上是靠margin、float、table、fixed这些来布局的。

这个问题一开始我也有点困扰，但最终我找到了一个目前来说还算不错的解决方案。

我们先给GameWorld组件套一层div，并且这个div的position是relative的：

<div class="bgDiv" style="position: relative;">
	<GameWorld @ref="@_gameWorld" />
</div>

然后，我们所有的游戏对象渲染组件都把position设为absolute，这样话，我们的游戏对象的坐标就通过left、top来设置（分别对应x、y坐标），并且这些对象的坐标都是相对于上一级的元素进行绝对布局的。

最后，GameWorld里渲染游戏对象的时候，不区分上下级，也就是说：所有游戏对象渲染时都是平铺，都是同一个层级的。

比如，理论上游戏对象应该是这样渲染的：

<div id="英雄">
	<div id="血量条" />
</div>

实际上，我们是这样渲染的：

<div id="英雄"/>
<div id="血量条" />

于是，我们只需要计算出每一个游戏对象的“世界坐标”，就可以方便地渲染，而不需要考虑他们的上下级关系了。

也许大家会疑惑，按照理论上的那种渲染关系，也可以方便的渲染，只要获取到子对象的“本地坐标”（以父对象作为起始点的相对坐标）即可。

其实也没错，这样也是可以的，但，可能是我个人的喜好，我认为平铺渲染更接近于Canvas的那种模式，渲染不考虑父子关系，父子关系交给游戏对象本身去管理。不过，这个看大家个人的喜好吧，我只是提供一种参考方案。

2.渲染

总结一下，实际上整个游戏的渲染流程是这样的，在GameContext里，每一帧做了以下逻辑：

    public async ValueTask Step(float elapsedTime)
    {
        // 移除已销毁的对象
        GameObjects.RemoveAll(t => t.IsDestroy);

        // 调用所有GameObject的Update函数
        await Update();

        // 碰撞检测
        CheckCollision();

        // 更新对象的渲染规格
        UpdateGameObjectRenderRect();
    }

先更新GameObject的逻辑，然后检测碰撞，最后更新游戏对象的渲染规格（坐标、大小），Step执行完后，就会调用GameWorld的Refresh函数（执行了StateHasChanged），刷新渲染。

关于更新游戏对象的渲染规格，其实我还没有封装好，算是比较初级的实现，大家也不用太在意，可以随时用自己的逻辑替换。

3.结束

总的来说，到目前为止，我算是把遇到的关键问题给解释了一遍了，剩下的代码都是一些游戏逻辑的代码。像碰撞检测、直线行走、子弹攻击、动画啥的，没有什么固定的套路，大家就随便看看就好。

毕竟这是我第一次用Blazor来实现游戏的功能，还是一个比较简单的功能。

如果大家在“不使用Canvas来进行Blazor游戏开发”这个事情上，有更好的解决方案的话，希望能指点一下我，非常感谢。