You've already forked Pandona-Engine
初始化提交
This commit is contained in:
335
index.js
335
index.js
@@ -1,217 +1,142 @@
|
||||
class BaseElement {
|
||||
constructor(elementType = 'div', engineId) {
|
||||
this.element = document.createElement(elementType)
|
||||
this.element.style.position = 'absolute'
|
||||
this.engineId = engineId
|
||||
this.x = 0
|
||||
this.y = 0
|
||||
this.width = 0
|
||||
this.height = 0
|
||||
}
|
||||
// 创建框架入口文件
|
||||
import Engine from './src/core/Engine.js';
|
||||
import SimplifiedEngine, { PE } from './src/core/SimplifiedEngine.js';
|
||||
|
||||
setPosition(x = 0, y = 0) {
|
||||
this.element.style.left = `${x}px`
|
||||
this.element.style.top = `${y}px`
|
||||
this.x = x
|
||||
this.y = y
|
||||
}
|
||||
// 导入所有类以便外部使用
|
||||
import BaseElement from './src/elements/BaseElement.js';
|
||||
import Sprite from './src/elements/Sprite.js';
|
||||
import Box from './src/elements/Box.js';
|
||||
import TextElement from './src/elements/TextElement.js';
|
||||
import HtmlElement from './src/elements/HtmlElement.js';
|
||||
import SvgElement from './src/elements/SvgElement.js';
|
||||
import GameObject from './src/elements/GameObject.js';
|
||||
import { Component, PhysicsComponent, ColliderComponent, AnimationComponent, InputComponent, LifecycleComponent } from './src/elements/Component.js';
|
||||
|
||||
setSize(width = 0, height = 0) {
|
||||
if (width) {
|
||||
this.element.style.width = typeof width === 'number' ? `${width}px` : width
|
||||
this.width = width
|
||||
}
|
||||
if (height) {
|
||||
this.element.style.height = typeof height === 'number' ? `${height}px` : height
|
||||
this.height = height
|
||||
}
|
||||
}
|
||||
// 导入简化版元素类
|
||||
import { SimplifiedSprite, SimplifiedBox, SimplifiedText, SimplifiedHtml, SimplifiedSvg } from './src/elements/SimplifiedElements.js';
|
||||
import { SimplifiedGameObject, SimplifiedComponentFactory, SimplifiedGameObjectFactory } from './src/elements/SimplifiedGameObject.js';
|
||||
|
||||
setStyle(style) {
|
||||
Object.assign(this.element.style, style)
|
||||
}
|
||||
import EventBus from './src/utils/EventBus.js';
|
||||
import { SimplifiedEventBus, eventBus, EVENTS } from './src/utils/SimplifiedEventBus.js';
|
||||
|
||||
add(child) {
|
||||
child && this.element.appendChild(child.element || child)
|
||||
}
|
||||
import ResourceManager from './src/managers/ResourceManager.js';
|
||||
import SceneManager from './src/managers/SceneManager.js';
|
||||
import AudioManager from './src/managers/AudioManager.js';
|
||||
import Camera from './src/managers/Camera.js';
|
||||
|
||||
remove(child) {
|
||||
child && this.element.removeChild(child.element || child)
|
||||
}
|
||||
// 导入简化版管理器
|
||||
import { SimplifiedResourceManager } from './src/managers/SimplifiedResourceManager.js';
|
||||
import { SimplifiedSceneManager } from './src/managers/SimplifiedSceneManager.js';
|
||||
import { SimplifiedAudioManager } from './src/managers/SimplifiedAudioManager.js';
|
||||
import { SimplifiedCamera } from './src/managers/SimplifiedCamera.js';
|
||||
|
||||
on(event, callback) {
|
||||
this.element.addEventListener(event, callback)
|
||||
}
|
||||
import Tween from './src/animation/Tween.js';
|
||||
import AnimationSystem from './src/animation/AnimationSystem.js';
|
||||
import AnimationController from './src/animation/AnimationController.js';
|
||||
import { SimplifiedAnimation } from './src/animation/SimplifiedAnimation.js';
|
||||
|
||||
off(event, callback) {
|
||||
this.element.removeEventListener(event, callback)
|
||||
}
|
||||
import { Particle, ParticleEmitter, ParticleSystem } from './src/effects/ParticleSystem.js';
|
||||
import { SimplifiedParticleSystem, SimplifiedParticleEmitter, SimplifiedParticleFactory } from './src/effects/SimplifiedParticleSystem.js';
|
||||
|
||||
hide() {
|
||||
this.element.style.display = 'none'
|
||||
}
|
||||
import { UIElement, UIButton, UILabel, UIImage, UISlider, UIManager } from './src/ui/UI.js';
|
||||
import { SimplifiedUIManager, SimplifiedButton, SimplifiedLabel, SimplifiedImage, SimplifiedSlider } from './src/ui/SimplifiedUI.js';
|
||||
|
||||
show() {
|
||||
this.element.style.display = 'block'
|
||||
}
|
||||
}
|
||||
import { SimplifiedComponent, SimplifiedPhysicsComponent, SimplifiedColliderComponent, SimplifiedAnimationComponent, SimplifiedInputComponent, SimplifiedLifecycleComponent, SimplifiedComponentFactory as ComponentFactory } from './src/elements/SimplifiedComponent.js';
|
||||
|
||||
class Sprite extends BaseElement {
|
||||
constructor(img, x, y, width, height, engineId) {
|
||||
super('div', engineId)
|
||||
this.imgElement = document.createElement('img')
|
||||
this.imgElement.src = img.src
|
||||
this.imgElement.style.cssText = '-webkit-user-drag: none; user-drag: none;'
|
||||
this.element.appendChild(this.imgElement)
|
||||
// 导出所有类以便外部使用
|
||||
export {
|
||||
// 核心类
|
||||
Engine,
|
||||
SimplifiedEngine,
|
||||
|
||||
// 元素类
|
||||
BaseElement,
|
||||
Sprite,
|
||||
Box,
|
||||
TextElement,
|
||||
HtmlElement,
|
||||
SvgElement,
|
||||
GameObject,
|
||||
|
||||
// 简化版元素类
|
||||
SimplifiedSprite,
|
||||
SimplifiedBox,
|
||||
SimplifiedText,
|
||||
SimplifiedHtml,
|
||||
SimplifiedSvg,
|
||||
|
||||
// 游戏对象类
|
||||
SimplifiedGameObject,
|
||||
SimplifiedGameObjectFactory,
|
||||
|
||||
// 组件类
|
||||
Component,
|
||||
PhysicsComponent,
|
||||
ColliderComponent,
|
||||
AnimationComponent,
|
||||
InputComponent,
|
||||
LifecycleComponent,
|
||||
|
||||
// 简化版组件类
|
||||
SimplifiedComponent,
|
||||
SimplifiedPhysicsComponent,
|
||||
SimplifiedColliderComponent,
|
||||
SimplifiedAnimationComponent,
|
||||
SimplifiedInputComponent,
|
||||
SimplifiedLifecycleComponent,
|
||||
SimplifiedComponentFactory,
|
||||
ComponentFactory,
|
||||
|
||||
// 工具类
|
||||
EventBus,
|
||||
SimplifiedEventBus,
|
||||
eventBus,
|
||||
EVENTS,
|
||||
|
||||
// 管理器
|
||||
ResourceManager,
|
||||
SceneManager,
|
||||
AudioManager,
|
||||
Camera,
|
||||
|
||||
// 简化版管理器
|
||||
SimplifiedResourceManager,
|
||||
SimplifiedSceneManager,
|
||||
SimplifiedAudioManager,
|
||||
SimplifiedCamera,
|
||||
|
||||
// 动画系统
|
||||
Tween,
|
||||
AnimationSystem,
|
||||
AnimationController,
|
||||
SimplifiedAnimation,
|
||||
|
||||
// 特效系统
|
||||
Particle,
|
||||
ParticleEmitter,
|
||||
ParticleSystem,
|
||||
SimplifiedParticleSystem,
|
||||
SimplifiedParticleEmitter,
|
||||
SimplifiedParticleFactory,
|
||||
|
||||
// UI系统
|
||||
UIElement,
|
||||
UIButton,
|
||||
UILabel,
|
||||
UIImage,
|
||||
UISlider,
|
||||
UIManager,
|
||||
SimplifiedUIManager,
|
||||
SimplifiedButton,
|
||||
SimplifiedLabel,
|
||||
SimplifiedImage,
|
||||
SimplifiedSlider,
|
||||
|
||||
// 简化版全局对象
|
||||
PE
|
||||
};
|
||||
|
||||
this.setPosition(x, y)
|
||||
this.setSize(width, height)
|
||||
this.element.setAttribute('data-sprite-id', engineId)
|
||||
// 设置全局变量（可选）
|
||||
window.PE = PE;
|
||||
|
||||
// 精灵特有方法
|
||||
this.name = name => this.element.setAttribute('data-name', name)
|
||||
this.animate = keyframes => (this.element.style.animation = keyframes)
|
||||
}
|
||||
}
|
||||
|
||||
class Box extends BaseElement {
|
||||
constructor(x, y, width, height, engineId) {
|
||||
super('div', engineId)
|
||||
this.setPosition(x, y)
|
||||
this.setSize(width, height)
|
||||
this.element.setAttribute('data-box-id', engineId)
|
||||
}
|
||||
}
|
||||
|
||||
class TextElement extends BaseElement {
|
||||
constructor(text, x, y, engineId) {
|
||||
super('div', engineId)
|
||||
this.element.innerText = text
|
||||
this.setPosition(x, y)
|
||||
this.element.setAttribute('data-text-id', engineId)
|
||||
|
||||
// 文本特有方法
|
||||
this.set = text => (this.element.innerText = text)
|
||||
this.setColor = color => (this.element.style.color = color)
|
||||
this.setFont = font => (this.element.style.font = font)
|
||||
}
|
||||
}
|
||||
|
||||
class HtmlElement extends BaseElement {
|
||||
constructor(html, x, y, engineId) {
|
||||
super('div', engineId)
|
||||
this.element.innerHTML = html
|
||||
this.setPosition(x, y)
|
||||
this.element.setAttribute('data-html-id', engineId)
|
||||
|
||||
// HTML特有方法
|
||||
this.set = html => (this.element.innerHTML = html)
|
||||
this.get = () => this.element.innerHTML
|
||||
this.getSize = () => {
|
||||
const rect = this.element.getBoundingClientRect()
|
||||
return { width: rect.width, height: rect.height }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class SvgElement extends BaseElement {
|
||||
constructor(x, y, width, height, content, engineId) {
|
||||
super('div', engineId)
|
||||
this.element.innerHTML = content
|
||||
this.setPosition(x, y)
|
||||
this.setSize(width, height)
|
||||
this.element.setAttribute('data-svg-id', engineId)
|
||||
|
||||
// SVG特有方法
|
||||
this.setContent = content => (this.element.innerHTML = content)
|
||||
}
|
||||
}
|
||||
|
||||
class Engine {
|
||||
constructor(element = document.body, options = {}) {
|
||||
const defaultOptions = {
|
||||
width: 800,
|
||||
height: 600,
|
||||
background: 'transparent',
|
||||
}
|
||||
|
||||
this.options = { ...defaultOptions, ...options }
|
||||
this.images = []
|
||||
this.width = this.options.width
|
||||
this.height = this.options.height
|
||||
this.element = typeof element === 'string' ? document.querySelector(element) : element
|
||||
this.id = Date.now().toString(16)
|
||||
|
||||
this.createStage()
|
||||
}
|
||||
|
||||
createStage() {
|
||||
this.stage = document.createElement('div')
|
||||
this.stage.setAttribute('data-engine-id', this.id)
|
||||
|
||||
Object.assign(this.stage.style, {
|
||||
width: `${this.options.width}px`,
|
||||
height: `${this.options.height}px`,
|
||||
position: 'relative',
|
||||
userSelect: 'none',
|
||||
overflow: 'hidden',
|
||||
background: this.options.background,
|
||||
transform: 'translateZ(0)',
|
||||
})
|
||||
|
||||
// 添加舞台操作方法
|
||||
this.stage.add = child => child && this.stage.appendChild(child.element || child)
|
||||
this.stage.remove = child => child && this.stage.removeChild(child.element || child)
|
||||
|
||||
this.element.appendChild(this.stage)
|
||||
}
|
||||
|
||||
load(src = '') {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image()
|
||||
img.src = src
|
||||
img.onload = () => resolve(img)
|
||||
img.onerror = reject
|
||||
this.images.push(img)
|
||||
})
|
||||
}
|
||||
|
||||
createSprite(img, x = 0, y = 0, width = 0, height = 0) {
|
||||
return new Sprite(img, x, y, width, height, this.id)
|
||||
}
|
||||
|
||||
createBox(x = 0, y = 0, width = 0, height = 0) {
|
||||
return new Box(x, y, width, height, this.id)
|
||||
}
|
||||
|
||||
createText(text = '', x = 0, y = 0) {
|
||||
return new TextElement(text, x, y, this.id)
|
||||
}
|
||||
|
||||
createHtml(html = '', x = 0, y = 0) {
|
||||
return new HtmlElement(html, x, y, this.id)
|
||||
}
|
||||
|
||||
createSvg(x = 0, y = 0, width = 0, height = 0, content = '') {
|
||||
return new SvgElement(x, y, width, height, content, this.id)
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.stage && this.stage.parentNode) {
|
||||
this.stage.parentNode.removeChild(this.stage)
|
||||
}
|
||||
|
||||
// 清理所有图像引用
|
||||
this.images.forEach(img => {
|
||||
img.onload = null
|
||||
img.onerror = null
|
||||
img.src = ''
|
||||
})
|
||||
|
||||
// 清除所有引用
|
||||
this.images = []
|
||||
this.stage = null
|
||||
this.element = null
|
||||
this.options = null
|
||||
}
|
||||
}
|
||||
export default Engine;
|
||||
Reference in New Issue
Block a user