微信小游戏开发之三：实现小游戏的简易引擎

最新推荐文章于 2024-08-14 07:15:00 发布

Emperor_Dandy

最新推荐文章于 2024-08-14 07:15:00 发布

阅读量5.4k

点赞数

分类专栏：微信小游戏文章标签：微信小游戏

本文链接：https://blog.csdn.net/Register_man/article/details/78931562

版权

本文档详细介绍了如何开发微信小游戏的简易引擎，包括建立引擎目录、创建游戏元素基类Node、实现Label和Sprite类，以及展示最终效果。通过这些步骤，开发者可以更好地理解和构建自己的小游戏引擎。

摘要由CSDN通过智能技术生成

一、建立引擎目录

在主目录下创建名为'lib'的文件夹，存放引擎代码

二、创建所有游戏元素的基类：Node

在'lib'文件夹下创建'node.js'文件；

一个元素，需要坐标去定义位置，长宽来定义范围，还需要能够切换显示状态，添加子元素和获取父元素等等

代码如下：

export default class Node {
    constructor(x = 0, y = 0, width = 0, height = 0) {
        // 在父元素中的坐标
        this.x = x
        this.y = y
        // 父元素在世界坐标系中的坐标
        this.absX = 0
        this.absY = 0
        // 锚点
        this.anchorPointX = 0.5
        this.anchorPointY = 0.5
        // 宽和高
        this.width = width
        this.height = height
        // 子元素
        this.children = []
        // 是否显示
        this.visible = true
    }
    /**
     *  将当前元素绘制到屏幕中
     *  @ctx    canvas_context
     */
    draw(ctx) {
        if (this.visible) {
            this.children.forEach((child) => {
                child.draw(ctx)
            })
        }
        // node本身不进行绘制，需要让子类自行绘制
    }

    /**
     *  增加一个子元素
     *  @child  子元素
     */
    addChild(child) {
        child.parent = this
        child.absX += this.x
        child.y += this.y
        this.children.push(child)
        console.log("node.addChild")
    }

    /**
     *  获得计算锚点后的全局坐标
     */
    getFixedPosition() {
        let absPos = this.getAbsPosition()
        return {
            x: absPos.x - this.anchorPointX * this.width,
            y: absPos.y - this.anchorPointY * this.height
        }
    }
    /**
     *  设置锚点，值范围在(0, 1)
     */