mirror of
https://github.com/Cola-Echo/memory-manager-concurrent.git
synced 2026-06-06 15:55:52 +00:00
167 lines
4.9 KiB
HTML
167 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>3D.CITY</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
|
<link rel="icon" href="favicon.ico" />
|
|
<style>
|
|
*{ padding:0; margin: 0; -o-user-select:none; -ms-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -moz-user-select: none; box-sizing: border-box; }
|
|
html { width:100%; height:100%; }
|
|
body { background:#8397ac; font:10px sans-serif; width:100%; height:100%; color:#FFFFFF; overflow: hidden; touch-action: none; position: fixed; inset: 0; }
|
|
#container{ width:100%; height:100%; overflow:hidden; text-align:center; position: fixed; inset: 0; }
|
|
#container canvas{ position:absolute;top:0;left:0;width:100%;height:100% }
|
|
#debug{ }
|
|
#hub{ position:absolute; top:0; left:0; height:100%; width:100%; pointer-events:none; display:block; text-align:center;}
|
|
|
|
a:link {text-decoration: none; color:#FFAA66;}
|
|
a:visited {text-decoration: none; color:#FFAA66;}
|
|
a:active {text-decoration: none; color:#FFAA66;}
|
|
a:hover {text-decoration: underline; color: red;}
|
|
|
|
/* Mobile responsive styles */
|
|
@media screen and (max-width: 768px) {
|
|
body { font-size: 12px; }
|
|
.mobile-hide { display: none !important; }
|
|
.mobile-small { transform: scale(0.85); transform-origin: top right; }
|
|
}
|
|
@media screen and (max-width: 480px) {
|
|
body { font-size: 14px; }
|
|
.mobile-small { transform: scale(0.7); transform-origin: top right; }
|
|
.mobile-bottom { transform: scale(0.6); transform-origin: bottom left; }
|
|
}
|
|
|
|
/* 强制横屏 - 由 JS 控制 */
|
|
/* 虚拟方向键样式 */
|
|
#mobile-dpad {
|
|
display: none;
|
|
position: fixed;
|
|
bottom: calc(20px + env(safe-area-inset-bottom) + 70px);
|
|
left: calc(20px + env(safe-area-inset-left));
|
|
width: 120px;
|
|
height: 120px;
|
|
z-index: 9999;
|
|
pointer-events: auto;
|
|
}
|
|
.dpad-btn {
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border: 2px solid rgba(255, 255, 255, 0.5);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
touch-action: manipulation;
|
|
user-select: none;
|
|
transition: background 0.1s;
|
|
}
|
|
.dpad-btn:active, .dpad-btn.active {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
}
|
|
.dpad-up { top: 0; left: 50%; transform: translateX(-50%); }
|
|
.dpad-down { bottom: 0; left: 50%; transform: translateX(-50%); }
|
|
.dpad-left { left: 0; top: 50%; transform: translateY(-50%); }
|
|
.dpad-right { right: 0; top: 50%; transform: translateY(-50%); }
|
|
|
|
/* 移动端显示方向键 */
|
|
@media screen and (max-width: 900px), (pointer: coarse) {
|
|
#mobile-dpad { display: block; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<script>
|
|
// 检测宽高比，竖屏时强制横屏显示
|
|
function checkOrientation() {
|
|
// handled by host container on mobile (fullscreen + orientation lock)
|
|
}
|
|
window.addEventListener('resize', checkOrientation);
|
|
window.addEventListener('load', checkOrientation);
|
|
checkOrientation();
|
|
</script>
|
|
|
|
<script type="module">
|
|
|
|
import { Main } from './build/MainGame.module.js';
|
|
|
|
Main.init()
|
|
|
|
</script>
|
|
|
|
<div id="container"></div>
|
|
<div id="hub"></div>
|
|
<object id="loader" type="image/svg+xml" data="assets/loader.svg"></object>
|
|
|
|
<!-- 移动端虚拟方向键 -->
|
|
<div id="mobile-dpad">
|
|
<div class="dpad-btn dpad-up" data-key="38">▲</div>
|
|
<div class="dpad-btn dpad-down" data-key="40">▼</div>
|
|
<div class="dpad-btn dpad-left" data-key="37">◀</div>
|
|
<div class="dpad-btn dpad-right" data-key="39">▶</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
const keys = { 38: 'ArrowUp', 40: 'ArrowDown', 37: 'ArrowLeft', 39: 'ArrowRight' };
|
|
|
|
function fireKey(keyCode, type) {
|
|
const event = new KeyboardEvent(type, {
|
|
keyCode: keyCode,
|
|
which: keyCode,
|
|
key: keys[keyCode],
|
|
bubbles: true
|
|
});
|
|
document.dispatchEvent(event);
|
|
}
|
|
|
|
document.querySelectorAll('.dpad-btn').forEach(btn => {
|
|
const keyCode = parseInt(btn.dataset.key);
|
|
|
|
// 触摸事件
|
|
btn.addEventListener('touchstart', (e) => {
|
|
e.preventDefault();
|
|
btn.classList.add('active');
|
|
fireKey(keyCode, 'keydown');
|
|
}, { passive: false });
|
|
|
|
btn.addEventListener('touchend', (e) => {
|
|
e.preventDefault();
|
|
btn.classList.remove('active');
|
|
fireKey(keyCode, 'keyup');
|
|
}, { passive: false });
|
|
|
|
btn.addEventListener('touchcancel', (e) => {
|
|
btn.classList.remove('active');
|
|
fireKey(keyCode, 'keyup');
|
|
});
|
|
|
|
// 鼠标事件（用于测试）
|
|
btn.addEventListener('mousedown', (e) => {
|
|
e.preventDefault();
|
|
btn.classList.add('active');
|
|
fireKey(keyCode, 'keydown');
|
|
});
|
|
|
|
btn.addEventListener('mouseup', (e) => {
|
|
btn.classList.remove('active');
|
|
fireKey(keyCode, 'keyup');
|
|
});
|
|
|
|
btn.addEventListener('mouseleave', (e) => {
|
|
if (btn.classList.contains('active')) {
|
|
btn.classList.remove('active');
|
|
fireKey(keyCode, 'keyup');
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
|
|
</body></html>
|