JavaScript-Term-Project/checkers.html at main · dmitryanovikov/JavaScript-Term-Project · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Checkers</title>
        <link rel="stylesheet" href="css/checkers.css">
    </head>
    <body>
        <div id="gameContainer">

            <div id="gameInfo">
                <h2>Checkers</h2>
                <p>See <a href="readme/checkers.txt">checkers.txt</a> for more information.</p>
                <p class="description">
                    Checkers is a traditional board game played between two players.
                    Players move their pieces diagonally across the board and capture
                    opponent pieces by jumping over them. The goal is to capture all of
                    the opponent's pieces or block them so they cannot make any moves.
                </p>
                <p class="instructions">
                    Click a piece to select it, then click a square to move.
                </p>
            </div>

            <!-- Turn Indicator -->
            <p id="status">Red Player's Turn</p>

            <div id="boardWrapper">
                <!-- Game Board -->
                <canvas id="boardCanvas" width="400" height="400"></canvas>
            </div>

            <p id="winnerMessage"></p>

            <!-- Restart Button -->
            <button type="button" id="restartBtn">Restart Game</button>

            <!-- Scoreboard -->
            <div id="scoreboard">
                <p>Red Wins: <span id="redWins">0</span></p>
                <p>Black Wins: <span id="blackWins">0</span></p>
            </div>

            <!-- Navigation -->
            <a href="mainPage.html">Back to Game Menu</a>
        </div>
        <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
        <script src="js/checkers.js"></script>
    </body>
</html>