一、建立引擎目录
在主目录下创建名为'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)
*/