pixi实现鼠标拖动顺时针旋转控制夜间骑行的自动车速度代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：pixi实现鼠标拖动顺时针旋转控制夜间骑行的自动车速度代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  margin: 0px;
}
</style>


</head>

<body translate="no">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.8.10.2.js"></script>
      <script type="module">
class Main {
    static start() {
        new ViewManager();
    }
}
export class ViewManager {
    constructor() {
        this.tickHandler = () => {
            this._ui.update();
            this._worldManager.update();
        };
        this._ui = new UserInterface();
        this._worldManager = new WorldManager();
        this.init().then();
    }
    async init() {
        const app = new PIXI.Application();
        await app.init({
            background: "#333",
            resizeTo: window
        });
        document.body.appendChild(app.canvas);
        app.stage.addChild(this._worldManager);
        app.stage.addChild(this._ui);
        app.ticker.maxFPS = 60;
        app.ticker.minFPS = 60;
        app.ticker.add(this.tickHandler);
        window.addEventListener("resize", () => this.resize());
        this.resize();
    }
    resize() {
        if (1920 / 1080 < window.innerWidth / window.innerHeight) {
            const scale = window.innerHeight / 1080;
            this._worldManager.scale.set(scale, scale);
            this._worldManager.x = (window.innerWidth - 1920 * scale) * 0.5;
            this._worldManager.y = 0;
        }
        else {
            const scale = window.innerWidth / 1920;
            this._worldManager.scale.set(scale, scale);
            this._worldManager.x = 0;
            this._worldManager.y = (window.innerHeight - 1080 * scale) * 0.5;
        }
        this._ui.resize();
    }
}
class UserInterface extends PIXI.Container {
    constructor() {
        super();
        this._isMouseDown = false;
        this.mouseDownHandler = (event) => {
            console.log("mouseDownHandler" + Math.random());
            this._isMouseDown = true;
            this._wheel.mouseDown(event);
            this.on("pointermove", this.mouseMoveHandler);
            this.on("pointerup", this.mouseUpHandler);
        };
        this.mouseUpHandler = () => {
            this._isMouseDown = false;
            this._wheel.mouseUp();
            this.off("pointermove", this.mouseMoveHandler);
            this.off("pointerup", this.mouseUpHandler);
        };
        this.mouseOutHandler = () => {
            if (this._isMouseDown)
                this.mouseUpHandler();
        };
        this.mouseMoveHandler = (event) => {
            this._wheel.mouseMove(event);
        };
        this._graphics = new PIXI.Graphics();
        this.addChild(this._graphics);
        this._graphics.rect(0, 0, 1920, 1080);
        this._graphics.fill(0xff2233);
        this._graphics.moveTo(0, 0);
        this._graphics.lineTo(1920, 1080);
        this._graphics.moveTo(0, 1080);
        this._graphics.lineTo(1920, 0);
        this._graphics.stroke({ width: 1, color: 0x000000 });
        this._graphics.alpha = 0.0;
        this.eventMode = "static";
        this.on("pointerdown", this.mouseDownHandler);
        this.on("pointerout", this.mouseOutHandler);
        this._wheel = new InteractiveWheel();
        this._wheel.alpha = 0;
        this.addChild(this._wheel);
    }
    update() {
        const speed = 0.15;
        if (this._isMouseDown) {
            if (this._wheel.alpha < 1) {
                const da = 1 - this._wheel.alpha;
                if (Math.abs(da) < 0.05) {
                    this._wheel.alpha = 1;
                }
                else {
                    this._wheel.alpha += speed * da;
                }
            }
        }
        else {
            if (this._wheel.alpha > 0) {
                const da = 0 - this._wheel.alpha;
                if (Math.abs(da) < 0.05) {
                    this._wheel.alpha = 0;
                }
                else {
                    this._wheel.alpha += speed * da;
                }
            }
        }
        this._wheel.update();
    }
    resize() {
        this._graphics.width = window.innerWidth;
        this._graphics.height = window.innerHeight;
    }
}
class InteractiveWheel extends PIXI.Container {
    constructor() {
        super();
        this._wheelRadian = 0;
        this._vr = 0;
        this.isRotationStart = false;
        this.mouseDown = (event) => {
            this.isRotationStart = false;
            this._arrow.alpha = 1;
            const globalPosition = event.data.global;
            const centerX = window.innerWidth * 0.5;
            const centerY = window.innerHeight * 0.5;
            this._wheelRadian = Math.atan2(centerY - globalPosition.y, centerX - globalPosition.x);
            this._container.rotation = this._wheelRadian + Math.PI;
            this.x = globalPosition.x + 80 * Math.cos(this._wheelRadian);
            this.y = globalPosition.y + 80 * Math.sin(this._wheelRadian);
            this._vr = 0.5;
            clearInterval(this._id);
            this._id = setInterval(() => {
                this._vr = 0.5;
            }, 2000);
        };
        this._contai.........完整代码请登录后点击上方下载按钮下载查看