feat(boards): python online添加sprite模块 (不完善)

boards/default_src/python_pyodide/others/pixi-sprite.js

@@ -0,0 +1,664 @@
+import PIXI from 'pixi.js';
+import $ from 'jquery';
+
+
+const mixlySprite = {
+    stage: new PIXI.Container(),
+    pointer: { x: 0, y: 0 },
+    backgroundSprite: null,
+    sprites: {},
+    texts: {},
+    counter: 0,
+    keys: {},
+    state: false,
+    running: false,
+    repeatPlay: () => { },
+
+    displayTag: false,
+    processingDisplayEvent: null,
+
+    successDisplayEvents: [],
+    successProcessingDisplayEvents: [],
+
+    startTime: performance.now(),
+    timer: 0,
+    lastFrameTime: null,
+    lastSecond: null,
+    targetFPS: 60,
+    frameCount: 0,
+    currentFPS: 60,
+
+    canvasHeight: 450,
+    canvasWidth: 800
+};
+
+mixlySprite.gameLoop = () => {
+    if (mixlySprite.state == true) {
+        mixlySprite.repeatPlay();
+        mixlySprite.gameLoopDisplay();
+    }
+    mixlySprite.timer = performance.now() - mixlySprite.startTime;
+}
+mixlySprite.animate = (currentTime) => {
+    const deltaTime = currentTime - mixlySprite.lastFrameTime;
+
+    if (deltaTime >= 1000 / mixlySprite.targetFPS) {
+        mixlySprite.frameCount++;
+        mixlySprite.gameLoop();
+        mixlySprite.renderer.render(mixlySprite.stage);
+        mixlySprite.lastFrameTime = currentTime;
+    }
+    if (currentTime - mixlySprite.lastSecond >= 1000) {
+        mixlySprite.currentFPS = mixlySprite.frameCount;
+        mixlySprite.frameCount = 0;
+        mixlySprite.lastSecond = currentTime;
+    }
+    requestAnimationFrame(mixlySprite.animate);
+}
+
+mixlySprite.createBackground = (img, mode = 0) => {
+    var player;
+    if (mode == 0) {
+        // eslint-disable-next-line new-cap
+        player = new PIXI.Sprite.fromImage(`../common/media/spriteimg/${img}.png`);
+    }
+    player.name = 'background';
+    player.anchor.set(0.5);
+    player.x = mixlySprite.canvasWidth / 2;
+    player.y = mixlySprite.canvasHeight / 2;
+
+    // const $canvas = $('#spriteContainer canvas');
+    // const canvasWidth = $canvas.width();
+    // const canvasHeight = $canvas.height();
+    // player.width = ($('body').width() / 2);
+    // player.height = ($('body').width() / 2)/canvasWidth*canvasHeight;
+
+    player.width = mixlySprite.canvasWidth;
+    player.height = mixlySprite.canvasHeight;
+
+    player.interactive = true;
+    player.buttonMode = true;
+    player.isDown = false;
+    player.isUp = true;
+    player.on('mousedown', function () {
+        this.isDown = true;
+        this.isUp = false;
+        if (mixlySprite.state) this.runningMouseDown();
+    })
+        .on('mouseup', function () {
+            this.isDown = false;
+            this.isUp = true;
+        })
+        .on('mouseupoutside', function () {
+            this.isDown = false;
+            this.isUp = true;
+        });
+    player.runningMouseDown = new Function("");
+    if (mixlySprite.backgroundSprite && mixlySprite.backgroundSprite.parent) {
+        // 如果子节点已经在父节点中，需要先移除
+        mixlySprite.stage.removeChild(mixlySprite.backgroundSprite);
+    }
+    mixlySprite.backgroundSprite = player;
+    mixlySprite.stage.addChildAt(mixlySprite.backgroundSprite, 0);
+    return 0;
+}
+
+mixlySprite.createASprite = (img, x = mixlySprite.canvasWidth / 2, y = mixlySprite.canvasHeight / 2, name = '', mode = 0) => {
+    if (name == '') {
+        name = 'sprite' + (++mixlySprite.counter);
+    }
+    var player;
+    if (mode == 0) {
+        // eslint-disable-next-line new-cap
+        player = new PIXI.Sprite.fromImage(`../common/media/spriteimg/${img}.png`);
+    }
+    if (!mixlySprite.sprites[name] && !mixlySprite.texts[name]) {
+        player.name = name;
+        player.anchor.set(0.5);
+        player.x = x;
+        player.y = y;
+        player.interactive = true;
+        player.buttonMode = true;
+        player.isDown = false;
+        player.isUp = true;
+        player.on('mousedown', function (event) {
+            this.isDown = true;
+            this.isUp = false;
+            if (!mixlySprite.state) {
+                this.data = event.data;
+                this.alpha = 0.5;
+                this.dragging = true;
+            } else this.runningMouseDown();
+        })
+            .on('mouseup', function () {
+                this.isDown = false;
+                this.isUp = true;
+                if (!mixlySprite.state) {
+                    this.alpha = 1;
+                    this.dragging = false;
+                    this.data = null;
+                }
+            })
+            .on('mouseupoutside', function () {
+                this.isDown = false;
+                this.isUp = true;
+                if (!mixlySprite.state) {
+                    this.alpha = 1;
+                    this.dragging = false;
+                    this.data = null;
+                }
+            })
+            .on('mousemove', function () {
+                if (!mixlySprite.state)
+                    if (this.dragging) {
+                        var newPosition = this.data.getLocalPosition(this.parent);
+                        this.position.x = newPosition.x;
+                        this.position.y = newPosition.y;
+                    }
+            })
+        player.runningMouseDown = new Function("");
+        player.show = function () {
+            this.visible = true;
+        };
+        player.hide = function () {
+            this.visible = false;
+        };
+        player.enlarge = function (s) {
+            const ratio = this.height / this.width;
+            var measure = Math.sqrt(this.height * this.width);
+            measure += s;
+            this.width = Math.sqrt(measure * measure / ratio);
+            this.height = this.width * ratio;
+        };
+        player.enlargeTo = function (s) {
+            var ratio = this.height / this.width;
+            this.width = Math.sqrt(s * s / ratio);
+            this.height = this.width * ratio;
+        };
+
+        player.expandTo = async function (s, time = 1) {
+            if (mixlySprite.running) {
+                mixlySprite.displayTag = true;
+                mixlySprite.processingDisplayEvent = {
+                    sprite: this,
+                    targetS: s,
+                    totalTime: time * 1000,
+                    startTime: performance.now(),
+                    displayType: 'expand'
+                };
+
+                var prom = new Promise((resolve) => {
+                    if (mixlySprite.displayTag === false) {
+                        resolve();
+                    } else {
+                        const checkTagInterval = setInterval(() => {
+                            if (mixlySprite.displayTag === false) {
+                                clearInterval(checkTagInterval);
+                                resolve();
+                            }
+                        }, 10);
+                    }
+                });
+                return await prom;
+            }
+            mixlySprite.successProcessingDisplayEvents.push({
+                sprite: this,
+                targetS: s,
+                totalTime: time * 1000,
+                startTime: performance.now(),
+                displayType: 'expand'
+            });
+            return 0;
+        };
+
+        player.move = function (step) {
+            this.x += step * Math.cos(this.rotation);
+            this.y += step * Math.sin(this.rotation);
+        };
+        player.moveTo = function (x, y) {
+            this.x = x;
+            this.y = y;
+        };
+        player.slideTo = async function (x, y, time = 1) {
+            if (mixlySprite.running) {
+                mixlySprite.displayTag = true;
+                mixlySprite.processingDisplayEvent = {
+                    sprite: this,
+                    targetX: x,
+                    targetY: y,
+                    totalTime: time * 1000,
+                    startTime: performance.now(),
+                    displayType: 'slide'
+                };
+
+                var prom = new Promise((resolve) => {
+                    const checkTagInterval = setInterval(() => {
+                        if (mixlySprite.displayTag === false) {
+                            clearInterval(checkTagInterval);
+                            resolve();
+                        }
+                    }, 10);
+                });
+
+                return await prom;
+            }
+            mixlySprite.successProcessingDisplayEvents.push({
+                sprite: this,
+                targetX: x,
+                targetY: y,
+                totalTime: time * 1000,
+                startTime: performance.now(),
+                displayType: 'slide'
+            });
+            return 0;
+        };
+        player.addX = function (step) {
+            this.x += step;
+        };
+        player.addY = function (step) {
+            this.y += step;
+        };
+        player.rotate = function (degree) {
+            this.rotation += Math.PI / 180 * degree;
+        };
+        player.rotateTo = function (degree) {
+            this.rotation = Math.PI / 180 * degree;
+        };
+        player.circleTo = async function (degree, time = 1) {
+            if (mixlySprite.running) {
+                mixlySprite.displayTag = true;
+                mixlySprite.processingDisplayEvent = {
+                    sprite: this,
+                    targetDegree: degree,
+                    totalTime: time * 1000,
+                    startTime: performance.now(),
+                    displayType: 'circle'
+                };
+                var prom = new Promise((resolve) => {
+                    if (mixlySprite.displayTag === false) {
+                        resolve();
+                    } else {
+                        const checkTagInterval = setInterval(() => {
+                            if (mixlySprite.displayTag === false) {
+                                clearInterval(checkTagInterval);
+                                resolve();
+                            }
+                        }, 10);
+                    }
+                });
+                return await prom;
+            }
+            mixlySprite.successProcessingDisplayEvents.push({
+                sprite: this,
+                targetDegree: degree,
+                totalTime: time * 1000,
+                startTime: performance.now(),
+                displayType: 'circle'
+            });
+            return 0;
+        };
+        player.hit = function (sprite) {
+            return mixlySprite.hitTestRectangle(this, sprite);
+        };
+        player.outOfScreen = function () {
+            return this.y >= mixlySprite.renderer.height || this.y <= 0 || this.x <= 0 || this.x >= mixlySprite.renderer.width;
+        };
+        player.mouseAction = function (func) {
+            this.runningMouseDown = func;
+        };
+
+        // new
+        player.setScale = function (h = 0, w = 0) {
+            if (h == 0) h = this.height;
+            if (w == 0) w = this.width;
+            this.height = h;
+            this.width = w;
+        }
+        player.filterGray = function () {
+            const grayscaleFilter = new PIXI.filters.ColorMatrixFilter();
+            grayscaleFilter.blackAndWhite();
+            this.filters = [grayscaleFilter];
+        }
+        player.filterBrighter = function () {
+            const brightnessFilter = new PIXI.filters.ColorMatrixFilter();
+            brightnessFilter.brightness(1.25); // 增加亮度
+            this.filters = [brightnessFilter];
+        }
+        player.filterOrigin = function () {
+            this.filters = null;
+        }
+
+        mixlySprite.stage.addChild(player);
+        mixlySprite.sprites[name] = player;
+    }
+    return name;
+}
+
+mixlySprite.clearAllSprites = () => {
+    if (mixlySprite.backgroundSprite && mixlySprite.backgroundSprite.parent) mixlySprite.backgroundSprite.parent.removeChild(mixlySprite.backgroundSprite);
+    for (const name in mixlySprite.sprites) {
+        mixlySprite.sprites[name].parent.removeChild(mixlySprite.sprites[name]);
+        delete mixlySprite.sprites[name];
+    }
+    for (const name in mixlySprite.texts) {
+        mixlySprite.texts[name].parent.removeChild(mixlySprite.texts[name]);
+        delete mixlySprite.texts[name];
+    }
+    mixlySprite.counter = 0;
+    mixlySprite.clearTimer();
+    return 0;
+}
+
+mixlySprite.createText = (text, x = mixlySprite.canvasWidth / 2, y = mixlySprite.canvasHeight / 2, name = '') => {
+    if (name == '') {
+        name = 'text' + (++mixlySprite.counter);
+    }
+    if (!mixlySprite.sprites[name] && !mixlySprite.texts[name]) {
+        var textObj = new PIXI.Text(text);
+        textObj.name = name;
+        textObj.x = x;
+        textObj.y = y;
+        textObj.interactive = true;
+        textObj.buttonMode = true;
+        textObj.on('mousedown', function (event) {
+            this.isDown = true;
+            this.isUp = false;
+            if (!mixlySprite.state) {
+                this.data = event.data;
+                this.alpha = 0.5;
+                this.dragging = true;
+            } else this.runningMouseDown();
+        })
+            .on('mouseup', function () {
+                this.isDown = false;
+                this.isUp = true;
+                if (!mixlySprite.state) {
+                    this.alpha = 1;
+                    this.dragging = false;
+                    this.data = null;
+                }
+            })
+            .on('mouseupoutside', function () {
+                this.isDown = false;
+                this.isUp = true;
+                if (!mixlySprite.state) {
+                    this.alpha = 1;
+                    this.dragging = false;
+                    this.data = null;
+                }
+            })
+            .on('mousemove', function () {
+                if (!mixlySprite.state)
+                    if (this.dragging) {
+                        var newPosition = this.data.getLocalPosition(this.parent);
+                        this.position.x = newPosition.x;
+                        this.position.y = newPosition.y;
+                    }
+            });
+        textObj.runningMouseDown = new Function("");
+        textObj.changeText = function (text) {
+            this.text = text;
+        };
+        textObj.show = function () {
+            this.visible = true;
+        };
+        textObj.hide = function () {
+            this.visible = false;
+        };
+        mixlySprite.stage.addChild(textObj);
+        mixlySprite.texts[name] = textObj;
+    }
+    return name;
+}
+
+mixlySprite.hitTestRectangle = (r1, r2) => {
+    let hit, combinedHalfWidths, combinedHalfHeights, vx, vy;
+    hit = false;
+    r1.centerX = r1.x + r1.width / 2;
+    r1.centerY = r1.y + r1.height / 2;
+    r2.centerX = r2.x + r2.width / 2;
+    r2.centerY = r2.y + r2.height / 2;
+    r1.halfWidth = r1.width / 2;
+    r1.halfHeight = r1.height / 2;
+    r2.halfWidth = r2.width / 2;
+    r2.halfHeight = r2.height / 2;
+    vx = r1.centerX - r2.centerX;
+    vy = r1.centerY - r2.centerY;
+    combinedHalfWidths = r1.halfWidth + r2.halfWidth;
+    combinedHalfHeights = r1.halfHeight + r2.halfHeight;
+    if (Math.abs(vx) < combinedHalfWidths) {
+        if (Math.abs(vy) < combinedHalfHeights) {
+            hit = true;
+        } else {
+            hit = false;
+        }
+    } else {
+        hit = false;
+    }
+    return hit;
+};
+
+mixlySprite.repeat = (func) => {
+    mixlySprite.repeatPlay = func;
+}
+
+mixlySprite.isKeyboardHit = (keyvalue) => {
+    if (!mixlySprite.keys[keyvalue]) {
+        let key = mixlySprite.keyboard(keyvalue);
+        mixlySprite.keys[keyvalue] = key;
+    }
+    return mixlySprite.keys[keyvalue].isDown;
+}
+
+mixlySprite.keyboardListener = (keyvalue, func) => {
+    if (!mixlySprite.keys[keyvalue]) {
+        let key = mixlySprite.keyboard(keyvalue);
+        key.press = function () {
+            if (mixlySprite.state) func();
+        };
+        mixlySprite.keys[keyvalue] = key;
+    } else {
+        mixlySprite.keys[keyvalue].press = function () {
+            if (mixlySprite.state) func();
+        };
+    }
+}
+mixlySprite.keyboard = (value) => {
+    let key = {};
+    key.value = value;
+    key.isDown = false;
+    key.isUp = true;
+    key.press = undefined;
+    key.release = undefined;
+    key.downHandler = event => {
+        if (event.key === key.value) {
+            if (key.isUp && key.press) key.press();
+            key.isDown = true;
+            key.isUp = false;
+            event.preventDefault();
+        }
+    };
+    key.upHandler = event => {
+        if (event.key === key.value) {
+            if (key.isDown && key.release) key.release();
+            key.isDown = false;
+            key.isUp = true;
+            event.preventDefault();
+        }
+    };
+    const downListener = key.downHandler.bind(key);
+    const upListener = key.upHandler.bind(key);
+    window.addEventListener(
+        "keydown", downListener, false
+    );
+    window.addEventListener(
+        "keyup", upListener, false
+    );
+    key.unsubscribe = () => {
+        window.removeEventListener("keydown", downListener);
+        window.removeEventListener("keyup", upListener);
+    };
+    return key;
+}
+
+mixlySprite.clearTimer = () => {
+    mixlySprite.startTime = performance.now();
+}
+
+mixlySprite.gameLoopDisplay = () => {
+    if (mixlySprite.processingDisplayEvent) {
+        const pSE = mixlySprite.processingDisplayEvent;
+        switch (pSE.displayType) {
+            case 'slide':
+                if (performance.now() >= pSE.totalTime + pSE.startTime) {
+                    pSE.sprite.moveTo(pSE.targetX, pSE.targetY);
+                    mixlySprite.displayTag = false;
+                    mixlySprite.processingDisplayEvent = null;
+                } else {
+                    var leftLoops = mixlySprite.currentFPS * (pSE.totalTime + pSE.startTime - performance.now()) / 1000;
+                    if (leftLoops >= 1) {
+                        pSE.sprite.addX((pSE.targetX - pSE.sprite.x) / leftLoops);
+                        pSE.sprite.addY((pSE.targetY - pSE.sprite.y) / leftLoops);
+                    }
+                }
+                break;
+            case 'expand':
+                if (performance.now() >= pSE.totalTime + pSE.startTime) {
+                    pSE.sprite.enlargeTo(pSE.targetS);
+                    mixlySprite.displayTag = false;
+                    mixlySprite.processingDisplayEvent = null;
+                } else {
+                    var leftLoops = mixlySprite.currentFPS * (pSE.totalTime + pSE.startTime - performance.now()) / 1000;
+                    if (leftLoops >= 1) {
+                        pSE.sprite.enlarge((pSE.targetS - Math.sqrt(pSE.sprite.height * pSE.sprite.width)) / leftLoops);
+                    }
+                }
+                break;
+            case 'circle':
+                if (performance.now() >= pSE.totalTime + pSE.startTime) {
+                    pSE.sprite.rotateTo(pSE.targetDegree);
+                    mixlySprite.displayTag = false;
+                    mixlySprite.processingDisplayEvent = null;
+                } else {
+                    var leftLoops = mixlySprite.currentFPS * (pSE.totalTime + pSE.startTime - performance.now()) / 1000;
+                    if (leftLoops >= 1) {
+                        pSE.sprite.rotate((pSE.targetDegree - pSE.sprite.rotation * 180 / Math.PI) / leftLoops);
+                    }
+                }
+                break;
+        }
+    }
+
+    if (!mixlySprite.running) {
+        if (mixlySprite.successProcessingDisplayEvents.length) {
+            for (var pSEindex = mixlySprite.successProcessingDisplayEvents.length - 1; pSEindex >= 0; pSEindex--) {
+                const pSE = mixlySprite.successProcessingDisplayEvents[pSEindex];
+                switch (pSE.displayType) {
+                    case 'slide':
+                        if (performance.now() >= pSE.totalTime + pSE.startTime) {
+                            pSE.sprite.moveTo(pSE.targetX, pSE.targetY);
+                            mixlySprite.successProcessingDisplayEvents.splice(pSEindex, 1);
+                        } else {
+                            var leftLoops = mixlySprite.currentFPS * (pSE.totalTime + pSE.startTime - performance.now()) / 1000;
+                            if (leftLoops >= 1) {
+                                pSE.sprite.addX((pSE.targetX - pSE.sprite.x) / leftLoops);
+                                pSE.sprite.addY((pSE.targetY - pSE.sprite.y) / leftLoops);
+                            }
+                        }
+                        break;
+                    case 'expand':
+                        if (performance.now() >= pSE.totalTime + pSE.startTime) {
+                            pSE.sprite.enlargeTo(pSE.targetS);
+                            mixlySprite.successProcessingDisplayEvents.splice(pSEindex, 1);
+                        } else {
+                            var leftLoops = mixlySprite.currentFPS * (pSE.totalTime + pSE.startTime - performance.now()) / 1000;
+                            if (leftLoops >= 1) {
+                                pSE.sprite.enlarge((pSE.targetS - Math.sqrt(pSE.sprite.height * pSE.sprite.width)) / leftLoops);
+                            }
+                        }
+                        break;
+                    case 'circle':
+                        if (performance.now() >= pSE.totalTime + pSE.startTime) {
+                            pSE.sprite.rotateTo(pSE.targetDegree);
+                            mixlySprite.successProcessingDisplayEvents.splice(pSEindex, 1);
+                        } else {
+                            var leftLoops = mixlySprite.currentFPS * (pSE.totalTime + pSE.startTime - performance.now()) / 1000;
+                            if (leftLoops >= 1) {
+                                pSE.sprite.rotate((pSE.targetDegree - pSE.sprite.rotation * 180 / Math.PI) / leftLoops);
+                            }
+                        }
+                        break;
+                }
+            }
+        }
+    }
+}
+
+mixlySprite.changeWidth = (w) => {
+    const $canvas = $(mixlySprite.renderer.view);
+    const canvasWidth = $canvas.width();
+    const canvasHeight = $canvas.height();
+    $canvas.width(w);
+    $canvas.height(w / canvasWidth * canvasHeight);
+}
+
+mixlySprite.kill = () => {
+    mixlySprite.state = false;
+    mixlySprite.repeatPlay = new Function();
+    for (let i in mixlySprite.keys) {
+        mixlySprite.keys[i].unsubscribe();
+        delete mixlySprite.keys[i];
+    }
+    mixlySprite.processingDisplayEvent = null;
+    mixlySprite.displayTag = false;
+    mixlySprite.running = false;
+    mixlySprite.clearTimer();
+}
+
+mixlySprite.runit = (container) => {
+    const $container = $(container);
+    $container.empty();
+    // Keep the scale mode to nearest
+    PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST;
+    mixlySprite.renderer = PIXI.autoDetectRenderer(mixlySprite.canvasWidth, mixlySprite.canvasHeight, { backgroundColor: 0x00FFFFFF });
+    $container.append(mixlySprite.renderer.view);
+    // Create mixlySprite.stage container
+    // mixlySprite.stage = new PIXI.Container();
+    mixlySprite.pointer = { x: 0, y: 0 };
+    mixlySprite.stage.sortableChildren = true;
+    mixlySprite.stage.interactive = true;
+    mixlySprite.stage.on("mousemove", (event = PIXI.InteractionEvent) => {
+        mixlySprite.pointer.x = event.data.global.x;
+        mixlySprite.pointer.y = event.data.global.y;
+    });
+    mixlySprite.lastFrameTime = 0;
+    mixlySprite.running = true;
+    if (!mixlySprite.lastFrameTime) {
+        mixlySprite.lastFrameTime = performance.now();
+        mixlySprite.lastSecond = performance.now();
+    }
+    mixlySprite.animate(performance.now());
+    mixlySprite.repeatPlay = new Function();
+    for (let i in mixlySprite.keys) {
+        mixlySprite.keys[i].unsubscribe();
+        delete mixlySprite.keys[i];
+    }
+    if (mixlySprite.backgroundSprite) {
+        mixlySprite.backgroundSprite.runningMouseDown = new Function();
+    }
+    for (let i in mixlySprite.sprites) {
+        mixlySprite.sprites[i].runningMouseDown = new Function();
+    }
+    for (let i in mixlySprite.texts) {
+        mixlySprite.texts[i].runningMouseDown = new Function();
+    }
+    mixlySprite.processingDisplayEvent = null;
+    mixlySprite.displayTag = false;
+    mixlySprite.clearTimer();
+    mixlySprite.changeWidth($('body').width() / 2);
+    mixlySprite.state = true;
+}
+
+window.mixlySprite = mixlySprite;
+
+export default mixlySprite;

boards/default_src/python_pyodide/others/python-shell.js

@@ -1,6 +1,7 @@
 import * as Blockly from 'blockly/core';
 import * as path from 'path';
 import $ from 'jquery';
+import mixlySprite from './pixi-sprite';
 import {
     Workspace,
     Env,
@@ -213,7 +214,12 @@ export default class PythonShell {
         if (code.indexOf('import matplotlib.pyplot') !== -1) {
             code += '\nplt.clf()\n';
         }
-        this.#statusBarsManager_.changeTo('output');
+        mixlySprite.runit(this.#statusBarImage_.getContent()[0]);
+        if (code.indexOf('import sprite') !== -1 || code.indexOf('from sprite import') !== -1) {
+            this.#statusBarsManager_.changeTo('images');
+        } else {
+            this.#statusBarsManager_.changeTo('output');
+        }
         this.#statusBarsManager_.show();
         this.#statusBarTerminal_.setValue(`${Msg.Lang['shell.running']}...\n`);
         this.#running_ = true;

boards/default_src/python_pyodide/package.json

@@ -22,7 +22,8 @@
         "@basthon/kernel-loader": "^0.62.21",
         "@zenfs/core": "^1.4.0",
         "@zenfs/dom": "^1.0.6",
-        "idb-keyval": "^6.2.1"
+        "idb-keyval": "^6.2.1",
+        "pixi.js": "^3.0.8"
     },
     "main": "./export.js",
     "author": "Mixly Team",

boards/default_src/python_pyodide/templates/html/statusbar-image.html

@@ -4,6 +4,9 @@
         flex-direction: row;
         justify-content: center;
         align-items: center;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        overflow: auto;
     }
 
     html[data-bs-theme=light] div[m-id="{{d.mId}}"] {

boards/default_src/python_pyodide/whl/sprite-project/setup.py

@@ -0,0 +1,14 @@
+from setuptools import setup, find_packages
+
+setup(
+    name='sprite',
+    version='0.0.1',
+    packages=find_packages(),
+    install_requires=[],
+    author='Mixly Team',
+    author_email='',
+    description='适用于pyodide的sprite包',
+    classifiers=[
+        'Programming Language :: Python :: 3',
+    ]
+)

boards/default_src/python_pyodide/whl/sprite-project/sprite/__init__.py

@@ -0,0 +1,120 @@
+from js import window
+
+
+def createBackground(img):
+    return window.mixlySprite.createBackground(img)
+
+
+class Sprite:
+    def __init__(self, img, x, y, name=''):
+        self.vname = window.mixlySprite.createASprite(img, x, y, name)
+    
+    @property
+    def this(self):
+        return window.mixlySprite.sprites.__getattribute__(self.vname)
+
+    def show(self):
+        return self.this.show()
+
+    def hide(self):
+        return self.this.hide()
+        
+    def enlarge(self):
+        return self.this.enlarge()
+    
+    def enlargeTo(self, s):
+        return self.this.enlargeTo(s)
+        
+    def expandTo(self, s, time):
+        return self.this.expandTo(s, time)
+        
+    def move(self, step):
+        return self.this.move(step)
+        
+    def moveTo(self, x, y):
+        return self.this.moveTo(x, y)
+        
+    async def slideTo(self, x, y, time):
+        return await self.this.slideTo(x, y, time)
+        
+    def addX(self, step):
+        return self.this.addX(step)
+        
+    def addY(self, step):
+        return self.this.addY(step)
+    
+    def getX(self):
+        return self.this.getX()
+    
+    def getY(self):
+        return self.this.getY()
+    
+    def rotate(self, degree):
+        return self.this.rotate(degree)
+    
+    def rotateTo(self, degree):
+        return self.this.rotateTo(degree)
+    
+    def circleTo(self, degree):
+        return self.this.circleTo(degree)
+    
+    def hit(self, sprite2):
+        return self.this.hit(sprite2.this)
+    
+    def outOfScreen(self):
+        return self.this.outOfScreen()
+    
+    def mouseAction(self, calc):
+        return self.this.mouseAction(calc)
+    
+    def isClicked(self):
+        return self.this.isDown
+    
+    def setScale(self, h, w):
+        return self.this.setScale(h, w)
+    
+    def filterGray(self):
+        return self.this.filterGray()
+    
+    def filterBrighter(self):
+        return self.this.filterBrighter()
+    
+    def filterOrigin(self):
+        return self.this.filterOrigin()
+    
+
+class Text:
+    def __init__(self, text, x, y, name=''):
+        self.vname = window.mixlySprite.createText(text, x, y, name)
+    
+    @property
+    def this(self):
+        return window.mixlySprite.texts.__getattribute__(self.vname)
+    
+    def changeText(self, text):
+        return self.this.changeText(text)
+    
+    def show(self):
+        return self.this.show()
+    
+    def hide(self):
+        return self.this.hide()
+    
+
+def clearAllSprites():
+    return window.mixlySprite.clearAllSprites()
+    
+def repeat(calc):
+    return window.mixlySprite.repeat(calc)
+    
+def keyboardListener(calc):
+    return window.mixlySprite.keyboardListener(key, calc)
+    
+def isKeyboardHit(keyvalue):
+    return window.mixlySprite.isKeyboardHit(keyvalue)
+
+def getTime():
+    return window.mixlySprite.timer / 1000
+
+def clearTimer():
+    return window.mixlySprite.clearTimer()