word-connection/game.php at main · randompaga/word-connection · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Word Connect - Level <?php echo isset($_GET['level']) ? intval($_GET['level']) : 1; ?></title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/game.css">
</head>
<body>
    <div class="header">
        <a href="index.php" class="back-btn">
            <span>←</span> Back
        </a>
        <div class="level-info">
            <h1>Level <span id="levelNum"><?php echo isset($_GET['level']) ? intval($_GET['level']) : 1; ?></span></h1>
            <p id="levelDifficulty">Easy</p>
        </div>
        <button class="hint-btn" onclick="useHint()">
            <span>💡</span>
            <span class="hint-count" id="hintCount">3</span>
        </button>
    </div>

    <div class="game-container">
        <div class="words-area">
            <div class="words-grid" id="wordsGrid"></div>
        </div>

        <div class="bonus-area">
            <div class="bonus-label">Bonus Words</div>
            <div class="bonus-words" id="bonusCount">0 / ?</div>
        </div>

        <div class="current-word">
            <div class="current-word-text" id="currentWord"></div>
        </div>

        <div class="wheel-area">
            <div class="letter-wheel" id="letterWheel">
                <div class="wheel-bg"></div>
                <canvas class="line-canvas" id="lineCanvas"></canvas>
            </div>
        </div>

        <div class="action-buttons">
            <button class="action-btn shuffle" onclick="shuffleLetters()">🔀 Shuffle</button>
            <button class="action-btn submit" onclick="submitWord()">✓ Submit</button>
            <button class="action-btn" onclick="clearSelection()">✕ Clear</button>
        </div>
    </div>

    <!-- 成功弹窗 -->
    <div class="success-modal" id="successModal">
        <div class="success-content">
            <div class="success-icon">🎉</div>
            <div class="success-title">Congratulations!</div>
            <div class="success-subtitle">You completed Level <span id="completedLevel">1</span></div>
            <div class="success-stats">
                <div class="success-stat">
                    <div class="success-stat-value" id="foundWordsCount">0</div>
                    <div class="success-stat-label">Words Found</div>
                </div>
                <div class="success-stat">
                    <div class="success-stat-value" id="bonusWordsCount">0</div>
                    <div class="success-stat-label">Bonus Words</div>
                </div>
            </div>
            <button class="success-btn" onclick="nextLevel()">Next Level →</button>
            <button class="success-btn secondary" onclick="goHome()">Home</button>
        </div>
    </div>

    <!-- 消息提示 -->
    <div class="toast" id="toast"></div>

    <script src="js/words.js"></script>
    <script src="js/levels.js"></script>
    <script src="js/game.js"></script>
</body>
</html>