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

代码语言:html

所属分类:其他

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

代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0