Upload 2 files

congruence_detective.html

@@ -195,6 +195,29 @@
             pointer-events: none;
         }
 
+        /* 平板/手機裝置：警探縮小並置於圖片後方 */
+        @media (max-width: 1024px),
+        (pointer: coarse) {
+            .character-sprite {
+                height: clamp(250px, 40vh, 450px);
+                z-index: 5;
+                /* 在其他圖片(z-index:10)之後 */
+                bottom: 60px;
+                left: -15px;
+                opacity: 0.85;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .character-sprite {
+                height: clamp(180px, 30vh, 300px);
+                z-index: 5;
+                bottom: 50px;
+                left: -10px;
+                opacity: 0.75;
+            }
+        }
+
         /* Scanlines */
         .scanlines {
             background: linear-gradient(to bottom,
@@ -247,6 +270,109 @@
             flex-direction: column;
             justify-content: flex-start;
         }
+
+        /* ====== Virtual Keypad ====== */
+        #virtual-keypad {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            left: auto;
+            transform: translateY(120%);
+            z-index: 1000;
+            background: rgba(15, 5, 25, 0.95);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(217, 70, 239, 0.4);
+            border-radius: 20px;
+            padding: 16px;
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 10px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(217, 70, 239, 0.15);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            touch-action: none;
+            max-width: 200px;
+        }
+
+        #virtual-keypad.active {
+            transform: translateY(0);
+        }
+
+        #virtual-keypad.dragging {
+            transition: none;
+            transform: none;
+        }
+
+        .keypad-handle {
+            grid-column: span 2;
+            height: 20px;
+            margin-bottom: 4px;
+            background: rgba(255, 255, 255, 0.15);
+            border-radius: 10px;
+            cursor: grab;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .keypad-handle::after {
+            content: '';
+            width: 40px;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.35);
+            border-radius: 2px;
+        }
+
+        .keypad-btn {
+            width: 70px;
+            height: 60px;
+            border-radius: 12px;
+            background: rgba(30, 10, 50, 0.7);
+            border: 1px solid rgba(217, 70, 239, 0.25);
+            color: white;
+            font-size: 22px;
+            font-weight: bold;
+            font-family: 'Noto Sans TC', sans-serif;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.15s;
+            user-select: none;
+        }
+
+        .keypad-btn:active {
+            transform: scale(0.93);
+            background: rgba(217, 70, 239, 0.25);
+            border-color: rgba(217, 70, 239, 0.6);
+        }
+
+        .keypad-btn.action {
+            background: rgba(15, 5, 25, 0.8);
+            border-color: rgba(217, 70, 239, 0.5);
+            color: #d946ef;
+        }
+
+        .keypad-btn.submit {
+            background: rgba(217, 70, 239, 0.7);
+            color: white;
+            grid-column: span 2;
+            width: 100%;
+            height: 50px;
+            font-size: 16px;
+            margin-top: 4px;
+            letter-spacing: 2px;
+        }
+
+        .keypad-btn.submit:active {
+            background: rgba(217, 70, 239, 0.9);
+        }
+
+        /* quiz-input 被選中時的高亮 */
+        #quiz-input.keypad-active {
+            border-color: #d946ef;
+            box-shadow: 0 0 12px rgba(217, 70, 239, 0.4);
+        }
     </style>
 </head>
 
@@ -314,6 +440,18 @@
         </div>
     </div>
 
+    <!-- Virtual Keypad HTML -->
+    <div id="virtual-keypad" onclick="event.stopPropagation()">
+        <div class="keypad-handle"></div>
+        <div class="keypad-btn" onclick="keypad.input('S')">S</div>
+        <div class="keypad-btn" onclick="keypad.input('A')">A</div>
+        <div class="keypad-btn" onclick="keypad.input('邊')">邊</div>
+        <div class="keypad-btn" onclick="keypad.input('角')">角</div>
+        <div class="keypad-btn action" onclick="keypad.backspace()">⌫</div>
+        <div class="keypad-btn action" onclick="keypad.clear()">清除</div>
+        <div class="keypad-btn submit" onclick="keypad.submit()">確認 ✓</div>
+    </div>
+
     <script>
         // Game Script
         let playerName = localStorage.getItem('player_nickname') || '��鳥探員';
@@ -321,6 +459,124 @@
         // Initial Script Placeholder - populated dynamically
         let SCRIPT = [];
 
+        // ====== Virtual Keypad System ======
+        const keypad = {
+            element: null,
+            targetInput: null,
+            submitCallback: null,
+            init: function () {
+                this.element = document.getElementById('virtual-keypad');
+                if (!this.element) return;
+
+                // Prevent click bubbling
+                this.element.addEventListener('click', (e) => e.stopPropagation());
+
+                // Auto-close when clicking outside
+                document.addEventListener('click', (e) => {
+                    if (this.element.classList.contains('active') &&
+                        !this.element.contains(e.target) &&
+                        e.target !== this.targetInput &&
+                        !e.target.classList.contains('keypad-btn')) {
+                        this.close();
+                    }
+                });
+
+                // --- Drag Logic ---
+                const handle = this.element.querySelector('.keypad-handle');
+                this.isDragging = false;
+                this.offsetX = 0;
+                this.offsetY = 0;
+
+                const startDrag = (e) => {
+                    if (e.type === 'touchstart' && e.cancelable) e.preventDefault();
+                    this.isDragging = true;
+                    this.element.classList.add('dragging');
+                    const clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
+                    const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
+                    const rect = this.element.getBoundingClientRect();
+                    this.offsetX = clientX - rect.left;
+                    this.offsetY = clientY - rect.top;
+                    document.addEventListener(e.type.includes('mouse') ? 'mousemove' : 'touchmove', doDrag, { passive: false });
+                    document.addEventListener(e.type.includes('mouse') ? 'mouseup' : 'touchend', endDrag);
+                };
+
+                const doDrag = (e) => {
+                    if (!this.isDragging) return;
+                    e.preventDefault();
+                    const clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
+                    const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
+                    this.element.style.transform = 'none';
+                    this.element.style.bottom = 'auto';
+                    this.element.style.right = 'auto';
+                    this.element.style.left = (clientX - this.offsetX) + 'px';
+                    this.element.style.top = (clientY - this.offsetY) + 'px';
+                };
+
+                const endDrag = (e) => {
+                    this.isDragging = false;
+                    this.element.classList.remove('dragging');
+                    document.removeEventListener('mousemove', doDrag);
+                    document.removeEventListener('touchmove', doDrag);
+                    document.removeEventListener('mouseup', endDrag);
+                    document.removeEventListener('touchend', endDrag);
+                };
+
+                if (handle) {
+                    handle.addEventListener('mousedown', startDrag);
+                    handle.addEventListener('touchstart', startDrag, { passive: false });
+                    handle.style.cursor = 'grab';
+                }
+            },
+            open: function (inputElement, onSubmit) {
+                this.targetInput = inputElement;
+                this.submitCallback = onSubmit || null;
+                this.element.classList.add('active');
+                if (inputElement) {
+                    inputElement.classList.add('keypad-active');
+                    // 阻止系統鍵盤彈出
+                    inputElement.setAttribute('readonly', 'readonly');
+                    inputElement.setAttribute('inputmode', 'none');
+                }
+            },
+            close: function () {
+                this.element.classList.remove('active');
+                if (this.targetInput) {
+                    this.targetInput.classList.remove('keypad-active');
+                    this.targetInput.removeAttribute('readonly');
+                    this.targetInput.removeAttribute('inputmode');
+                    this.targetInput = null;
+                }
+                this.submitCallback = null;
+            },
+            input: function (val) {
+                if (!this.targetInput) return;
+                this.targetInput.value += val;
+                // 視覺回饋
+                this.targetInput.focus();
+            },
+            backspace: function () {
+                if (!this.targetInput) return;
+                this.targetInput.value = this.targetInput.value.slice(0, -1);
+            },
+            clear: function () {
+                if (!this.targetInput) return;
+                this.targetInput.value = '';
+            },
+            submit: function () {
+                if (this.submitCallback) {
+                    this.submitCallback();
+                }
+            }
+        };
+
+        // 偵測是否為觸控裝置（平板/手機）
+        const isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
+
+        // Initialize keypad
+        document.addEventListener('DOMContentLoaded', () => {
+            keypad.init();
+        });
+
         class GameEngine {
             constructor() {
                 this.step = 0;
@@ -1320,16 +1576,14 @@
 
                 quizLayer.classList.remove('hidden');
 
-                // Integrated layout matching dialogue style exactly
-
                 // Integrated layout matching dialogue style exactly
                 quizContent.innerHTML = `
                         <div class="dialogue-name">資深警探 <span class="text-xs text-slate-500 ml-2 tracking-normal">// AUTHENTICATION REQUIRED</span></div>
                         <div class="dialogue-text mb-4">${data.question}</div>
                         
                         <div class="flex gap-4 w-full mt-auto items-end">
-                            <div class="text-fuchsia-500 font-tech text-xl animate-pulse">></div>
-                            <input type="text" id="quiz-input" class="flex-1 bg-transparent border-b-2 border-fuchsia-500/50 text-white text-xl p-2 focus:outline-none focus:border-fuchsia-400 font-mono tracking-wider placeholder-slate-600" placeholder="輸入答案..." autocomplete="off">
+                            <div class="text-fuchsia-500 font-tech text-xl animate-pulse">&gt;</div>
+                            <input type="text" id="quiz-input" class="flex-1 bg-transparent border-b-2 border-fuchsia-500/50 text-white text-xl p-2 focus:outline-none focus:border-fuchsia-400 font-mono tracking-wider placeholder-slate-600" placeholder="輸入答案..." autocomplete="off" inputmode="none">
                             <button id="quiz-submit" class="bg-fuchsia-600 hover:bg-fuchsia-500 text-white font-bold px-8 py-2 rounded clip-path-slant text-lg font-tech tracking-widest border border-fuchsia-400/50 transition-all shadow-lg shadow-fuchsia-500/20">CONFIRM</button>
                         </div>
                         <div id="quiz-feedback" class="absolute top-6 right-8 font-tech text-xl font-bold"></div>
@@ -1339,8 +1593,6 @@
                 const btn = document.getElementById('quiz-submit');
                 const feedback = document.getElementById('quiz-feedback');
 
-                input.focus();
-
                 const checkAnswer = () => {
                     const val = input.value.trim();
                     if (data.answer.includes(val)) {
@@ -1349,6 +1601,7 @@
                         feedback.innerText = 'ACCESS GRANTED';
                         input.classList.add('text-green-400');
                         input.disabled = true;
+                        keypad.close(); // 關閉小鍵盤
 
                         setTimeout(() => {
                             quizLayer.classList.add('hidden');
@@ -1369,13 +1622,33 @@
                         }, 500);
 
                         // Show persistent wrong message
-                        feedback.className = 'text-red-400 text-lg font-bold'; // Increased size for visibility
+                        feedback.className = 'text-red-400 text-lg font-bold';
                         feedback.innerText = data.wrongMsg;
                     }
                 };
 
                 btn.onclick = checkAnswer;
                 input.onkeypress = (e) => { if (e.key === 'Enter') checkAnswer(); };
+
+                // 自動開啟小鍵盤（觸控裝置）或點擊輸入框時開啟
+                if (isTouchDevice) {
+                    // 觸控裝置自動開啟
+                    setTimeout(() => {
+                        keypad.open(input, checkAnswer);
+                    }, 300);
+                }
+
+                // 點擊輸入框也可以開啟小鍵盤
+                input.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    keypad.open(input, checkAnswer);
+                });
+                input.addEventListener('focus', (e) => {
+                    if (isTouchDevice) {
+                        e.preventDefault();
+                        keypad.open(input, checkAnswer);
+                    }
+                });
             }
 
             // Add shake animation style dynamically

skyscraper.html

@@ -798,21 +798,20 @@
                 });
                 const avg = totalErr / this.s.markerTs.length;
                 if (this.s.phase === 'tutorial') {
-                    if (avg < 5) {
+                    if (avg < 2) {
                         this._showPhaseModal('✅', '教學完成！', '垂直距離處處相等 = 平行！\n確認距離一致就代表兩條線平行', '確認，繼續 →', null);
                         this.dom.tbtn.onclick = () => { this.dom.tm.classList.add('hidden'); this.s.lvIdx++; this._genLevel() }
                     }
-                    else this._showToast('還不夠精確，再調整一下！', false);
+                    else this._showToast('還不夠精確！各處的垂直距離必須完全相等才是平行', false);
                     return;
                 }
                 if (this.s.fixMode) {
-                    if (avg < 4) { this._onCorrect(80) }
-                    else if (avg < 10) { this._onCorrect(Math.max(20, 60 - Math.floor(avg * 4))) }
-                    else this._showToast('還不夠精確，再調整！', false);
+                    if (avg < 1.5) { this._onCorrect(80) }
+                    else this._showToast('還不夠精確！垂直距離必須完全一致才算平行', false);
                     return;
                 }
-                if (avg < 4) this._onCorrect(100); else if (avg < 10) this._onCorrect(Math.max(30, 80 - Math.floor(avg * 5)));
-                else this._showToast('垂直距離不一致，再調整！', false);
+                if (avg < 1.5) this._onCorrect(100);
+                else this._showToast('垂直距離不一致，還不是完全平行！再調整', false);
             }
 
             judgeAnswer(says) {
@@ -905,24 +904,134 @@
                 if (this.s.playing) { this._drawBld(ctx, this.s.bL, 'left', f); this._drawBld(ctx, this.s.bR, 'right', f); this._drawScene(ctx, f) }
             }
             _drawBld(ctx, b, side, f) {
-                const gr = ctx.createLinearGradient(b.x, b.y, b.x + b.w, b.y + b.h);
-                gr.addColorStop(0, '#0f2818'); gr.addColorStop(1, '#081a0e');
-                ctx.fillStyle = gr; ctx.beginPath(); const t = 3;
-                ctx.moveTo(b.x + t, b.y); ctx.lineTo(b.x + b.w - t, b.y); ctx.lineTo(b.x + b.w, b.y + b.h); ctx.lineTo(b.x, b.y + b.h); ctx.closePath(); ctx.fill();
-                ctx.strokeStyle = 'rgba(34,197,94,.12)'; ctx.lineWidth = 1; ctx.stroke();
-                ctx.fillStyle = 'rgba(6,182,212,.3)'; ctx.fillRect(b.x + t, b.y, b.w - t * 2, 3);
-                const wC = Math.floor(b.w / 20), wR = Math.floor(b.h / 24), ws = 8;
-                const gx = (b.w - wC * ws) / (wC + 1), gy = (b.h - wR * ws) / (wR + 1);
-                for (let r = 0; r < wR; r++)for (let c = 0; c < wC; c++) {
-                    const wx = b.x + gx * (c + 1) + ws * c, wy = b.y + gy * (r + 1) + ws * r;
-                    const lit = Math.sin(f * .005 + r * 3.7 + c * 7.1) > -.3;
-                    ctx.fillStyle = lit ? `rgba(251,191,36,${(Math.sin(f * .01 + r + c * 2) * .3 + .7) * .35})` : 'rgba(30,41,59,.7)';
-                    ctx.fillRect(wx, wy, ws, ws);
+                // === 施工中建築 ===
+                // 鋼骨框架背景（半透明深色）
+                ctx.fillStyle = 'rgba(15, 40, 24, 0.4)';
+                ctx.fillRect(b.x, b.y, b.w, b.h);
+
+                // 垂直鋼骨柱（左右兩根主柱 + 中間支撐柱）
+                const steelColor = '#475569';
+                const steelHighlight = '#64748b';
+                const pillarW = 4;
+                ctx.fillStyle = steelColor;
+                ctx.fillRect(b.x, b.y, pillarW, b.h); // 左柱
+                ctx.fillRect(b.x + b.w - pillarW, b.y, pillarW, b.h); // 右柱
+                ctx.fillRect(b.x + b.w / 2 - pillarW / 2, b.y, pillarW, b.h); // 中柱
+
+                // 水平鋼骨樓板（每隔一段距離一條）
+                const floorGap = Math.max(30, b.h / 10);
+                const numFloors = Math.floor(b.h / floorGap);
+                for (let i = 0; i <= numFloors; i++) {
+                    const fy = b.y + i * floorGap;
+                    if (fy > b.y + b.h) break;
+                    ctx.fillStyle = steelColor;
+                    ctx.fillRect(b.x, fy, b.w, 3);
+                    // 高亮線
+                    ctx.fillStyle = steelHighlight;
+                    ctx.fillRect(b.x, fy, b.w, 1);
                 }
-                if (side === 'right') {
-                    const ax = b.x + b.w / 2; ctx.strokeStyle = '#475569'; ctx.lineWidth = 2;
-                    ctx.beginPath(); ctx.moveTo(ax, b.y); ctx.lineTo(ax, b.y - 25); ctx.stroke();
-                    if (Math.sin(f * .06) > 0) { ctx.beginPath(); ctx.arc(ax, b.y - 25, 3, 0, Math.PI * 2); ctx.fillStyle = '#ef4444'; ctx.shadowBlur = 8; ctx.shadowColor = '#ef4444'; ctx.fill(); ctx.shadowBlur = 0 }
+
+                // 交叉鋼骨支撐（X 型斜撐，每隔一層交替方向）
+                ctx.strokeStyle = 'rgba(100, 116, 139, 0.5)';
+                ctx.lineWidth = 1.5;
+                for (let i = 0; i < numFloors; i++) {
+                    const y1 = b.y + i * floorGap;
+                    const y2 = Math.min(b.y + (i + 1) * floorGap, b.y + b.h);
+                    // 左半 X
+                    if (i % 2 === 0) {
+                        ctx.beginPath();
+                        ctx.moveTo(b.x, y1); ctx.lineTo(b.x + b.w / 2, y2);
+                        ctx.stroke();
+                        ctx.beginPath();
+                        ctx.moveTo(b.x + b.w / 2, y1); ctx.lineTo(b.x, y2);
+                        ctx.stroke();
+                    } else {
+                        // 右半 X
+                        ctx.beginPath();
+                        ctx.moveTo(b.x + b.w / 2, y1); ctx.lineTo(b.x + b.w, y2);
+                        ctx.stroke();
+                        ctx.beginPath();
+                        ctx.moveTo(b.x + b.w, y1); ctx.lineTo(b.x + b.w / 2, y2);
+                        ctx.stroke();
+                    }
+                }
+
+                // 鷹架（外側細格線）
+                ctx.strokeStyle = 'rgba(148, 163, 184, 0.2)';
+                ctx.lineWidth = 1;
+                const scaffoldGap = 15;
+                for (let sy = b.y; sy < b.y + b.h; sy += scaffoldGap) {
+                    ctx.beginPath();
+                    ctx.moveTo(b.x - 6, sy); ctx.lineTo(b.x, sy);
+                    ctx.stroke();
+                    ctx.beginPath();
+                    ctx.moveTo(b.x + b.w, sy); ctx.lineTo(b.x + b.w + 6, sy);
+                    ctx.stroke();
+                }
+                // 鷹架垂直線
+                ctx.beginPath(); ctx.moveTo(b.x - 6, b.y); ctx.lineTo(b.x - 6, b.y + b.h); ctx.stroke();
+                ctx.beginPath(); ctx.moveTo(b.x + b.w + 6, b.y); ctx.lineTo(b.x + b.w + 6, b.y + b.h); ctx.stroke();
+
+                // 安全網（頂部附近，半透明綠色區域）
+                const netH = Math.min(floorGap * 2, b.h * 0.2);
+                ctx.fillStyle = 'rgba(34, 197, 94, 0.06)';
+                ctx.fillRect(b.x, b.y, b.w, netH);
+                // 安全網格線
+                ctx.strokeStyle = 'rgba(34, 197, 94, 0.15)';
+                ctx.lineWidth = 0.5;
+                for (let nx = b.x; nx < b.x + b.w; nx += 8) {
+                    ctx.beginPath(); ctx.moveTo(nx, b.y); ctx.lineTo(nx, b.y + netH); ctx.stroke();
+                }
+                for (let ny = b.y; ny < b.y + netH; ny += 8) {
+                    ctx.beginPath(); ctx.moveTo(b.x, ny); ctx.lineTo(b.x + b.w, ny); ctx.stroke();
+                }
+
+                // 未完成頂部（鋸齒狀不規則頂端）
+                ctx.fillStyle = steelColor;
+                const toothW = b.w / 5;
+                for (let tx = b.x; tx < b.x + b.w; tx += toothW) {
+                    const th = 5 + Math.abs(Math.sin(tx * 0.7)) * 12;
+                    ctx.fillRect(tx, b.y - th, Math.min(pillarW, toothW), th);
+                }
+
+                // 起重機塔吊
+                const craneX = side === 'left' ? b.x + b.w * 0.3 : b.x + b.w * 0.7;
+                const craneTopY = b.y - 40;
+                // 塔身
+                ctx.strokeStyle = '#f97316';
+                ctx.lineWidth = 3;
+                ctx.beginPath(); ctx.moveTo(craneX, b.y); ctx.lineTo(craneX, craneTopY); ctx.stroke();
+                // 吊臂（水平）
+                const armLen = side === 'left' ? b.w * 1.2 : -b.w * 1.2;
+                ctx.lineWidth = 2;
+                ctx.beginPath(); ctx.moveTo(craneX, craneTopY); ctx.lineTo(craneX + armLen, craneTopY); ctx.stroke();
+                // 支撐鋼索
+                ctx.strokeStyle = 'rgba(249, 115, 22, 0.4)'; ctx.lineWidth = 1;
+                ctx.beginPath(); ctx.moveTo(craneX, craneTopY - 8); ctx.lineTo(craneX + armLen * 0.7, craneTopY); ctx.stroke();
+                ctx.beginPath(); ctx.moveTo(craneX, craneTopY - 8); ctx.lineTo(craneX + armLen * 0.3, craneTopY); ctx.stroke();
+                // 吊索 + 吊鉤（動態擺動）
+                const hookX = craneX + armLen * (0.5 + Math.sin(f * 0.02) * 0.15);
+                const hookY = craneTopY + 20 + Math.sin(f * 0.03) * 5;
+                ctx.strokeStyle = 'rgba(249, 115, 22, 0.6)'; ctx.lineWidth = 1;
+                ctx.beginPath(); ctx.moveTo(hookX, craneTopY); ctx.lineTo(hookX, hookY); ctx.stroke();
+                // 吊鉤
+                ctx.fillStyle = '#f97316';
+                ctx.beginPath(); ctx.arc(hookX, hookY, 3, 0, Math.PI * 2); ctx.fill();
+                ctx.beginPath(); ctx.arc(hookX, hookY + 5, 5, 0, Math.PI); ctx.stroke();
+
+                // 閃爍警示燈（頂部）
+                if (Math.sin(f * .06) > 0) {
+                    ctx.beginPath(); ctx.arc(craneX, craneTopY - 8, 3, 0, Math.PI * 2);
+                    ctx.fillStyle = '#ef4444'; ctx.shadowBlur = 10; ctx.shadowColor = '#ef4444'; ctx.fill(); ctx.shadowBlur = 0;
+                }
+
+                // 底部建材堆放（矩形鋼筋堆）
+                ctx.fillStyle = 'rgba(148, 163, 184, 0.3)';
+                const stackY = b.y + b.h - 15;
+                for (let sx = 0; sx < 3; sx++) {
+                    ctx.fillRect(b.x + 8 + sx * (b.w / 4), stackY, b.w / 5, 10);
+                    ctx.strokeStyle = 'rgba(148, 163, 184, 0.5)'; ctx.lineWidth = 0.5;
+                    ctx.strokeRect(b.x + 8 + sx * (b.w / 4), stackY, b.w / 5, 10);
                 }
             }
             _drawScene(ctx, f) {