block_blast_rust/index_template.html at main · lishuceo/block_blast_rust · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>方块消除游戏</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #222;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: fixed; /* 防止iOS Safari滚动 */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-touch-callout: none; /* 禁止iOS长按弹出菜单 */
            -webkit-user-select: none;   /* 禁止选择内容 */
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* 游戏方向控制 - 默认竖屏模式 */
        .game-wrapper {
            position: relative;
            margin: auto;
            /* 添加iOS安全区域内边距 */
            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
            transition: transform 0.3s ease;
            /* 重要：移除所有尺寸限制，完全由JS控制 */
            /* 注释掉干扰的尺寸设置
            width: 100%;
            height: 100%;
            max-width: 100vw;
            max-height: 100vh; */
        }

        /* 横屏模式下旋转画面 */
        .game-wrapper.landscape {
            /* 仅处理旋转，不固定尺寸 */
            transform: rotate(-90deg);
        }

        /* 游戏容器 */
        .game-container {
            position: relative;
            width: 100%;
            height: 100%;
            background: black;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        /* 旋转模式下的游戏容器 */
        .landscape .game-container {
            /* 为旋转模式调整位置 */
            transform-origin: center center;
        }

        /* canvas样式 - 移除所有固定像素限制 */
        #glcanvas {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            touch-action: none; /* 阻止默认触摸行为 */
            -webkit-touch-callout: none; /* 禁止iOS长按弹出菜单 */
            -webkit-tap-highlight-color: rgba(0,0,0,0); /* 禁止iOS点击高亮 */
        }

        /* 注释掉所有媒体查询，避免干扰JS缩放

        /* 屏幕适配 - 竖屏模式 */
        @media screen and (max-height: 620px) {
            .game-wrapper:not(.landscape) {
                transform: scale(0.85);
                transform-origin: center center;
            }
        }

        @media screen and (max-width: 420px) {
            .game-wrapper:not(.landscape) {
                transform: scale(0.85);
                transform-origin: center center;
            }
        }

        /* 屏幕适配 - 横屏模式 */
        @media screen and (orientation: landscape) {
            /* 小屏幕横屏设备 */
            @media screen and (max-height: 420px) {
                .game-wrapper.landscape {
                    transform: rotate(-90deg) scale(0.65);
                }
            }

            /* 中等屏幕横屏设备 */
            @media screen and (min-height: 421px) and (max-height: 500px) {
                .game-wrapper.landscape {
                    transform: rotate(-90deg) scale(0.75);
                }
            }

            /* 大屏幕横屏设备 */
            @media screen and (min-height: 501px) {
                .game-wrapper.landscape {
                    transform: rotate(-90deg) scale(0.85);
                }
            }
        }

        /* iOS设备特别适配 */
        @supports (-webkit-touch-callout: none) {
            /* iOS设备默认适配 */
            .game-wrapper:not(.landscape) {
                transform: scale(0.9);
                transform-origin: center center;
            }

            .game-wrapper.landscape {
                transform: rotate(-90deg) scale(0.8);
            }

            /* 较小的iOS设备 */
            @media screen and (max-height: 700px) {
                .game-wrapper:not(.landscape) {
                    transform: scale(0.8);
                }

                .game-wrapper.landscape {
                    transform: rotate(-90deg) scale(0.7);
                }
            }

            /* 非常小的iOS设备 */
            @media screen and (max-height: 600px) {
                .game-wrapper:not(.landscape) {
                    transform: scale(0.7);
                }

                .game-wrapper.landscape {
                    transform: rotate(-90deg) scale(0.6);
                }
            }
        }
        */

        /* 游戏方向切换按钮 - 已移除
        .orientation-toggle {
            position: fixed;
            bottom: 10px;
            right: 10px;
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            cursor: pointer;
            border: 2px solid white;
            padding: 0;
        }

        .orientation-toggle svg {
            width: 24px;
            height: 24px;
            fill: white;
            transition: transform 0.3s ease;
        }

        .orientation-toggle.landscape svg {
            transform: rotate(90deg);
        }
        */
    </style>
    <!-- 确保在任何其他脚本前加载尺寸修复工具 -->
    <script src="canvas_fixer.js"></script>
</head>

<body>
    <!-- 添加一个额外的包装容器 -->
    <div class="game-wrapper">
        <!-- 游戏容器 -->
        <div class="game-container">
            <!-- 移除固定尺寸设置 -->
            <canvas id="glcanvas" tabindex='1'></canvas>
        </div>
    </div>

    <!-- 方向切换按钮 - 已移除
    <button class="orientation-toggle" id="orientationToggle">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M16,17V7H8V17H16M16,3A2,2 0 0,1 18,5V19A2,2 0 0,1 16,21H8A2,2 0 0,1 6,19V5A2,2 0 0,1 8,3H16Z" />
        </svg>
    </button>
    -->

    <!-- 加载macroquad的JavaScript -->
    <script src="mq_js_bundle.js"></script>
    <script>
        // 检测WebAssembly JIT状态
        window.checkWasmJitEnabled = function() {
            // 尝试检测Wasm是否可用和JIT状态
            let jitStatus = "Unknown";

            // 检测WebAssembly基本支持
            if (typeof WebAssembly === 'object') {
                jitStatus = "Basic Support";

                // 检测一些高级特性可能表明JIT已启用
                // 注意：浏览器不直接暴露JIT状态，这只是一个近似检测
                if (WebAssembly.validate && WebAssembly.compile && WebAssembly.instantiate) {
                    // 检测是否有流式编译支持（通常表示有JIT）
                    if (typeof WebAssembly.instantiateStreaming === 'function') {
                        jitStatus = "JIT Possible";

                        // 进一步检测是否有SharedArrayBuffer和Atomics支持
                        // 这些特性通常与高性能Wasm执行环境相关
                        if (typeof SharedArrayBuffer === 'function' && typeof Atomics === 'object') {
                            jitStatus = "JIT Enabled";
                        }
                    }
                }
            } else {
                jitStatus = "Not Supported";
            }

            // 将状态存储在全局变量中，以便Rust代码通过FFI访问
            window.wasmJitStatus = jitStatus;

            // 返回状态字符串
            return jitStatus;
        };

        // 在加载页面时立即检测
        window.wasmJitStatus = window.checkWasmJitEnabled();

        // 为Rust代码提供获取JIT状态的函数
        window.getWasmJitStatus = function() {
            return window.wasmJitStatus || "Unknown";
        };

        // 等待所有资源加载完成
        window.addEventListener('load', function() {
            console.log("页面加载完成，准备初始化游戏");

            // 获取DOM元素
            const gameWrapper = document.querySelector('.game-wrapper');
            // const orientationToggle = document.getElementById('orientationToggle'); // 已移除
            const canvas = document.getElementById('glcanvas');

            // 设置canvas初始尺寸 - 保持正确的宽高比
            canvas.width = 400;
            canvas.height = 600;

            // 旋转相关代码已移除

            // 监听窗口尺寸变化
            window.addEventListener('resize', function() {
                // 强制重置canvas尺寸
                if (window.forceCanvasSize) {
                    window.forceCanvasSize();
                }
            });

            // 检查并强制应用canvas尺寸
            if (window.forceCanvasSize) {
                window.forceCanvasSize();
                console.log("已应用canvas尺寸设置");
            }

            // iOS特定修复：在iOS中禁止双指缩放
            document.addEventListener('gesturestart', function(e) {
                e.preventDefault();
                return false;
            });

            // 禁止浏览器的默认滚动和缩放行为
            document.addEventListener('touchmove', function(e) {
                if (e.touches.length > 1) {
                    e.preventDefault();
                }
            }, { passive: false });

            // 检测是否为iOS设备
            function isIOS() {
                return /iPad|iPhone|iPod/.test(navigator.userAgent) ||
                       (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
            }

            // iOS专用修复
            if (isIOS()) {
                console.log("检测到iOS设备，应用额外修复");

                // 全屏模式并滚动到顶部
                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen()
                        .catch(err => console.warn("无法进入全屏模式:", err));
                } else if (document.documentElement.webkitRequestFullscreen) {
                    document.documentElement.webkitRequestFullscreen()
                        .catch(err => console.warn("无法进入WebKit全屏模式:", err));
                }

                // 滚动到顶部以消除iOS状态栏
                setTimeout(function() {
                    window.scrollTo(0, 1);
                }, 100);

                // 阻止弹性滚动效果
                document.body.addEventListener('touchmove', function(e) {
                    e.preventDefault();
                }, { passive: false });

                // 禁止Safari的双击缩放
                let lastTouchEnd = 0;
                document.addEventListener('touchend', function(e) {
                    const now = Date.now();
                    if (now - lastTouchEnd < 300) {
                        e.preventDefault();
                    }
                    lastTouchEnd = now;
                }, false);
            }

            // 在强制设置尺寸后，加载WASM
            try {
                // 尝试加载WASM文件
                load("block_blast_bin.wasm");
                console.log("WASM加载成功");
            } catch(e) {
                console.error("加载WASM出错:", e);
                alert("游戏加载失败，请刷新页面或检查控制台错误信息");
            }
        });
    </script>
</body>

</html>