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