mirror of
https://github.com/Cola-Echo/memory-manager-concurrent.git
synced 2026-06-06 12:25:53 +00:00
Update memory-manager-concurrent
This commit is contained in:
Cola-Echo
166
games/3dcity/index.html
Normal file
166
games/3dcity/index.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user