demo_list/game_test1/src/pages/hilo/index.vue

<template>
	<view class="page">
		<view class="canvas_box pos_r">
			<!-- <view class="tc p20 titlebar">canvas演示</view> -->
			<!-- <canvas id="canvasId" class="canvas" /> -->
			<div id="game-container" class="bg_ff"></div>
		</view>
		<view>
			<view class="tl mt20 text_color_tips pl20">为方便演示动画，提供功能按钮看效果</view>
			<view class="dis_flex_align_between_center p20">
				<view class="left dis_flex">
					<u-button type="primary" @click="startBom" class="w100">开炮</u-button>

					<u-button type="primary" @click="stopBom" class="ml30 w100">停炮</u-button>
				</view>
				<view class="w300 tc">
					<u-button class="w100" type="primary" @click="goUp">向上</u-button>
					<view class="dis_flex_align_between_center mt20 mb20">
						<u-button type="primary" class="w100" @click="goLeft">向左</u-button>
						<u-button type="primary" class="w100" @click="goRight">向右</u-button>
					</view>

					<u-button type="primary" class="w100" @click="goDown">向下</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Page from "../../libs/pages/Page";
import Game from "@/libs/game/Game";
const title = ref("Hello");
let stage;
let game: any;
const init = () => {
	let gameContainer: any = document.getElementById("game-container");
	let sysinfo = uni.getSystemInfoSync();
	console.log("#debug#🚀 ~ file: index.vue:22 ~ init ~ sysinfo:", sysinfo);

	let width = uni.upx2px(sysinfo.screenWidth) * 4; //sysinfo.screenWidth;
	let height = uni.upx2px((566 / 750) * width) * 2; // (566 / 750) * width;
	gameContainer.style.height = height / 2 + "px"; // sysinfo.safeArea?.height + "px";
	gameContainer.style.width = width / 2 + "px"; //sysinfo.safeArea?.right + "px";
	game = new Game(gameContainer, width, height);
	// game.init();
};

const goLeft = () => {
	game.goLeft();
};
const startBom = () => {
	game.startBom();
};
const goUp = () => {
	game.goUp();
};
const goRight = () => {
	game.goRight();
};
const goDown = () => {
	game.goDown();
};
const stopBom = () => {
	game.stopBom();
};
onLoad(async () => {
	uni.setNavigationBarTitle({
		title: "动画演示"
	});
	await Page.Yc.delay(100);
	init();
});
</script>

<style lang="scss" scoped>
.page {
	.titlebar {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
	}
	.btn {
		border: solid 1rpx #999;
		background-color: #f5f5f;
	}
}
</style>