スムーズに動くタートルグラフィクスプラグイン

タートルグラフィクス。違いは移動と回転がアニメーションとして行われること。追加命令がいくつかあるものの基本的な命令は互換(なのでplugin_turtleとは多く命令が重複している)。ゾウとパンダについては画像が無いので無し。

エディタ

プログラム

/**
 * smooth Turtle Graphics for Web browser (nadesiko3)
 * plugin_turtle_promise.ts
 */
const turtleImageURL = 'https://n3s.nadesi.com/image.php?f=64.png';
const elephantImageURL = '';
const pandaImageURL = '';
const cancerImageURL = 'https://n3s.nadesi.com/image.php?f=533.png';
const ebiImageURL = '';
const sharkImageURL = '';

class Runner {
    constructor(tt) {
        this.tt = tt;
        this.jobs = [];
        this.jobStep = 'fetch';
        this.currentJob = null;
        this.animationRunner = new Runner$1(tt);
    }
    reset() {
        // 未実行の全JOBに対してresolve(1)を呼び出す。
        for (const job of this.jobs) {
            const resolve = job.resolve;
            if (resolve !== null) {
                resolve(1);
            }
        }
        this.jobs = []; // ジョブをクリア
        this.currentJob = null;
        this.jobStep = 'fetch';
    }
    add(command) {
        const promise = command.getPromise();
        this.jobs.push(command);
        return promise;
    }
    hasJob() {
        return this.jobs.length > 0 || this.currentJob !== null || this.jobStep !== 'fetch';
    }
    run(time, waitTime, immediateRun, immediateRunAction) {
        while (((immediateRun && immediateRunAction) || time > 0) && this.hasJob()) {
            switch (this.jobStep) {
                case 'fetch':
                    this.fetch();
                    break;
                case 'setup':
                    this.setup(waitTime, immediateRun, immediateRunAction);
                    break;
                case 'tick':
                    time = this.tick(time, immediateRun, immediateRunAction);
                    break;
                case 'end':
                    time = this.end(time);
                    break;
            }
        }
        return time;
    }
    fetch() {
        // 処理中のJOBは無いので次のJOBを取得して処理に着手する
        this.currentJob = this.jobs.shift() || null;
        this.jobStep = this.currentJob !== null ? 'setup' : 'fetch';
    }
    setup(waitTime, immediateRun, immediateRunAction) {
        if (!this.currentJob) {
            this.jobStep = 'fetch';
            return;
        }
        if (!immediateRunAction && this.currentJob.useAnimation(this.tt)) {
            this.animationRunner.add(this.currentJob.generateAnimationJob(this.tt));
        }
        else {
            this.currentJob.setup(this.tt, waitTime, immediateRun);
        }
        this.jobStep = 'tick';
    }
    tick(time, immediateRun, immediateRunAction) {
        if (!this.currentJob) {
            this.jobStep = 'fetch';
            return time;
        }
        let remainTime;
        if (this.animationRunner.hasJob()) {
            remainTime = this.animationRunner.run(time, immediateRunAction);
            if (!this.animationRunner.hasJob()) {
                this.jobStep = 'end';
            }
        }
        else {
            remainTime = this.currentJob.tick(this.tt, time, immediateRun);
            if (remainTime > 0 || immediateRun) {
                this.jobStep = 'end';
            }
        }
        return remainTime;
    }
    end(time) {
        if (!this.currentJob) {
            this.jobStep = 'fetch';
            return time;
        }
        const remainTime = this.currentJob.end(this.tt, time);
        this.jobStep = 'fetch';
        this.currentJob = null;
        return remainTime;
    }
}

class DrawCanvasEventArgs {
    constructor(id, cmd, params) {
        this.id = id;
        this.cmd = cmd;
        this.params = params;
    }
}
const TypedTurtleSmoothEventTarget = EventTarget;
class TurtleSmooth extends TypedTurtleSmoothEventTarget {
    constructor(id, soul) {
        super();
        this.id = id;
        this.img = null;
        this.canvas = null;
        this.soul = soul;
        this.ctx = null;
        this.dir = 270; // 上向き
        this.iw = 32;
        this.ih = 32;
        this.cw = this.iw * 1.5;
        this.ch = this.ih * 1.5;
        this.x = 0;
        this.y = 0;
        this.jobRunner = new Runner(this);
        this.spdRotate = 15 / 100;
        this.spdMove = 10 / 100;
        this.f_update = true;
        this.flagLoaded = false;
        this.f_visible = true;
        this.jobWait = 0;
    }
    clear() {
        this.jobRunner.reset();
        if (this.ctx) {
            this.ctx = null;
        }
        if (this.canvas) {
            document.body.removeChild(this.canvas);
            this.canvas = null;
        }
        if (this.img) {
            this.img = null;
        }
    }
    loadImage(url) {
        if (!this.img) {
            const img = document.createElement('img');
            img.onload = () => {
                if (this.img) {
                    this.iw = this.img.width / 2;
                    this.ih = this.img.height / 2;
                }
                else {
                    this.iw = 32;
                    this.ih = 32;
                }
                if (!this.canvas) {
                    this.canvas = document.createElement('canvas');
                }
                this.canvas.id = this.id.toString();
                this.ctx = this.canvas.getContext('2d');
                // 回転中は対角線の長さ分が必要になる可能性がある
                this.canvas.width = this.iw * 3;
                this.canvas.height = this.ih * 3;
                this.cw = this.canvas.width / 2;
                this.ch = this.canvas.height / 2;
                this.flagLoaded = true;
                this.f_update = true;
                this.canvas.style.position = 'absolute';
                document.body.appendChild(this.canvas);
                this.raiseImageChangede();
            };
            img.onerror = () => {
                console.log('カメの読み込みに失敗');
                this.flagLoaded = true;
                this.f_visible = false;
                this.f_update = true;
                this.raiseImageChangede();
            };
            this.img = img;
        }
        this.img.src = url;
    }
    drawTurtle(cr) {
        if (!this.canvas || !this.ctx || !this.img) {
            return;
        }
        if (!cr.visible) {
            return;
        }
        // カメの位置を移動
        this.canvas.style.left = (cr.left + this.x - this.cw) + 'px';
        this.canvas.style.top = (cr.top + this.y - this.ch) + 'px';
        if (!this.f_update) {
            return;
        }
        /* istanbul ignore if */
        if (!this.flagLoaded) {
            return;
        }
        this.f_update = false;
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        if (!this.f_visible) {
            return;
        }
        if (this.dir !== 270) {
            const rad = (this.dir + 90) * 0.017453292519943295;
            this.ctx.save();
            this.ctx.translate(this.cw, this.ch);
            this.ctx.rotate(rad);
            this.ctx.translate(-(this.iw), -(this.ih));
            this.ctx.drawImage(this.img, 0, 0);
            this.ctx.restore();
        }
        else {
            this.ctx.drawImage(this.img, this.cw - this.iw, this.ch - this.ih);
        }
    }
    addCommand(command) {
        this.soul.walkValidation(command);
        return this.jobRunner.add(command);
    }
    runJob(time, defaultWait, immediateRunAction, waitForTurteImage) {
        if (!this.flagLoaded && waitForTurteImage) {
            // console.log('[TURTLE] waiting ...')
            return true;
        }
        const immediateRun = defaultWait <= 0;
        // 以下の２つの条件を満たしている間ループする。
        // 即時実行であるか、即時実行ではない場合は経過時間の残りがあること。
        // 未処理のJOBが残っているか、処理中のJOBがあること。
        time = this.jobRunner.run(time, defaultWait, immediateRun, immediateRunAction);
        return (this.jobRunner.hasJob());
    }
    raiseImageChangede() {
        const evt = new CustomEvent('imageChanged');
        this.dispatchEvent(evt);
    }
    raiseDrawCanvas(cmd, params) {
        const args = new DrawCanvasEventArgs(this.id, cmd, params);
        const evt = new CustomEvent('drawCanvas', { detail: args });
        this.dispatchEvent(evt);
    }
}

class RotateToDir extends Rotate$1 {
    constructor(angle) {
        angle = ((angle % 360) + 360) % 360;
        super(angle, 'r');
        this.angle = angle;
    }
    setup(tt) {
        let deg = (this.angle - tt.dir + 360) % 360;
        if (deg > 180) {
            deg = deg - 360;
        }
        const dir = deg < 0 ? 'l' : 'r';
        this.deg = Math.abs(deg);
        this.lr = dir;
        this.originPos = [tt.x, tt.y];
        this.originDir = tt.dir;
        this.remain = Math.abs(this.deg);
    }
    tick(tt, time) {
        const delta = time * tt.spdRotate;
        if (delta < this.remain) {
            const direction = this.lr === 'r' ? 1 : -1;
            this.remain -= delta;
            tt.dir = (tt.dir + (delta * direction % 360) + 360) % 360;
            time = 0;
            tt.f_update = true;
        }
        return time;
    }
    end(tt, time) {
        if (tt.spdRotate > 0) {
            time -= Math.floor(this.remain / tt.spdRotate);
        }
        this.remain = 0;
        tt.dir = this.angle;
        return time;
    }
}

class Move extends CommandBase {
    constructor(p, direct) {
        super();
        this.p = p;
        this.direct = !!direct;
    }
    useAnimation(tt) {
        return !this.direct && (tt.spdMove > 0 || tt.spdRotate > 0);
    }
    generateAnimationJob(tt) {
        const dx = this.p[0] - tt.x;
        const dy = this.p[1] - tt.y;
        const angleRad = Math.atan2(dy, dx);
        const angle = angleRad * 57.29577951308232;
        const targetdir = (angle + 360) % 360;
        let deg = (targetdir - tt.dir + 360) % 360;
        if (deg > 180) {
            deg = deg - 360;
        }
        const fd = tt.soul.getMoveDirection();
        let lr;
        let dir;
        if (fd === 'lr') {
            dir = deg < 0 ? 'l' : 'r';
            deg = Math.abs(deg);
            if (deg < 90) {
                lr = dir === 'l' ? 'r' : 'l';
                deg = 90 - deg;
            }
            else {
                lr = dir;
                deg = deg - 90;
            }
        }
        else if (fd === 'b') {
            lr = deg < 0 ? 'r' : 'l';
            deg = 180 - Math.abs(deg);
            dir = 'b';
        }
        else {
            lr = deg < 0 ? 'l' : 'r';
            deg = Math.abs(deg);
            dir = 'f';
        }
        // カメの移動距離を算出
        const fdv = Math.sqrt(dx * dx + dy * dy);
        return [
            new Rotate$1(deg, lr),
            new Move$1(fdv, dir)
        ];
    }
    static parse(ca) {
        return new Move([parseFloat(ca[1]), parseFloat(ca[2])], false);
    }
    action(tt) {
        // 線を引く
        tt.raiseDrawCanvas('line', [[tt.x, tt.y], this.p]);
        // カメの角度を変更
        const mvRad = Math.atan2(this.p[1] - tt.y, this.p[0] - tt.x);
        tt.dir = mvRad * 57.29577951308232;
        tt.f_update = true;
        // 実際に位置を移動
        tt.x = this.p[0];
        tt.y = this.p[1];
    }
}
Move.cmd = 'mv';
Move.cmdAlias = [];

class Jump extends CommandBase {
    constructor(p) {
        super();
        this.p = p;
    }
    static parse(ca) {
        return new Jump([parseFloat(ca[1]), parseFloat(ca[2])]);
    }
    action(tt) {
        // 起点を移動する
        tt.x = this.p[0];
        tt.y = this.p[1];
    }
}
Jump.cmd = 'xy';
Jump.cmdAlias = ['warp', 'jump'];

class Angle extends CommandBase {
    constructor(deg, direct) {
        super();
        this.deg = deg;
        this.direct = !!direct;
    }
    useAnimation(tt) {
        return !this.direct && tt.spdRotate > 0;
    }
    generateAnimationJob(tt) {
        const targetdir = (((this.deg - 90) % 360) + 360) % 360;
        // let deg = (targetdir - tt.dir + 360) % 360
        // if (deg > 180) {
        //     deg = deg - 360
        // }
        // const dir = deg < 0 ? 'l' : 'r'
        return [new RotateToDir(targetdir)];
    }
    static parse(ca) {
        return new Angle(parseFloat(ca[1]), false);
    }
    action(tt) {
        tt.dir = ((this.deg - 90 % 360) + 360) % 360;
        tt.f_update = true;
    }
}
Angle.cmd = 'angle';
Angle.cmdAlias = [];

class Walk extends CommandBase {
    constructor(len, direction) {
        super();
        this.len = len;
        this.direction = direction;
    }
    useAnimation(tt) {
        return tt.spdMove > 0;
    }
    generateAnimationJob(tt) {
        let fdv = this.len;
        let dir = this.direction;
        if (fdv < 0) {
            dir = DirOpposite[dir];
            fdv = -fdv;
        }
        return [new Move$1(fdv, dir)];
    }
    static parse(ca) {
        if (ca[0] === 'fd') {
            const cmd = ca[2];
            const value = parseFloat(ca[1]);
            switch (cmd) {
                case 'f':
                case '1':
                    return new Walk(value, 'f');
                case 'b':
                case '-1':
                    return new Walk(value, 'b');
                case 'l':
                    return new Walk(value, 'l');
                case 'r':
                    return new Walk(value, 'r');
            }
        }
        else {
            const cmd = ca[0];
            const value = parseFloat(ca[1]);
            if (cmd === 'forward') {
                return new Walk(value, 'f');
            }
            else if (cmd === 'backward' || cmd === 'back') {
                return new Walk(value, 'b');
            }
            else if (cmd === 'left') {
                return new Walk(value, 'l');
            }
            else if (cmd === 'right') {
                return new Walk(value, 'r');
            }
        }
        return null;
    }
    action(tt) {
        const fdv = this.len;
        const dir = this.direction;
        const deg = (tt.dir + DirToDeg[dir]) % 360;
        const rad = deg * 0.017453292519943295;
        const x2 = tt.x + Math.cos(rad) * fdv;
        const y2 = tt.y + Math.sin(rad) * fdv;
        tt.raiseDrawCanvas('line', [[tt.x, tt.y], [x2, y2]]);
        tt.x = x2;
        tt.y = y2;
    }
}
Walk.cmd = 'fd';
Walk.cmdAlias = ['forward', 'back', 'backward', 'left', 'right'];

class Rotate extends CommandBase {
    constructor(deg, lr) {
        super();
        this.deg = deg;
        this.lr = lr;
    }
    useAnimation(tt) {
        return tt.spdRotate > 0;
    }
    generateAnimationJob(tt) {
        const deg = this.deg * (this.lr === 'l' ? -1 : 1);
        const dir = deg < 0 ? 'l' : 'r';
        return [new Rotate$1(Math.abs(deg), dir)];
    }
    static parse(ca) {
        if (ca[0] === 'rot' || ca[0] === 'rotate') {
            const cmd = ca[2];
            const value = parseFloat(ca[1]);
            switch (cmd) {
                case 'r':
                case '1':
                    return new Rotate(value, 'r');
                case 'l':
                case '-1':
                    return new Rotate(value, 'l');
            }
        }
        else {
            const cmd = ca[0];
            const value = parseFloat(ca[1]);
            if (cmd === 'rotR' || cmd === 'rotateR') {
                return new Rotate(value, 'r');
            }
            else if (cmd === 'rotL' || cmd === 'roteteL') {
                return new Rotate(value, 'l');
            }
        }
        return null;
    }
    action(tt) {
        const deg = this.deg * (this.lr === 'l' ? -1 : 1);
        tt.dir = (tt.dir + (deg % 360) + 360) % 360;
        tt.f_update = true;
    }
}
Rotate.cmd = 'rot';
Rotate.cmdAlias = ['rotR', 'rotL', 'rotate', 'rotateR', 'rotateL'];

class Curve extends CommandBase {
    constructor(r, deg, dir, lr) {
        super();
        this.r = r;
        this.deg = deg;
        this.dir = dir;
        this.lr = lr;
    }
    useAnimation(tt) {
        return tt.spdMove > 0;
    }
    generateAnimationJob(tt) {
        let deg = this.deg;
        let dir = this.dir;
        if (deg < 0) {
            deg = -deg;
            dir = dir === 'f' ? 'b' : 'f';
        }
        return [new Curve$1(this.r, deg, dir, this.lr)];
    }
    static parse(ca) {
        let r = null;
        let deg = null;
        let dir = null;
        let lr = null;
        for (const p of ca) {
            if (p === 'curve') ;
            else if (p === 'tl' || p === 'toleft') {
                lr = 'l';
            }
            else if (p === 'tr' || p === 'toright') {
                lr = 'r';
            }
            else if (p === 'l' || p === 'left') {
                dir = 'l';
            }
            else if (p === 'r' || p === 'right') {
                dir = 'r';
            }
            else if (p === 'f' || p === 'forward') {
                dir = 'f';
            }
            else if (p === 'b' || p === 'backward' || p === 'back') {
                dir = 'b';
            }
            else {
                if (r === null) {
                    r = parseFloat(p);
                }
                else if (deg === null) {
                    deg = parseFloat(p);
                }
            }
        }
        if (dir === null) {
            dir = 'f';
        }
        if (r === null || deg === null || lr === null) {
            return null;
        }
        return new Curve(r, deg, dir, lr);
    }
    action(tt) {
        const r = this.r;
        const deg = this.deg * (this.dir === 'b' ? -1 : 1);
        const dirDirection = this.lr === 'l' ? -1 : 1;
        const degDirection = deg < 0 ? -1 : 1;
        const dir = (tt.dir + 90 * dirDirection + 360) % 360;
        const rad = dir * 0.017453292519943295;
        const ox = tt.x + Math.cos(rad) * r;
        const oy = tt.y + Math.sin(rad) * r;
        const deg1 = (dir + 180) % 360;
        const deg2 = (deg1 + (deg * dirDirection) % 360 + 360) % 360;
        const rad2 = deg2 * 0.017453292519943295;
        tt.raiseDrawCanvas('arc', [[ox, oy], r, deg1, deg2, degDirection * dirDirection]);
        tt.dir = (tt.dir + (deg * dirDirection) % 360 + 360) % 360;
        tt.x = ox + Math.cos(rad2) * r;
        tt.y = oy + Math.sin(rad2) * r;
        tt.f_update = true;
    }
}
Curve.cmd = 'curve';
Curve.cmdAlias = [];

class Path extends CommandBase {
    constructor(pathCmd) {
        super();
        this.pathCmd = pathCmd;
    }
    static parse(ca) {
        const cmdIndex = ca[0] === 'path' ? 1 : 0;
        const cmd = ca[cmdIndex];
        if (cmd === 'begin' || cmd === 'close') {
            return new Path(cmd);
        }
        return null;
    }
    action(tt) {
        if (this.pathCmd === 'begin') {
            tt.raiseDrawCanvas('beginPath', [tt.x, tt.y]);
        }
        else {
            tt.raiseDrawCanvas('closePath', []);
        }
    }
}
Path.cmd = 'path';
Path.cmdAlias = ['begin', 'close'];

class Raw extends CommandBase {
    constructor(rawCmd) {
        super();
        this.rawCmd = rawCmd;
    }
    static parse(ca) {
        const cmdIndex = ca[0] === 'raw' ? 1 : 0;
        const cmd = ca[cmdIndex];
        if (cmd === 'stroke' || cmd === 'fill') {
            return new Raw(cmd);
        }
        return null;
    }
    action(tt) {
        tt.raiseDrawCanvas(this.rawCmd, []);
    }
}
Raw.cmd = 'raw';
Raw.cmdAlias = ['stroke', 'fill'];

class DrawText extends CommandBase {
    constructor(text) {
        super();
        this.text = text;
    }
    static parse(ca) {
        return new DrawText(ca[1]);
    }
    action(tt) {
        tt.raiseDrawCanvas('fillText', [[tt.x, tt.y], this.text]);
    }
}
DrawText.cmd = 'text';
DrawText.cmdAlias = [];

class SetMoveSpeed extends CommandBase {
    constructor(spd) {
        super();
        this.spd = spd;
    }
    static parse(ca) {
        return new SetMoveSpeed(parseFloat(ca[1]));
    }
    action(tt) {
        tt.spdMove = this.spd;
    }
}
SetMoveSpeed.cmd = 'spdM';
SetMoveSpeed.cmdAlias = [];

class SetRotateSpeed extends CommandBase {
    constructor(spd) {
        super();
        this.spd = spd;
    }
    static parse(ca) {
        return new SetRotateSpeed(parseFloat(ca[1]));
    }
    action(tt) {
        tt.spdRotate = this.spd;
    }
}
SetRotateSpeed.cmd = 'spdR';
SetRotateSpeed.cmdAlias = [];

class SetVisible extends CommandBase {
    constructor(v) {
        super();
        this.visible = !!v;
    }
    static parse(ca) {
        return new SetVisible(ca[1]);
    }
    action(tt) {
        tt.f_visible = this.visible;
        tt.f_update = true;
    }
}
SetVisible.cmd = 'visible';
SetVisible.cmdAlias = [];

class SetImage extends CommandBase {
    constructor(url) {
        super();
        this.url = url;
    }
    static parse(ca) {
        return new SetImage(ca[1]);
    }
    setup(tt) {
        if (tt.img) {
            tt.flagLoaded = false;
            tt.img.src = this.url;
        }
    }
    action(tt) {
        // none
    }
}
SetImage.cmd = 'changemodel';
SetImage.cmdAlias = [];

class SetStyle extends CommandBase {
    constructor(name, value) {
        super();
        this.name = name;
        this.value = value;
    }
    static parse(ca) {
        const cmdIndex = ca[0] === 'style' ? 1 : 0;
        const cmd = ca[cmdIndex];
        const value = ca[cmdIndex + 1];
        if (cmd === 'fillStyle') {
            return new SetStyle('fillStyle', value);
        }
        else if (cmd === 'strokeStyle') {
            return new SetStyle('strokeStyle', value);
        }
        else if (cmd === 'lineWidth' || cmd === 'size') {
            return new SetStyle('lineWidth', value);
        }
        else if (cmd === 'font' || cmd === 'textset') {
            return new SetStyle('font', value);
        }
        else if (cmd === 'penDown' || cmd === 'penOn') {
            return new SetStyle('font', value);
        }
        return null;
    }
    action(tt) {
        tt.raiseDrawCanvas(this.name, [this.value]);
    }
}
SetStyle.cmd = 'style';
SetStyle.cmdAlias = ['fillStyle', 'strokeStyle', 'lineWidth', 'font', 'penDown', 'size', 'textset', 'penOn'];

class CommandFactory {
    constructor() {
        this.commands = [];
        this.cmds = new Map();
    }
    regist(command) {
        this.commands.push(command);
        const cmd = command;
        if (isCmdStatic(cmd)) {
            this.cmds.set(cmd.cmd, command);
            for (const alias of cmd.cmdAlias) {
                this.cmds.set(alias, command);
            }
        }
    }
    initRegist() {
        const commandList = [
            Move,
            Walk,
            Rotate,
            Jump,
            Angle,
            Curve,
            Path,
            Raw,
            DrawText,
            SetStyle,
            SetVisible,
            SetImage,
            SetMoveSpeed,
            SetRotateSpeed
        ];
        for (const command of commandList) {
            this.regist(command);
        }
    }
    parse(s) {
        let c = s;
        c = c.replace(/^([a-zA-Z_]+)\s*(\d+)/, '$1,$2');
        c = c.replace(/^([a-zA-Z_]+)\s*=/, '$1,');
        const ca = c.split(/\s*,\s*/);
        const cmdCon = this.cmds.get(ca[0]);
        let command = null;
        if (isParseStatic(cmdCon)) {
            command = cmdCon.parse(ca);
        }
        return command;
    }
}

class Turtle {
    constructor() {
        this.type = 'カメ';
    }
    walkValidation(cmd) {
        if (cmd instanceof Walk) {
            if (cmd.direction === 'r' || cmd.direction === 'l') {
                throw new Error(`${this.type}はその方向に進むことはできません`);
            }
        }
        if (cmd instanceof Curve) {
            if (cmd.dir === 'l' || cmd.dir === 'r') {
                throw new Error(`${this.type}はその方向に進むことはできません`);
            }
        }
    }
    getMoveDirection() {
        return 'f';
    }
}

class Cancer {
    constructor() {
        this.type = 'カニ';
    }
    walkValidation(cmd) {
        if (cmd instanceof Walk) {
            if (cmd.direction === 'f' || cmd.direction === 'b') {
                throw new Error(`${this.type}はその方向に進むことはできません`);
            }
        }
        if (cmd instanceof Curve) {
            if (cmd.dir === 'f' || cmd.dir === 'b') {
                throw new Error(`${this.type}はその方向に進むことはできません`);
            }
        }
    }
    getMoveDirection() {
        return 'lr';
    }
}

class Srawn {
    constructor() {
        this.type = 'エビ';
    }
    walkValidation(cmd) {
        if (cmd instanceof Walk) {
            if (cmd.direction === 'f' || cmd.direction === 'r' || cmd.direction === 'l') {
                throw new Error(`${this.type}はその方向に進むことはできません`);
            }
        }
        if (cmd instanceof Curve) {
            if (cmd.dir === 'f' || cmd.dir === 'l' || cmd.dir === 'r') {
                throw new Error(`${this.type}はその方向に進むことはできません`);
            }
        }
    }
    getMoveDirection() {
        return 'b';
    }
}

class Shark {
    constructor() {
        this.type = 'サメ';
    }
    walkValidation(cmd) {
        if (cmd instanceof Walk) {
            if (cmd.direction === 'b' || cmd.direction === 'r' || cmd.direction === 'l') {
                throw new Error(`${this.type}はその方向に進むことはできません`);
            }
        }
        if (cmd instanceof Rotate) {
            throw new Error(`${this.type}はその方法での方向転換はできません`);
        }
        if (cmd instanceof Angle && !cmd.direct) {
            throw new Error(`${this.type}はその方法での方向転換はできません`);
        }
        if (cmd instanceof Move && !cmd.direct) {
            throw new Error(`${this.type}はその方法での方向転換を含む移動はできません`);
        }
        if (cmd instanceof Curve) {
            if (cmd.dir === 'b' || cmd.dir === 'l' || cmd.dir === 'r') {
                throw new Error(`${this.type}はその方向に進むことはできません`);
            }
        }
    }
    getMoveDirection() {
        return 'f';
    }
}

class SoulFactory {
    constructor() {
        this.souls = new Map();
    }
    regist(soul) {
        this.souls.set(soul.type, soul);
    }
    initRegist() {
        this.regist(new Turtle());
        this.regist(new Cancer());
        this.regist(new Srawn());
        this.regist(new Shark());
    }
    getSoul(type) {
        const soul = this.souls.get(type);
        if (!soul) {
            throw new Error(`不明な歩行種別${type}の生成が指定されてました`);
        }
        return soul;
    }
}

class TurtleSmoothSystem {
    static getInstance(sys) {
        if (TurtleSmoothSystem.instance === undefined) {
            TurtleSmoothSystem.instance = new TurtleSmoothSystem(sys);
        }
        const i = TurtleSmoothSystem.instance;
        i.instanceCount += 1;
        return TurtleSmoothSystem.instance;
    }
    constructor(sys) {
        this.sys = sys;
        this.factory = new CommandFactory();
        this.soulFactory = new SoulFactory();
        this.ctx = null;
        this.canvas = null;
        this.flagSetTimer = false;
        this.instanceCount = 0;
        this.lastStart = 0;
        this.fid = -1;
        this.turtles = []; // カメの一覧
        this.target = -1; // 操作対象のカメのID
        this.turtlePenStyles = [];
        this.usePathId = null; // パス描画中のカメのID
        this.factory.initRegist();
        this.soulFactory.initRegist();
    }
    clearAll() {
        // console.log('カメ全消去 turtles=', this.turtles)
        for (const tt of this.turtles) {
            tt.clear();
        }
        this.turtles = [];
        if (this.canvas !== null && this.ctx !== null) {
            if (this.usePathId !== null) {
                this.ctx.closePath();
            }
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
        this.target = -1;
        this.usePathId = null;
        this.flagSetTimer = false;
        if (this.fid !== -1) {
            cancelAnimationFrame(this.fid);
        }
        this.lastStart = 0;
        this.fid = -1;
    }
    drawTurtle(id) {
        const tt = this.turtles[id];
        const cr = this.getCanvasRect();
        if (!tt || !cr.visible) {
            return;
        }
        tt.drawTurtle(cr);
    }
    getCur() {
        if (this.turtles.length === 0) {
            throw Error('最初に『カメ作成』命令を呼び出してください。');
        }
        return this.turtles[this.target];
    }
    setTimer() {
        // コマンド設定後、1度だけこの関数を呼び出す
        if (this.flagSetTimer) {
            return;
        }
        this.flagSetTimer = true;
        this.play(0);
    }
    draw(id, cmd, params) {
        const penStyle = this.turtlePenStyles[id];
        switch (cmd) {
            case 'beginPath':
                if (this.usePathId === null) {
                    this.usePathId = id;
                    this.ctx?.beginPath();
                    const p = params[0];
                    this.ctx?.moveTo(p[0], p[1]);
                }
                else {
                    throw new Error('既にパス描画中のため、パス描画を開始できません');
                }
                break;
            case 'closePath':
                if (this.usePathId === id) {
                    this.usePathId = null;
                }
                if (this.usePathId === null) {
                    this.ctx?.closePath();
                }
                break;
            case 'fillText': {
                const ctx = this.ctx;
                if (ctx === null) {
                    return;
                }
                if (this.usePathId !== null) {
                    ctx.save();
                }
                const p = params[0];
                const s = params[1];
                ctx.lineWidth = penStyle.lineWidth;
                ctx.strokeStyle = penStyle.strokeStyle;
                ctx.fillStyle = penStyle.fillStyle;
                ctx.font = penStyle.font;
                ctx.fillText(s, p[0], p[1]);
                if (this.usePathId !== null) {
                    ctx.restore();
                }
                break;
            }
            case 'fill':
                if (this.usePathId === id) {
                    this.usePathId = null;
                    this.ctx?.closePath();
                }
                this.ctx?.fill();
                break;
            case 'stroke':
                if (this.usePathId === id) {
                    this.usePathId = null;
                    this.ctx?.closePath();
                }
                this.ctx?.stroke();
                break;
            case 'line': {
                if (!penStyle.down) {
                    return;
                }
                if (this.ctx) {
                    const p1 = params[0];
                    const p2 = params[1];
                    const ctx = this.ctx;
                    if (this.usePathId === id) {
                        ctx.lineTo(p2[0], p2[1]);
                    }
                    else {
                        if (this.usePathId !== null) {
                            ctx.save();
                        }
                        ctx.beginPath();
                        if (this.turtles.length > 1) {
                            ctx.lineWidth = penStyle.lineWidth;
                            ctx.strokeStyle = penStyle.strokeStyle;
                            ctx.fillStyle = penStyle.fillStyle;
                            ctx.font = penStyle.font;
                        }
                        ctx.moveTo(p1[0], p1[1]);
                        ctx.lineTo(p2[0], p2[1]);
                        ctx.stroke();
                        if (this.usePathId !== null) {
                            ctx.restore();
                        }
                    }
                }
                break;
            }
            case 'arc': {
                if (!penStyle.down) {
                    return;
                }
                if (this.ctx) {
                    const p1 = params[0];
                    const r = params[1];
                    const degStart = params[2];
                    const degEnd = params[3];
                    const degDir = params[4];
                    const radStart = degStart * 0.017453292519943295;
                    const radEnd = degEnd * 0.017453292519943295;
                    const ctx = this.ctx;
                    if (this.usePathId !== null) {
                        ctx.save();
                    }
                    ctx.beginPath();
                    if (this.turtles.length > 1) {
                        ctx.lineWidth = penStyle.lineWidth;
                        ctx.strokeStyle = penStyle.strokeStyle;
                        ctx.fillStyle = penStyle.fillStyle;
                    }
                    ctx.arc(p1[0], p1[1], r, radStart, radEnd, degDir < 0);
                    ctx.stroke();
                    if (this.usePathId !== null) {
                        ctx.restore();
                    }
                }
                break;
            }
            case 'font': {
                if (!this.ctx) {
                    return;
                }
                const s = params[0];
                if (this.usePathId === id || this.turtles.length === 1) {
                    this.ctx.font = s;
                }
                penStyle.font = s;
                break;
            }
            case 'fillStyle': {
                if (!this.ctx) {
                    return;
                }
                const s = params[0];
                if (this.usePathId === id || this.turtles.length === 1) {
                    this.ctx.fillStyle = s;
                }
                penStyle.fillStyle = s;
                break;
            }
            case 'strokeStyle': {
                if (!this.ctx) {
                    return;
                }
                const s = params[0];
                if (this.usePathId === id || this.turtles.length === 1) {
                    this.ctx.strokeStyle = s;
                }
                penStyle.strokeStyle = s;
                break;
            }
            case 'lineWidth': {
                if (!this.ctx) {
                    return;
                }
                const n = params[0];
                if (this.usePathId === id || this.turtles.length === 1) {
                    this.ctx.lineWidth = n;
                }
                penStyle.lineWidth = n;
                break;
            }
            case 'penDown': {
                const b = params[0];
                penStyle.down = b;
                break;
            }
            default:
                throw new Error(`カメから不明な描画要求(${cmd})を受け取りました`);
        }
    }
    addJob(command) {
        const tt = this.getCur();
        const promise = tt.addCommand(command);
        this.setTimer();
        return promise;
    }
    runJobAllTurtles(time, defaultWait, immediateRunAction, waitForTurteImage) {
        let hasNext = false;
        for (const tt of this.turtles) {
            hasNext = tt.runJob(time, defaultWait, immediateRunAction, waitForTurteImage) || hasNext;
            if (tt.flagLoaded) {
                this.drawTurtle(tt.id);
            }
        }
        return hasNext;
    }
    play(timestamp) {
        if (this.lastStart === 0) {
            this.lastStart = timestamp;
            this.fid = requestAnimationFrame((timestamp) => this.play(timestamp));
            return;
        }
        let time = timestamp - this.lastStart;
        if (time <= 0) {
            time = 1;
        }
        this.lastStart = timestamp;
        const wait = this.sys.__getSysVar('カメ速度');
        const smooth = !!this.sys.__getSysVar('カメスムース移動');
        if (wait <= 0 && !smooth) {
            // 待ち時間なしで全部実行
            let hasNext = true;
            while (hasNext) {
                hasNext = this.runJobAllTurtles(0, 0, !smooth, false);
            }
        }
        else {
            // 一つずつ実行
            const waitForTurtleImage = wait > 0;
            const hasNext = this.runJobAllTurtles(time, wait, !smooth, waitForTurtleImage);
            if (hasNext) {
                this.fid = requestAnimationFrame((timestamp) => this.play(timestamp));
                return;
            }
        }
        // console.log('[TURTLE] finished.')
        this.flagSetTimer = false;
    }
    setupCanvas() {
        // 描画先をセットする
        let canvasId = this.sys.__getSysVar('カメ描画先');
        if (typeof canvasId === 'string') {
            canvasId = document.getElementById(canvasId) || document.querySelector(canvasId);
            if (canvasId instanceof HTMLCanvasElement) {
                this.sys.__setSysVar('カメ描画先', canvasId);
            }
        }
        // console.log('カメ描画先=', canvasId)
        if (!(canvasId instanceof HTMLCanvasElement)) {
            console.log('[ERROR] カメ描画先が見当たりません。' + canvasId);
            throw Error('カメ描画先が見当たりません。');
        }
        const cv = this.canvas = canvasId;
        const ctx = this.ctx = cv.getContext('2d');
        if (!ctx) {
            console.log('[ERROR] カメ画像のコンテキストが作成できません。' + canvasId);
            throw Error('カメ画像のコンテキストが作成できません。');
        }
        ctx.lineWidth = 4;
        ctx.strokeStyle = 'black';
        ctx.lineCap = 'round';
    }
    getCanvasRect() {
        const cv = this.canvas;
        if (!cv) {
            return { left: 0, top: 0, width: 0, height: 0, visible: false };
        }
        let rect;
        try {
            rect = cv.getBoundingClientRect();
        }
        catch (e) {
            rect = { left: 0, top: 0, width: 0, height: 0 };
        }
        const rx = rect.left + window.scrollX;
        const ry = rect.top + window.scrollY;
        return {
            'visible': (rect.width !== 0 && rect.height !== 0),
            'left': rx,
            'top': ry,
            width: cv.width,
            height: cv.height
        };
    }
    createTurtle(imageUrl, type) {
        // キャンバス情報は毎回参照する (#734)
        this.setupCanvas();
        // カメの情報をリストに追加
        const id = this.turtles.length;
        const tt = new TurtleSmooth(id, this.soulFactory.getSoul(type));
        this.turtles.push(tt);
        this.turtlePenStyles[id] = {
            lineWidth: 4,
            strokeStyle: 'black',
            fillStyle: 'black',
            font: '10px sans-serif',
            down: true
        };
        this.target = id;
        tt.addEventListener('drawCanvas', (e) => {
            this.draw(e.detail.id, e.detail.cmd, e.detail.params);
        });
        // 画像を読み込む
        tt.addEventListener('imageChanged', (e) => {
            this.drawTurtle(tt.id);
        });
        tt.loadImage(imageUrl);
        // デフォルト位置(中央)の設定
        const cr = this.getCanvasRect();
        tt.x = cr.width / 2;
        tt.y = cr.height / 2;
        return id;
    }
    static getTurtleSmooth(sys) {
        if (!sys.tags.turtlesmooth) {
            throw new Error('プラグインの初期化が行われていません');
        }
        if (sys !== sys.tags.turtlesmooth.sys) {
            console.log('[turtle smooth] sysが変更されました。更新します。');
            sys.tags.turtlesmooth.sys = sys;
        }
        return sys.tags.turtlesmooth;
    }
}

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ