![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/03\/20260304231719-69a8bd7f59f5c.png\")
<\/p>\nBlack 8 (Advanced)\u00a0— \u7ee7Black 8 Pro\u4e4b\u540e\u7ee7\u7eed\u6df1\u5ea6\u8bad\u7ec3\u7684\u4f5c\u54c1<\/p>\n
\u4e3b\u8981\u529f\u80fd\u63d0\u5347：<\/p>\n
\u589e\u5f3a\u4e86\u7403\u6746\u62c9\u5347\u52a8\u753b\u548c\u51fb\u7403\u97f3\u6548\u7b49，\u63d0\u5347\u6c89\u6d78\u5f0f\u4f53\u9a8c\u3002<\/p>\n
\u589e\u52a0\u4e86\u6311\u6218\u6a21\u5f0f，\u5b9e\u73b0\u66f4\u591a\u73a9\u6cd5\u3002<\/p>\n
<\/p>\n
<!DOCTYPE html>
\n<html lang="en">
\n<head>
\n <meta charset="UTF-8">
\n <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
\n <meta name="apple-mobile-web-app-capable" content="yes">
\n <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
\n <title>Black 8 \u00b7 Back to Splash<\/title>
\n <style>
\n * {
\n box-sizing: border-box;
\n -webkit-tap-highlight-color: transparent;
\n user-select: none;
\n }
\n html, body {
\n margin: 0;
\n padding: 0;
\n width: 100%;
\n height: 100%;
\n overflow: hidden;
\n }
\n body {
\n background: url('https:\/\/amitofoicu.github.io\/home\/lianchi6.jpg') no-repeat center center fixed;
\n background-size: cover;
\n display: flex;
\n align-items: center;
\n justify-content: center;
\n font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
\n position: relative;
\n }
\n .loading-overlay {
\n position: fixed;
\n top: 0; left: 0; width: 100%; height: 100%;
\n background: rgba(31, 34, 51, 0.95);
\n display: flex;
\n flex-direction: column;
\n justify-content: center;
\n align-items: center;
\n z-index: 9999;
\n transition: opacity 0.5s ease;
\n font-size: 4vmin;
\n color: #ffd966;
\n backdrop-filter: blur(5px);
\n }
\n .spinner {
\n width: 10vmin;
\n height: 10vmin;
\n border: 1vmin solid rgba(255,209,102,0.3);
\n border-top-color: #ffd166;
\n border-radius: 50%;
\n animation: spin 1s linear infinite;
\n margin-bottom: 2vmin;
\n }
\n @keyframes spin { to { transform: rotate(360deg); } }
\n .loading-text {
\n font-size: 4vmin;
\n margin-top: 2vmin;
\n }<\/p>\n
\/* splash screen (mode select) *\/
\n .splash-screen {
\n position: fixed;
\n top: 0; left: 0; width: 100%; height: 100%;
\n background: rgba(10, 20, 10, 0.9);
\n backdrop-filter: blur(8px);
\n display: flex;
\n align-items: center;
\n justify-content: center;
\n z-index: 10000;
\n transition: opacity 0.4s ease;
\n }
\n .splash-card {
\n background: #2d4a2d;
\n border: 4px solid #ffd966;
\n border-radius: 8vmin;
\n padding: 6vmin 8vmin;
\n text-align: center;
\n box-shadow: 0 20px 40px black;
\n max-width: 600px;
\n width: 85%;
\n }
\n .splash-title {
\n color: #ffd966;
\n font-size: 8vmin;
\n font-weight: bold;
\n margin-bottom: 5vmin;
\n text-shadow: 3px 3px 0 #1f3a1f;
\n }
\n .mode-buttons {
\n display: flex;
\n gap: 4vmin;
\n justify-content: center;
\n flex-wrap: wrap;
\n }
\n .mode-btn {
\n background: #3d5c3a;
\n border: 3px solid #e3b87c;
\n color: #ffefc0;
\n font-size: 5vmin;
\n font-weight: bold;
\n padding: 3vmin 6vmin;
\n border-radius: 6vmin;
\n box-shadow: 0 5px 0 #1d2e1b;
\n cursor: pointer;
\n transition: 0.1s;
\n min-width: 26vmin;
\n }
\n .mode-btn:active {
\n transform: translateY(5px);
\n box-shadow: 0 1px 0 #1d2e1b;
\n }
\n .mode-desc {
\n color: #ddb87b;
\n font-size: 3.5vmin;
\n margin-top: 5vmin;
\n border-top: 2px dashed #b88c4a;
\n padding-top: 3vmin;
\n }<\/p>\n
.game-container {
\n background: rgba(61, 43, 26, 0.85);
\n backdrop-filter: blur(5px);
\n padding: 1.5vmin 2vmin 2vmin 2vmin;
\n border-radius: 4vmin;
\n box-shadow: 0 20px 30px rgba(0,0,0,0.6), inset 2px 2px 8px #b87c4b;
\n border: 2px solid #aa6e3a;
\n position: relative;
\n width: 95%;
\n max-width: 820px;
\n margin: 0 auto;
\n }
\n .game-header {
\n display: flex;
\n align-items: center;
\n justify-content: space-between;
\n margin-bottom: 1vmin;
\n }
\n .header-logo {
\n height: 7vmin;
\n width: auto;
\n border-radius: 1vmin;
\n border: 0.2vmin solid rgba(255,209,102,0.4);
\n background: rgba(0,0,0,0.2);
\n cursor: pointer;
\n }
\n .game-title {
\n text-align: center;
\n color: #ffd966;
\n font-size: 5vmin;
\n font-weight: bold;
\n text-shadow: 3px 3px 0 #4f3a1e;
\n letter-spacing: 2px;
\n flex: 1;
\n }
\n canvas {
\n display: block;
\n width: 100%;
\n height: auto;
\n border-radius: 2.5vmin;
\n background: #1e3b2a;
\n box-shadow: inset 0 0 0 2px #7b5a3c, 0 10px 15px rgba(0,0,0,0.5);
\n touch-action: none;
\n cursor: crosshair;
\n }
\n .status-bar {
\n display: flex;
\n justify-content: space-between;
\n align-items: center;
\n padding: 2vmin 1vmin 1vmin 1vmin;
\n color: #f7e9c3;
\n text-shadow: 2px 2px 0 #4f3a1e;
\n font-weight: bold;
\n font-size: 5vmin;
\n }
\n .stroke-box {
\n background: #2f4d2e;
\n padding: 1vmin 5vmin;
\n border-radius: 10vmin;
\n border: 2px solid #dbb062;
\n box-shadow: inset 0 2px 5px #0f2b0e;
\n letter-spacing: 2px;
\n }
\n .bottom-panel {
\n display: flex;
\n align-items: center;
\n justify-content: space-between;
\n padding: 1vmin 1vmin 0 1vmin;
\n gap: 2vmin;
\n flex-wrap: wrap;
\n }
\n .power-meter {
\n background: #5b4330;
\n padding: 1vmin 3vmin;
\n border-radius: 8vmin;
\n border: 2px solid #edc27a;
\n display: flex;
\n align-items: center;
\n gap: 2vmin;
\n color: #ffdd99;
\n font-size: 4vmin;
\n font-weight: bold;
\n flex: 1;
\n min-width: 200px;
\n }
\n .bar-bg {
\n width: 100%;
\n height: 4vmin;
\n background: #2a1e12;
\n border-radius: 2vmin;
\n border: 1px solid #ac8b5b;
\n overflow: hidden;
\n }
\n .bar-fill {
\n width: 20%;
\n height: 100%;
\n background: linear-gradient(90deg, #f9b81b, #f55d3e);
\n transition: width 0.03s;
\n }
\n .button-group {
\n display: flex;
\n align-items: center;
\n gap: 1.5vmin;
\n flex-shrink: 0;
\n }
\n .action-btn {
\n background: #3d5c3a;
\n border: 2px solid #e3b87c;
\n color: #ffefc0;
\n font-size: 3.5vmin;
\n padding: 0.8vmin 2.5vmin;
\n border-radius: 5vmin;
\n font-weight: bold;
\n box-shadow: 0 3px 0 #1d2e1b;
\n cursor: pointer;
\n white-space: nowrap;
\n min-width: 10vmin;
\n text-align: center;
\n transition: all 0.1s ease;
\n }
\n .action-btn:active {
\n transform: translateY(3px);
\n box-shadow: 0 1px 0 #1d2e1b;
\n }
\n .action-btn.mute {
\n background: #5b4330;
\n border-color: #edc27a;
\n min-width: 8vmin;
\n padding: 0.8vmin 1.5vmin;
\n }
\n .action-btn.next {
\n background: #4a7a4a;
\n border-color: #ffd966;
\n }
\n .hint {
\n color: #ffd966;
\n font-size: 3.2vmin;
\n padding: 1vmin;
\n background: #2d4a2d;
\n border-radius: 4vmin;
\n margin: 1vmin 0;
\n text-align: center;
\n border: 1px solid #b88c4a;
\n }
\n .again-overlay {
\n position: absolute;
\n top: 0; left: 0; width: 100%; height: 100%;
\n background: rgba(0,0,0,0.4);
\n display: flex;
\n align-items: center;
\n justify-content: center;
\n z-index: 20;
\n backdrop-filter: blur(3px);
\n transition: opacity 0.3s;
\n }
\n .again-card {
\n background: #3d5c3a;
\n border: 4px solid #ffd966;
\n border-radius: 8vmin;
\n padding: 5vmin 10vmin;
\n text-align: center;
\n box-shadow: 0 10px 30px black;
\n }
\n .again-card .again-title {
\n color: #ffd966;
\n font-size: 7vmin;
\n font-weight: bold;
\n margin-bottom: 5vmin;
\n text-shadow: 2px 2px 0 #1f3a1f;
\n }
\n .again-btn {
\n background: #f7b731;
\n border: none;
\n color: #1e3b1e;
\n font-size: 6vmin;
\n font-weight: bold;
\n padding: 2vmin 8vmin;
\n border-radius: 6vmin;
\n box-shadow: 0 5px 0 #8b5a2b;
\n cursor: pointer;
\n transition: 0.1s;
\n border: 2px solid #ffe49e;
\n }
\n .again-btn:active {
\n transform: translateY(5px);
\n box-shadow: 0 1px 0 #8b5a2b;
\n }
\n .mode-indicator {
\n background: #2d4a2d;
\n padding: 1vmin 4vmin;
\n border-radius: 5vmin;
\n border: 1px solid #ffd966;
\n font-size: 3.5vmin;
\n color: #ffdba0;
\n }
\n .lives-container {
\n display: inline-flex;
\n align-items: center;
\n gap: 1vmin;
\n background: #3d2b1c;
\n padding: 0.5vmin 3vmin;
\n border-radius: 5vmin;
\n border: 1px solid #edc27a;
\n margin-left: 2vmin;
\n font-size: 4vmin;
\n }
\n .heart {
\n color: #ff6b6b;
\n filter: drop-shadow(0 0 4px #ffaaaa);
\n }
\n @media (max-width: 600px) {
\n .status-bar { font-size: 6vmin; }
\n .stroke-box { padding: 0.8vmin 4vmin; }
\n .action-btn { font-size: 4vmin; padding: 0.6vmin 2vmin; }
\n .bottom-panel { gap: 1vmin; }
\n .power-meter { font-size: 3.5vmin; padding: 0.8vmin 2vmin; }
\n }
\n <\/style>
\n<\/head>
\n<body><\/p>\n
<!– loading overlay –>
\n<div class="loading-overlay" id="loadingOverlay">
\n <div class="spinner"><\/div>
\n <div class="loading-text">Loading Game…<\/div>
\n<\/div><\/p>\n
<!– splash screen: mode selection –>
\n<div class="splash-screen" id="splashScreen" style="display: flex;">
\n <div class="splash-card">
\n <div class="splash-title">🎱 BLACK 8<\/div>
\n <div class="mode-buttons">
\n <button class="mode-btn" id="practiceModeBtn">- PRACTICE -<\/button>
\n <button class="mode-btn" id="challengeModeBtn">CHALLENGE<\/button>
\n <\/div>
\n <div class="mode-desc" id="modeDesc">Practice: clear all balls<br>Challenge: 3 lives<\/div>
\n <\/div>
\n<\/div><\/p>\n
<div class="game-container" style="position: relative;">
\n <div class="game-header">
\n <a href="https:\/\/amitofoicu.github.io\/home\/main.html" target="_blank" rel="noopener noreferrer">
\n <img src="https:\/\/amitofoicu.github.io\/home\/logo.jpg" alt="Logo" class="header-logo">
\n <\/a>
\n <div class="game-title">🎱 Black 8<\/div>
\n <div class="mode-indicator" id="modeIndicator">PRACTICE<\/div>
\n <\/div>
\n <canvas id="poolCanvas" width="800" height="450"><\/canvas><\/p>\n
<div class="hint" id="hintText">
\n 👆 Drag cue ball \u00b7 Pull back for power \u00b7 Release to shoot
\n <\/div><\/p>\n
<div class="status-bar">
\n <!– dynamic content: practice shows strokes, challenge shows lives –>
\n <span id="statusLeftText">Clear all🎱 to win!<\/span>
\n <span id="strokeBox" class="stroke-box">0<\/span>
\n <span id="livesDisplay" class="lives-container" style="display: none;">\u2764\ufe0f<span id="livesCount">3<\/span><\/span>
\n <\/div><\/p>\n
<!– \u79fb\u9664 "Miss strike" \u53ca\u5176\u6240\u6709\u76f8\u5173\u5143\u7d20：\u539f challengeCounter \u6574\u4e2adiv\u5df2\u5220\u9664 –><\/p>\n
<div class="bottom-panel">
\n <div class="power-meter">
\n <span>💪<\/span>
\n <div class="bar-bg"><div class="bar-fill" id="powerFill" style="width: 20%;"><\/div><\/div>
\n <\/div>
\n <div class="button-group">
\n <button class="action-btn mute" id="muteBtn">🔊<\/button>
\n <button class="action-btn" id="backBtn">🔙 Back<\/button> <!– \u6539\u70ba Back \u6309\u9215 –>
\n <button class="action-btn next" id="nextBtn" style="display: none;">\u2728 Next<\/button>
\n <\/div>
\n <\/div><\/p>\n
<!– Play again overlay (foul \/ victory \/ challenge fail) –>
\n <div id="againOverlay" class="again-overlay" style="display: none;">
\n <div class="again-card">
\n <div class="again-title" id="againMessage">🏆 Play Again<\/div>
\n <button class="again-btn" id="againPlayBtn">🎱 Play Again<\/button>
\n <\/div>
\n <\/div>
\n<\/div><\/p>\n
<script>
\n (function() {
\n \/\/ —– DOM elements —–
\n const canvas = document.getElementById('poolCanvas');
\n const ctx = canvas.getContext('2d');
\n const strokeBox = document.getElementById('strokeBox');
\n const powerFill = document.getElementById('powerFill');
\n const nextBtn = document.getElementById('nextBtn');
\n const backBtn = document.getElementById('backBtn'); \/\/ \u6539\u540d
\n const muteBtn = document.getElementById('muteBtn');
\n const loadingOverlay = document.getElementById('loadingOverlay');
\n const splashScreen = document.getElementById('splashScreen');
\n const modeIndicator = document.getElementById('modeIndicator');
\n \/\/ \u79fb\u9664\u4e86 challengeCounterDiv \u548c blackChancesSpan \u7684\u83b7\u53d6
\n const againOverlay = document.getElementById('againOverlay');
\n const againMessage = document.getElementById('againMessage');
\n const againPlayBtn = document.getElementById('againPlayBtn');
\n const hintText = document.getElementById('hintText');
\n const livesDisplay = document.getElementById('livesDisplay');
\n const livesCountSpan = document.getElementById('livesCount');
\n const statusLeftText = document.getElementById('statusLeftText');<\/p>\n
\/\/ —– mode variables —–
\n let gameMode = 'practice'; \/\/ 'practice' or 'challenge'
\n \/\/ \u79fb\u9664 blackMissCount \u76f8\u5173，\u4f46\u4fdd\u7559 lives \u903b\u8f91（\u5185\u90e8\u4f7f\u7528\u53d8\u91cf blackMissCount \u53ea\u7528\u4e8e\u903b\u8f91，\u4e0d\u518d\u663e\u793a）
\n let challengeLives = 3; \/\/ total lives
\n \/\/ \u6ce8\u610f：miss count \u4e0d\u518d\u7528\u4e8e\u663e\u793a，\u4f46\u5185\u90e8\u4ecd\u53ef\u7528\u4e8e\u5224\u65ad\u8fde\u51fb（\u5982\u679c\u9700\u8981\u53ef\u4ee5\u4fdd\u7559，\u4f46\u4e3a\u4e86\u5b8c\u5168\u79fb\u9664GUI，\u6211\u4eec\u628a\u76f8\u5173\u663e\u793a\u53bb\u6389，\u5185\u90e8\u903b\u8f91\u7b80\u5316）
\n \/\/ \u4e3a\u4e86\u7b80\u5355\u4e14\u4e0d\u5f71\u54cd\u539f\u6709\u6263\u8840\u903b\u8f91，\u6211\u4eec\u4fdd\u7559 blackMissCount \u4f46\u4e0d\u5c55\u793a\u3002
\n let blackMissCount = 0; \/\/ \u5185\u90e8\u8bb0\u5f55，\u4e0d\u518d\u663e\u793a<\/p>\n
\/\/ —– audio management —–
\n let isMuted = false;
\n let userInteracted = false;
\n let hasShot = false; <\/p>\n
let bgmAudio = null;
\n let winAudio = null; \/\/ win.mp3 (black potted)
\n let xiaochuAudio = null; \/\/ xiaochu.mp3 (victory fanfare)
\n let collisionAudio = null; \/\/ jiqiu.mp3 (ball collision)<\/p>\n
function initAudio() {
\n bgmAudio = new Audio('https:\/\/amitofoicu.github.io\/home\/beijing.ogg');
\n bgmAudio.loop = true;
\n bgmAudio.volume = 1.0;
\n bgmAudio.setAttribute('playsinline', '');
\n bgmAudio.setAttribute('webkit-playsinline', '');
\n bgmAudio.load();<\/p>\n
winAudio = new Audio('https:\/\/amitofoicu.github.io\/home\/win.mp3');
\n winAudio.volume = 0.7;
\n winAudio.load();<\/p>\n
xiaochuAudio = new Audio('https:\/\/amitofoicu.github.io\/home\/xiaochu.mp3');
\n xiaochuAudio.volume = 1.0;
\n xiaochuAudio.load();<\/p>\n
collisionAudio = new Audio('https:\/\/amitofoicu.github.io\/home\/jiqiu.mp3');
\n collisionAudio.volume = 0.6;
\n collisionAudio.load();<\/p>\n
muteBtn.textContent = isMuted ? '🔇' : '🔊';
\n }<\/p>\n
function playBGM() {
\n if (!hasShot || isMuted || !bgmAudio) return;
\n try {
\n if (!bgmAudio.paused) return;
\n bgmAudio.currentTime = 0;
\n const playPromise = bgmAudio.play();
\n if (playPromise !== undefined) playPromise.catch(e => console.log('BGM play failed:', e));
\n } catch (e) {}
\n }<\/p>\n
function stopBGM() {
\n if (!bgmAudio) return;
\n try { bgmAudio.pause(); bgmAudio.currentTime = 0; } catch (e) {}
\n }<\/p>\n
function playSound(audio) {
\n if (!userInteracted || isMuted || !audio) return;
\n try {
\n const clone = audio.cloneNode();
\n clone.volume = audio.volume;
\n const playPromise = clone.play();
\n if (playPromise !== undefined) playPromise.catch(e => console.log('sound play failed:', e));
\n setTimeout(() => { clone.pause(); clone.src = ''; }, 3000);
\n } catch (e) {}
\n }<\/p>\n
function playWinSound() { playSound(winAudio); }
\n function playXiaochuSound() { playSound(xiaochuAudio); }
\n function playCollisionSound() { playSound(collisionAudio); }<\/p>\n
function toggleMute() {
\n isMuted = !isMuted;
\n muteBtn.textContent = isMuted ? '🔇' : '🔊';
\n if (isMuted) stopBGM(); else if (hasShot) playBGM();
\n }<\/p>\n
function handleUserInteraction() { if (!userInteracted) userInteracted = true; }<\/p>\n
\/\/ —– constants & physics —–
\n const CW = 800, CH = 450;
\n const LEFT_WALL = 40, RIGHT_WALL = 760, TOP_WALL = 40, BOTTOM_WALL = 410;
\n const BALL_RADIUS = 14;
\n const FRICTION = 0.98;
\n const MAX_POWER_SPEED = 25;<\/p>\n
const pockets = [
\n { x: LEFT_WALL, y: TOP_WALL }, { x: RIGHT_WALL, y: TOP_WALL },
\n { x: LEFT_WALL, y: BOTTOM_WALL }, { x: RIGHT_WALL, y: BOTTOM_WALL },
\n { x: (LEFT_WALL+RIGHT_WALL)\/2, y: TOP_WALL }, { x: (LEFT_WALL+RIGHT_WALL)\/2, y: BOTTOM_WALL }
\n ];
\n const POCKET_RADIUS = 28;<\/p>\n
\/\/ —– game state —–
\n let white = { x: 200, y: 220, vx: 0, vy: 0 };
\n let blackBalls = [];
\n const BLACK_COUNT = 7;
\n let remainingBlacks = BLACK_COUNT;
\n let gameOver = false;
\n let winFlag = false;
\n let checkWhiteAfterStop = false;
\n let strokes = 0;
\n let whiteRemoved = false; \/\/ white ball removed (foul)<\/p>\n
\/\/ —– aiming state —–
\n let isDragging = false;
\n let dragX = 0, dragY = 0;
\n let angle = 0;
\n let power = 0.2;
\n let isMouseOutside = false;<\/p>\n
\/\/ —– Realistic cue animation with spring physics —–
\n const CUE_FIXED_LENGTH = 200; \/\/ total length constant
\n \/\/ cueOffset: positive = pulled back, negative = pushed forward (spring)
\n let cueOffset = 0; \/\/ main animation offset
\n let cueVelocity = 0; \/\/ velocity for smooth physics
\n let targetOffset = 0; \/\/ target based on power<\/p>\n
\/\/ Spring constants for realistic feel
\n const CUE_SPRING_STRENGTH = 0.2;
\n const CUE_DAMPING = 0.92;<\/p>\n
\/\/ Flag for shot impulse
\n let shotJustFired = false;<\/p>\n
\/\/ —– Challenge mode fix: track if current shot has been processed —–
\n let shotProcessedForLives = false; \/\/ \u6807\u8bb0\u672c\u6746\u662f\u5426\u5df2\u5904\u7406\u6263\u8840\u903b\u8f91<\/p>\n
\/\/ —– particle system (same) —–
\n let particles = [];
\n const PARTICLE_COLORS = ['#FF69B4','#FFD700','#FF4500','#9370DB','#00FF7F','#FF1493','#FFA500','#32CD32','#FFB6C1','#87CEEB','#FF6346','#FFFF00','#FF00FF','#00FFFF','#FFDAB9'];<\/p>\n
class Particle {
\n constructor(x, y, type = 'explosion') {
\n this.x = x; this.y = y; this.type = type;
\n if (type === 'explosion') {
\n const angle = Math.random() * Math.PI * 2;
\n const speed = Math.random() * 8 + 5;
\n this.vx = Math.cos(angle) * speed;
\n this.vy = Math.sin(angle) * speed;
\n this.size = Math.random() * 10 + 5;
\n this.fadeSpeed = 0.01 + Math.random() * 0.01;
\n } else {
\n this.vx = (Math.random() – 0.5) * 1.5;
\n this.vy = Math.random() * 2 + 1.5;
\n this.size = Math.random() * 8 + 4;
\n this.fadeSpeed = 0.001;
\n }
\n this.color = PARTICLE_COLORS[Math.floor(Math.random() * PARTICLE_COLORS.length)];
\n this.rotation = Math.random() * Math.PI * 2;
\n this.rotationSpeed = (Math.random() – 0.5) * 0.05;
\n this.gravity = 0.05;
\n this.life = 1.0;
\n }
\n update() {
\n this.x += this.vx; this.y += this.vy;
\n this.vy += this.gravity;
\n this.rotation += this.rotationSpeed;
\n if (this.type === 'explosion') this.life -= this.fadeSpeed;
\n if (this.type === 'rain') {
\n if (this.y > CH + 30) { this.y = -20; this.x = Math.random() * CW; this.vx = (Math.random()-0.5)*1.5; this.vy = Math.random()*2+1.5; }
\n if (this.x < 0 || this.x > CW) this.vx *= -0.8;
\n return true;
\n } else {
\n if (this.y > CH + 50) this.life = 0;
\n return this.life > 0;
\n }
\n }
\n draw() {
\n ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.rotation); ctx.globalAlpha = this.life;
\n ctx.beginPath();
\n for (let i = 0; i < 5; i++) {
\n let angle = (i\/5)*Math.PI*2;
\n let petalLength = this.size, petalWidth = this.size*0.6;
\n let x = Math.cos(angle)*petalLength, y = Math.sin(angle)*petalLength;
\n let cx1 = Math.cos(angle+0.5)*petalWidth, cy1 = Math.sin(angle+0.5)*petalWidth;
\n let cx2 = Math.cos(angle-0.5)*petalWidth, cy2 = Math.sin(angle-0.5)*petalWidth;
\n ctx.moveTo(0,0); ctx.quadraticCurveTo(cx1, cy1, x, y); ctx.quadraticCurveTo(cx2, cy2, 0, 0);
\n }
\n ctx.fillStyle = this.color; ctx.shadowColor = 'rgba(255, 255, 255, 0.5)'; ctx.shadowBlur = 10; ctx.fill();
\n ctx.restore();
\n }
\n }<\/p>\n
function explodeFlowersFromPocket(pocketX, pocketY, count = 15) {
\n for (let i=0; i<count; i++) particles.push(new Particle(pocketX, pocketY, 'explosion'));
\n }
\n function startRainFlowers(count = 40) {
\n particles = particles.filter(p => p.type === 'rain');
\n for (let i=0; i<count; i++) particles.push(new Particle(Math.random()*CW, Math.random()*CH-CH, 'rain'));
\n }
\n function stopRainFlowers() { particles = particles.filter(p => p.type !== 'rain'); }
\n function updateParticles() { particles = particles.filter(p => p.update()); }
\n function drawParticles() { for (let p of particles) p.draw(); ctx.globalAlpha = 1.0; }<\/p>\n
\/\/ —– helpers —–
\n function randomBlackPositions(count, cueX, cueY) {
\n let positions = [];
\n const minDist = BALL_RADIUS * 2 + 15;
\n let attempts = 0, maxAttempts = 5000;
\n for (let i=0; i<count; i++) {
\n let placed = false;
\n while (!placed && attempts < maxAttempts) {
\n attempts++;
\n let newX = LEFT_WALL + Math.random() * (RIGHT_WALL – LEFT_WALL);
\n let newY = TOP_WALL + Math.random() * (BOTTOM_WALL – TOP_WALL);
\n let distCue = Math.hypot(newX – cueX, newY – cueY);
\n if (distCue < minDist) continue;
\n let ok = true;
\n for (let j=0; j<positions.length; j++) {
\n if (Math.hypot(newX – positions[j].x, newY – positions[j].y) < minDist) { ok = false; break; }
\n }
\n if (ok) { positions.push({ x: newX, y: newY, vx:0, vy:0, active:true }); placed = true; }
\n }
\n if (!placed) positions.push({ x:400+(i*20), y:200+(i*15), vx:0, vy:0, active:true });
\n }
\n return positions;
\n }<\/p>\n
\/\/ reset game (keep mode) – \u4f46 Back \u6309\u9215\u6703\u56de\u5230\u4e3b\u756b\u9762，\u6240\u4ee5\u9019\u500b\u4e3b\u8981\u7528\u65bc\u6a21\u5f0f\u5167\u91cd\u555f
\n function resetGame() {
\n white = { x: 200, y: 220, vx: 0, vy: 0 };
\n whiteRemoved = false;
\n blackBalls = randomBlackPositions(BLACK_COUNT, white.x, white.y);
\n remainingBlacks = BLACK_COUNT;
\n gameOver = false;
\n winFlag = false;
\n checkWhiteAfterStop = false;
\n strokes = 0;
\n strokeBox.innerText = strokes;
\n isDragging = false;
\n power = 0.2;
\n targetOffset = 0;
\n cueOffset = 0;
\n cueVelocity = 0;
\n powerFill.style.width = '20%';
\n nextBtn.style.display = 'none';
\n backBtn.style.display = 'inline-block'; \/\/ \u78ba\u4fdd Back \u986f\u793a
\n stopRainFlowers();
\n againOverlay.style.display = 'none';
\n shotJustFired = false;
\n shotProcessedForLives = false;<\/p>\n
\/\/ reset challenge lives & misses (miss\u4e0d\u518d\u663e\u793a)
\n blackMissCount = 0;
\n challengeLives = 3;
\n if (gameMode === 'challenge') {
\n \/\/ \u79fb\u9664\u4e86 challengeCounterDiv \u7684\u663e\u793a，\u53ea\u663e\u793a lives
\n livesDisplay.style.display = 'inline-flex';
\n livesCountSpan.innerText = challengeLives;
\n \/\/ hide stroke
\n strokeBox.style.display = 'none';
\n statusLeftText.innerText = '\u2764\ufe0f Lives left:';
\n } else {
\n livesDisplay.style.display = 'none';
\n strokeBox.style.display = 'inline-block';
\n statusLeftText.innerText = 'Clear all🎱 to win! Strokes';
\n }
\n }<\/p>\n
\/\/ \u8fd4\u56de\u4e3b\u756b\u9762（\u986f\u793a\u6a21\u5f0f\u9078\u64c7）
\n function goBackToSplash() {
\n \/\/ \u505c\u6b62\u6240\u6709\u904b\u52d5
\n white.vx = 0; white.vy = 0;
\n blackBalls.forEach(b => { if(b.active) { b.vx = 0; b.vy = 0; } });
\n isDragging = false;<\/p>\n
\/\/ \u986f\u793a\u555f\u52d5\u756b\u9762
\n splashScreen.style.display = 'flex';
\n splashScreen.style.opacity = '1';<\/p>\n
\/\/ \u53ef\u9078：\u505c\u6b62\u80cc\u666f\u97f3\u6a02
\n stopBGM();
\n hasShot = false;
\n }<\/p>\n
\/\/ mode selection
\n function startGameWithMode(mode) {
\n gameMode = mode;
\n modeIndicator.innerText = (mode === 'practice') ? 'PRACTICE' : 'CHALLENGE';
\n if (mode === 'challenge') {
\n \/\/ \u79fb\u9664\u4e86 challengeCounterDiv \u7684\u663e\u793a\u76f8\u5173\u4ee3\u7801
\n livesDisplay.style.display = 'inline-flex';
\n livesCountSpan.innerText = '3';
\n strokeBox.style.display = 'none';
\n statusLeftText.innerText = '\u2764\ufe0f Lives left:';
\n hintText.innerText = '👆 Drag cue ball \u00b7 Pull back for power \u00b7 Release to shoot';
\n } else {
\n livesDisplay.style.display = 'none';
\n strokeBox.style.display = 'inline-block';
\n statusLeftText.innerText = 'Clear all🎱 to win! Strokes';
\n hintText.innerText = '👆 Drag cue ball \u00b7 Pull back for power \u00b7 Release to shoot';
\n }
\n resetGame();
\n splashScreen.style.opacity = '0';
\n setTimeout(() => splashScreen.style.display = 'none', 400);
\n }<\/p>\n
function showAgainOverlay(reason) {
\n if (reason === 'foul') againMessage.innerText = '\u26aa Cue Ball Foul';
\n else if (reason === 'victory') againMessage.innerText = '🏆 VICTORY 🏆';
\n else if (reason === 'challengeFail') againMessage.innerText = '\u2764\ufe0f Challenge Failed';
\n againOverlay.style.display = 'flex';
\n }<\/p>\n
function handleWhiteFoul() {
\n whiteRemoved = true;
\n white.vx = 0; white.vy = 0;
\n blackBalls.forEach(b => { if(b.active) { b.vx = 0; b.vy = 0; } });
\n showAgainOverlay('foul');
\n }<\/p>\n
function handleChallengeFail() {
\n gameOver = true;
\n whiteRemoved = true;
\n white.vx = white.vy = 0;
\n blackBalls.forEach(b => { if(b.active) { b.vx = 0; b.vy = 0; } });
\n showAgainOverlay('challengeFail');
\n }<\/p>\n
\/\/ —– pocket check —–
\n function checkPocket(ball) {
\n for (let p of pockets) if (Math.hypot(ball.x-p.x, ball.y-p.y) < POCKET_RADIUS) return p;
\n return null;
\n }<\/p>\n
let lastCollisionTime = 0;
\n const COLLISION_THROTTLE = 80;
\n function tryPlayCollisionEffect() {
\n const now = Date.now();
\n if (now – lastCollisionTime > COLLISION_THROTTLE) { playCollisionSound(); lastCollisionTime = now; }
\n }<\/p>\n
function ballsAreStationary() {
\n if (!whiteRemoved && (Math.abs(white.vx)>0.1 || Math.abs(white.vy)>0.1)) return false;
\n for (let b of blackBalls) if (b.active && (Math.abs(b.vx)>0.1 || Math.abs(b.vy)>0.1)) return false;
\n return true;
\n }<\/p>\n
let blacksBeforeShot = BLACK_COUNT;<\/p>\n
\/\/ —– physics update (challenge lives logic: miss = lose 1 life) —–
\n function updatePhysics() {
\n if (whiteRemoved) {
\n updateParticles();
\n return;
\n }<\/p>\n
if (!gameOver || checkWhiteAfterStop) {
\n white.x += white.vx; white.y += white.vy;
\n for (let b of blackBalls) if (b.active) { b.x += b.vx; b.y += b.vy; }<\/p>\n
\/\/ wall collisions
\n if (white.x – BALL_RADIUS < LEFT_WALL) { white.x = LEFT_WALL + BALL_RADIUS; white.vx = -white.vx * 0.92; }
\n if (white.x + BALL_RADIUS > RIGHT_WALL) { white.x = RIGHT_WALL – BALL_RADIUS; white.vx = -white.vx * 0.92; }
\n if (white.y – BALL_RADIUS < TOP_WALL) { white.y = TOP_WALL + BALL_RADIUS; white.vy = -white.vy * 0.92; }
\n if (white.y + BALL_RADIUS > BOTTOM_WALL) { white.y = BOTTOM_WALL – BALL_RADIUS; white.vy = -white.vy * 0.92; }
\n for (let b of blackBalls) {
\n if (!b.active) continue;
\n if (b.x – BALL_RADIUS < LEFT_WALL) { b.x = LEFT_WALL + BALL_RADIUS; b.vx = -b.vx * 0.92; }
\n if (b.x + BALL_RADIUS > RIGHT_WALL) { b.x = RIGHT_WALL – BALL_RADIUS; b.vx = -b.vx * 0.92; }
\n if (b.y – BALL_RADIUS < TOP_WALL) { b.y = TOP_WALL + BALL_RADIUS; b.vy = -b.vy * 0.92; }
\n if (b.y + BALL_RADIUS > BOTTOM_WALL) { b.y = BOTTOM_WALL – BALL_RADIUS; b.vy = -b.vy * 0.92; }
\n }<\/p>\n
\/\/ white vs black
\n for (let b of blackBalls) {
\n if (!b.active) continue;
\n const dx = b.x – white.x, dy = b.y – white.y, dist = Math.hypot(dx, dy);
\n if (dist < BALL_RADIUS*2 && dist > 0.001) {
\n const nx = dx\/dist, ny = dy\/dist;
\n const vrelx = white.vx – b.vx, vrely = white.vy – b.vy, vn = vrelx*nx + vrely*ny;
\n if (vn > 0) { const imp = (2*vn)\/2*0.96; white.vx -= imp*nx; white.vy -= imp*ny; b.vx += imp*nx; b.vy += imp*ny; tryPlayCollisionEffect(); }
\n const overlap = BALL_RADIUS*2 – dist;
\n if (overlap > 0) { const sepX = nx*overlap*0.5, sepY = ny*overlap*0.5; white.x -= sepX; white.y -= sepY; b.x += sepX; b.y += sepY; }
\n }
\n }<\/p>\n
\/\/ black vs black
\n for (let i=0; i<blackBalls.length; i++) {
\n if (!blackBalls[i].active) continue;
\n for (let j=i+1; j<blackBalls.length; j++) {
\n if (!blackBalls[j].active) continue;
\n const b1=blackBalls[i], b2=blackBalls[j];
\n const dx = b2.x-b1.x, dy = b2.y-b1.y, dist = Math.hypot(dx,dy);
\n if (dist < BALL_RADIUS*2 && dist > 0.001) {
\n const nx = dx\/dist, ny = dy\/dist;
\n const vrelx = b1.vx – b2.vx, vrely = b1.vy – b2.vy, vn = vrelx*nx + vrely*ny;
\n if (vn > 0) { const imp = (2*vn)\/2*0.96; b1.vx -= imp*nx; b1.vy -= imp*ny; b2.vx += imp*nx; b2.vy += imp*ny; tryPlayCollisionEffect(); }
\n const overlap = BALL_RADIUS*2 – dist;
\n if (overlap > 0) { const sepX = nx*overlap*0.5, sepY = ny*overlap*0.5; b1.x -= sepX; b1.y -= sepY; b2.x += sepX; b2.y += sepY; }
\n }
\n }
\n }<\/p>\n
white.vx *= FRICTION; white.vy *= FRICTION;
\n for (let b of blackBalls) if (b.active) { b.vx *= FRICTION; b.vy *= FRICTION; }
\n if (Math.abs(white.vx) < 0.1) white.vx = 0;
\n if (Math.abs(white.vy) < 0.1) white.vy = 0;
\n for (let b of blackBalls) if (b.active) { if (Math.abs(b.vx) < 0.1) b.vx = 0; if (Math.abs(b.vy) < 0.1) b.vy = 0; }<\/p>\n
\/\/ black pockets
\n for (let b of blackBalls) {
\n if (!b.active) continue;
\n const pocket = checkPocket(b);
\n if (pocket) {
\n b.active = false;
\n remainingBlacks–;
\n playWinSound();
\n explodeFlowersFromPocket(pocket.x, pocket.y, 12);
\n }
\n }<\/p>\n
\/\/ white pocket \u2192 foul
\n if (checkPocket(white)) { handleWhiteFoul(); return; }<\/p>\n
if (remainingBlacks === 0 && !winFlag && !checkWhiteAfterStop) {
\n checkWhiteAfterStop = true;
\n }
\n }<\/p>\n
if (checkWhiteAfterStop && ballsAreStationary()) {
\n if (checkPocket(white)) {
\n handleWhiteFoul();
\n } else {
\n playXiaochuSound();
\n gameOver = true; winFlag = true;
\n startRainFlowers(50);
\n showAgainOverlay('victory');
\n nextBtn.style.display = 'none';
\n backBtn.style.display = 'inline-block'; \/\/ \u4fdd\u6301 Back \u53ef\u898b
\n }
\n checkWhiteAfterStop = false;
\n }<\/p>\n
\/\/ —– \u4fee\u590d\u6311\u6218\u6a21\u5f0f\u6263\u8840\u903b\u8f91：\u4f7f\u7528 shotProcessedForLives \u786e\u4fdd\u6bcf\u6746\u53ea\u5904\u7406\u4e00\u6b21 —–
\n if (gameMode === 'challenge' && !whiteRemoved && ballsAreStationary() && strokes > 0 && !gameOver && !winFlag) {
\n \/\/ \u53ea\u6709\u5f53\u672c\u6746\u5c1a\u672a\u5904\u7406\u65f6，\u624d\u8fdb\u5165\u5224\u65ad
\n if (!shotProcessedForLives) {
\n let currentBlacks = blackBalls.filter(b => b.active).length;
\n if (currentBlacks === blacksBeforeShot) {
\n \/\/ \u6ca1\u6709\u9ed1\u7403\u5165\u888b：\u6263\u8840
\n challengeLives–;
\n if (challengeLives < 0) challengeLives = 0;
\n livesCountSpan.innerText = challengeLives;
\n \/\/ \u5185\u90e8miss\u8ba1\u6570\u4fdd\u7559\u4f46\u4e0d\u518d\u663e\u793a
\n blackMissCount++;
\n if (challengeLives <= 0) {
\n handleChallengeFail();
\n }
\n } else {
\n \/\/ \u6709\u9ed1\u7403\u5165\u888b：\u91cd\u7f6e\u8fde\u51fb\u8ba1\u6570
\n blackMissCount = 0;
\n \/\/ \u751f\u547d\u503c\u4e0d\u53d8
\n }
\n \/\/ \u6807\u8bb0\u672c\u6746\u5df2\u5904\u7406，\u9632\u6b62\u91cd\u590d\u6263\u8840
\n shotProcessedForLives = true;
\n }
\n }<\/p>\n
\/\/ Realistic cue animation with spring physics
\n if (isDragging) {
\n \/\/ Map power 0.2-1.2 to offset 0-120 (pulled back)
\n targetOffset = (power – 0.2) * 120; \/\/ max 120 pullback
\n } else {
\n targetOffset = 0;
\n }<\/p>\n
\/\/ Spring physics for smooth, realistic motion
\n let force = (targetOffset – cueOffset) * CUE_SPRING_STRENGTH;
\n cueVelocity += force;
\n cueVelocity *= CUE_DAMPING;
\n cueOffset += cueVelocity;<\/p>\n
\/\/ Apply shot impulse if shot just fired
\n if (shotJustFired) {
\n cueVelocity += -25; \/\/ Strong forward impulse
\n shotJustFired = false;
\n }<\/p>\n
\/\/ Limit extreme offsets
\n if (cueOffset > 150) cueOffset = 150;
\n if (cueOffset < -50) cueOffset = -50;<\/p>\n
updateParticles();
\n }<\/p>\n
\/\/ —– shoot (trigger spring release) —–
\n function shoot() {
\n if (gameOver || whiteRemoved) return;
\n if (white.vx !== 0 || white.vy !== 0) return;
\n if (remainingBlacks === 0) return;<\/p>\n
\/\/ Set flag for forward impulse on next physics update
\n shotJustFired = true;<\/p>\n
const speed = power * MAX_POWER_SPEED;
\n white.vx = Math.cos(angle) * speed;
\n white.vy = Math.sin(angle) * speed;
\n strokes++;
\n strokeBox.innerText = strokes;<\/p>\n
blacksBeforeShot = blackBalls.filter(b => b.active).length;<\/p>\n
\/\/ \u65b0\u7684\u4e00\u6746，\u91cd\u7f6e\u6263\u8840\u5904\u7406\u6807\u8bb0
\n shotProcessedForLives = false;<\/p>\n
if (!hasShot) { hasShot = true; setTimeout(() => { if (!isMuted) playBGM(); }, 200); }
\n }<\/p>\n
function updateAim() {
\n if (!isDragging) return;
\n const dx = white.x – dragX, dy = white.y – dragY;
\n let dist = Math.hypot(dx, dy);
\n if (dist < 1) return;
\n angle = Math.atan2(dy, dx);
\n const MIN_POWER = 0.2, MAX_POWER = 1.2, OPTIMAL_DIST = 180;
\n let rawPower = dist \/ OPTIMAL_DIST;
\n if (rawPower < 0.5) power = MIN_POWER + (rawPower\/0.5)*0.3;
\n else if (rawPower < 1.2) power = MIN_POWER + 0.3 + ((rawPower-0.5)\/0.7)*0.5;
\n else power = MIN_POWER + 0.8 + Math.min(rawPower-1.2,0.5)*0.4;
\n power = Math.max(MIN_POWER, Math.min(MAX_POWER, power));
\n let visualPower = Math.min(power, 1.0);
\n powerFill.style.width = (visualPower * 100) + '%';
\n }<\/p>\n
\/\/ —– enhanced aiming: cue stick & collision prediction —–
\n function predictCollision() {
\n const dirX = Math.cos(angle);
\n const dirY = Math.sin(angle);
\n const startX = white.x + dirX * BALL_RADIUS;
\n const startY = white.y + dirY * BALL_RADIUS;<\/p>\n
let closestHit = null;
\n let minDist = Infinity;<\/p>\n
for (let b of blackBalls) {
\n if (!b.active) continue;
\n const tx = b.x;
\n const ty = b.y;
\n const toTargetX = tx – startX;
\n const toTargetY = ty – startY;
\n const proj = toTargetX * dirX + toTargetY * dirY;
\n if (proj < 0) continue;
\n const closestX = startX + dirX * proj;
\n const closestY = startY + dirY * proj;
\n const perpDist = Math.hypot(tx – closestX, ty – closestY);
\n if (perpDist > BALL_RADIUS * 2) continue;
\n const hitDist = proj – Math.sqrt(Math.max(0, Math.pow(BALL_RADIUS * 2, 2) – perpDist * perpDist));
\n if (hitDist < 0) continue;
\n if (hitDist < minDist) {
\n minDist = hitDist;
\n closestHit = { hitX: startX + dirX * hitDist, hitY: startY + dirY * hitDist };
\n }
\n }
\n return closestHit;
\n }<\/p>\n
\/\/ —– draw with realistic cue animation —–
\n function draw() {
\n ctx.clearRect(0,0,CW,CH);
\n ctx.fillStyle='#1e5a3a'; ctx.fillRect(0,0,CW,CH);
\n ctx.strokeStyle='#dbb06b'; ctx.lineWidth=3; ctx.strokeRect(LEFT_WALL-2,TOP_WALL-2,RIGHT_WALL-LEFT_WALL+4,BOTTOM_WALL-TOP_WALL+4);
\n ctx.shadowColor='#00000080'; ctx.shadowBlur=10;
\n pockets.forEach(p=>{ ctx.beginPath(); ctx.arc(p.x,p.y,POCKET_RADIUS-4,0,Math.PI*2); ctx.fillStyle='#1f140e'; ctx.fill(); ctx.shadowBlur=5; ctx.fillStyle='#4a3c2b'; ctx.arc(p.x,p.y,POCKET_RADIUS-8,0,Math.PI*2); ctx.fill(); });
\n ctx.shadowBlur=0;
\n for (let b of blackBalls) if(b.active) {
\n ctx.shadowColor='#333'; ctx.shadowBlur=15; ctx.beginPath(); ctx.arc(b.x,b.y,BALL_RADIUS,0,Math.PI*2);
\n const grad=ctx.createRadialGradient(b.x-3,b.y-3,3,b.x,b.y,BALL_RADIUS+2); grad.addColorStop(0,'#222'); grad.addColorStop(0.7,'#000'); ctx.fillStyle=grad; ctx.fill();
\n ctx.shadowBlur=5; ctx.font='bold 16px "Segoe UI",Arial'; ctx.fillStyle='white'; ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillText('8',b.x,b.y);
\n ctx.beginPath(); ctx.arc(b.x-3,b.y-3,4,0,Math.PI*2); ctx.fillStyle='#fff9e6'; ctx.globalAlpha=0.3; ctx.fill(); ctx.globalAlpha=1;
\n }
\n if (!whiteRemoved) {
\n ctx.shadowColor='#ccc'; ctx.shadowBlur=18; ctx.beginPath(); ctx.arc(white.x,white.y,BALL_RADIUS,0,Math.PI*2);
\n const wgrad=ctx.createRadialGradient(white.x-4,white.y-4,4,white.x,white.y,BALL_RADIUS+2); wgrad.addColorStop(0,'#fafaf5'); wgrad.addColorStop(0.8,'#c0c0c0'); ctx.fillStyle=wgrad; ctx.fill();
\n ctx.shadowBlur=8; ctx.beginPath(); ctx.arc(white.x-1,white.y-1,5,0,Math.PI*2); ctx.fillStyle='#22222260'; ctx.fill();
\n }<\/p>\n
\/\/ Aiming guide & cue stick (only when white exists, not moving)
\n if (!whiteRemoved && isDragging && white.vx === 0 && white.vy === 0 && remainingBlacks > 0 && !gameOver) {
\n \/\/ draw power ring at drag position
\n let visualPower = Math.min(power, 1.0);
\n ctx.beginPath();
\n ctx.arc(dragX, dragY, 15 + visualPower * 20, 0, Math.PI * 2);
\n ctx.strokeStyle = 'rgba(255, 200, 0, 0.5)';
\n ctx.lineWidth = 3;
\n ctx.stroke();<\/p>\n
\/\/ dashed guide line from white through drag
\n ctx.setLineDash([8, 6]);
\n ctx.beginPath();
\n ctx.moveTo(white.x, white.y);
\n ctx.lineTo(white.x + Math.cos(angle) * 500, white.y + Math.sin(angle) * 500);
\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)';
\n ctx.stroke();
\n ctx.setLineDash([]);<\/p>\n
\/\/ Draw cue with spring animation
\n const cueLength = CUE_FIXED_LENGTH + cueOffset;
\n const backX = white.x – Math.cos(angle) * cueLength;
\n const backY = white.y – Math.sin(angle) * cueLength;<\/p>\n
\/\/ cue shaft with gradient for 3D effect
\n ctx.shadowBlur = 15;
\n ctx.shadowColor = '#222';
\n ctx.beginPath();
\n ctx.moveTo(backX, backY);
\n ctx.lineTo(white.x, white.y);<\/p>\n
\/\/ Create gradient along cue
\n const gradient = ctx.createLinearGradient(backX, backY, white.x, white.y);
\n gradient.addColorStop(0, '#8B5A2B');
\n gradient.addColorStop(0.5, '#B08D57');
\n gradient.addColorStop(1, '#D2B48C');
\n ctx.strokeStyle = gradient;
\n ctx.lineWidth = 12;
\n ctx.stroke();<\/p>\n
\/\/ Add cue wrap pattern
\n ctx.beginPath();
\n ctx.moveTo(backX + (white.x-backX)*0.3, backY + (white.y-backY)*0.3);
\n ctx.lineTo(backX + (white.x-backX)*0.35, backY + (white.y-backY)*0.35);
\n ctx.strokeStyle = '#654321';
\n ctx.lineWidth = 2;
\n ctx.stroke();<\/p>\n
\/\/ cue tip (ferrule)
\n ctx.beginPath();
\n ctx.arc(white.x + Math.cos(angle) * 4, white.y + Math.sin(angle) * 4, 5, 0, 2*Math.PI);
\n ctx.fillStyle = '#DEB887';
\n ctx.shadowBlur = 12;
\n ctx.fill();<\/p>\n
\/\/ white leather tip
\n ctx.beginPath();
\n ctx.arc(white.x + Math.cos(angle) * 8, white.y + Math.sin(angle) * 8, 3, 0, 2*Math.PI);
\n ctx.fillStyle = '#F5DEB3';
\n ctx.fill();<\/p>\n
\/\/ draw collision prediction marker
\n const hit = predictCollision();
\n if (hit) {
\n ctx.beginPath();
\n ctx.arc(hit.hitX, hit.hitY, 8, 0, Math.PI * 2);
\n ctx.fillStyle = '#FFD966';
\n ctx.shadowColor = 'black';
\n ctx.shadowBlur = 12;
\n ctx.fill();
\n }<\/p>\n
ctx.shadowBlur = 0;
\n ctx.setLineDash([]);
\n }<\/p>\n
drawParticles();
\n if (winFlag) {
\n ctx.fillStyle='rgba(0,0,0,0.3)'; ctx.fillRect(0,0,CW,CH);
\n ctx.shadowBlur=30; ctx.font='bold 52px "Segoe UI",Verdana'; ctx.fillStyle='#FFD966'; ctx.strokeStyle='#8B4513'; ctx.lineWidth=6; ctx.textAlign='center';
\n ctx.strokeText('🎉 VICTORY!',CW\/2,150); ctx.fillText('🎉 VICTORY!',CW\/2,150);
\n }
\n }<\/p>\n
\/\/ —– event listeners (same) —–
\n function getCanvasCoords(e) {
\n const rect = canvas.getBoundingClientRect();
\n const scaleX = canvas.width \/ rect.width, scaleY = canvas.height \/ rect.height;
\n let clientX, clientY;
\n if (e.touches) { clientX = e.touches[0].clientX; clientY = e.touches[0].clientY; }
\n else { clientX = e.clientX; clientY = e.clientY; }
\n return { x: (clientX – rect.left) * scaleX, y: (clientY – rect.top) * scaleY };
\n }
\n function onMouseDown(e){ e.preventDefault(); handleUserInteraction(); if(gameOver||whiteRemoved||white.vx!==0||white.vy!==0||remainingBlacks===0) return; const c=getCanvasCoords(e); dragX=c.x; dragY=c.y; isDragging=true; }
\n function onMouseMove(e){ e.preventDefault(); if(!isDragging) return; const c=getCanvasCoords(e); dragX=c.x; dragY=c.y; updateAim(); }
\n function onMouseUp(e){ e.preventDefault(); if(!isDragging) return; isDragging=false; shoot(); }
\n canvas.addEventListener('mousedown',onMouseDown);
\n canvas.addEventListener('mousemove',onMouseMove);
\n canvas.addEventListener('mouseup',onMouseUp);
\n canvas.addEventListener('touchstart',(e)=>{ e.preventDefault(); handleUserInteraction(); if(gameOver||whiteRemoved||white.vx!==0||white.vy!==0||remainingBlacks===0) return; const c=getCanvasCoords(e); dragX=c.x; dragY=c.y; isDragging=true; },{passive:false});
\n canvas.addEventListener('touchmove',(e)=>{ e.preventDefault(); if(!isDragging) return; const c=getCanvasCoords(e); dragX=c.x; dragY=c.y; updateAim(); },{passive:false});
\n canvas.addEventListener('touchend',(e)=>{ e.preventDefault(); if(!isDragging) return; isDragging=false; shoot(); });
\n window.addEventListener('mousemove',(e)=>{ if(isDragging){ const c=getCanvasCoords(e); dragX=c.x; dragY=c.y; updateAim(); } });
\n window.addEventListener('mouseup',(e)=>{ if(isDragging){ isDragging=false; shoot(); } });<\/p>\n
\/\/ Back \u6309\u9215：\u8fd4\u56de\u4e3b\u756b\u9762
\n backBtn.addEventListener('click', (e) => {
\n e.preventDefault();
\n handleUserInteraction();
\n goBackToSplash();
\n });<\/p>\n
\/\/ \u6ce8\u610f：\u539f\u672c\u7684 restartBtn \u5df2\u7d93\u79fb\u9664，\u6240\u4ee5\u6c92\u6709\u885d\u7a81
\n \/\/ nextBtn \u4fdd\u7559（\u4f46\u9810\u8a2d\u96b1\u85cf）
\n nextBtn.addEventListener('click', (e) => {
\n e.preventDefault();
\n handleUserInteraction();
\n resetGame(); \/\/ \u5982\u679c\u6709\u7684\u8a71，\u9084\u662f\u91cd\u7f6e\u7576\u524d\u6a21\u5f0f
\n });<\/p>\n
muteBtn.addEventListener('click', (e) => {
\n e.preventDefault();
\n handleUserInteraction();
\n toggleMute();
\n });<\/p>\n
againPlayBtn.addEventListener('click', (e) => {
\n e.preventDefault();
\n handleUserInteraction();
\n resetGame();
\n });<\/p>\n
document.addEventListener('touchend', (e) => {
\n const now = Date.now();
\n if (now – lastTouchEnd <= 300) e.preventDefault();
\n lastTouchEnd = now;
\n }, false);<\/p>\n
document.addEventListener('contextmenu', e => e.preventDefault());
\n document.body.addEventListener('touchmove', (e) => {
\n if (e.target === document.body) e.preventDefault();
\n }, { passive: false });<\/p>\n
\/\/ mode selection buttons
\n document.getElementById('practiceModeBtn').addEventListener('click', ()=>{
\n startGameWithMode('practice');
\n });
\n document.getElementById('challengeModeBtn').addEventListener('click', ()=>{
\n startGameWithMode('challenge');
\n });<\/p>\n
\/\/ initialization
\n initAudio();
\n setTimeout(() => {
\n loadingOverlay.style.opacity = '0';
\n setTimeout(() => {
\n loadingOverlay.style.display = 'none';
\n }, 500);
\n }, 1000);<\/p>\n
\/\/ \u78ba\u4fdd splash \u986f\u793a
\n splashScreen.style.display = 'flex';
\n splashScreen.style.opacity = '1';<\/p>\n
let lastTouchEnd = 0;
\n let victoryTimer = null;<\/p>\n
function animate() {
\n updatePhysics();
\n draw();
\n requestAnimationFrame(animate);
\n }
\n animate();
\n })();
\n<\/script>
\n<\/body>
\n<\/html> <\/p>\n","protected":false},"excerpt":{"rendered":"
Black 8 (Advanced)\u00a0— \u7ee7Black 8 Pro\u4e4b\u540e\u7ee7\u7eed\u6df1\u5ea6\u8bad\u7ec3\u7684\u4f5c\u54c1
\n\u4e3b\u8981\u529f\u80fd\u63d0\u5347：
\n\u589e\u5f3a\u4e86\u7403\u6746\u62c9\u5347\u52a8\u753b\u548c\u51fb\u7403\u97f3\u6548\u7b49，\u63d0\u5347\u6c89\u6d78\u5f0f\u4f53\u9a8c\u3002
\n\u589e\u52a0\u4e86\u6311\u6218\u6a21\u5f0f，\u5b9e\u73b0\u66f4\u591a\u73a9\u6cd5\u3002 <\/p>\n
<meta name\\"viewport\\" content\\"widthdevice-width, initial-scale1<\/p>\n","protected":false},"author":2,"featured_media":80454,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[573,964,187,248],"topic":[],"class_list":["post-80455","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-css","tag-html5","tag-javascript","tag-248"],"yoast_head":"\n