gameProject/rules.html at main · Daniel1000c/gameProject · 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
<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/x-icon" href="favicon/favicon.ico"><!--Insert Favicon Logo-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"><!--Add Bootstrap css link-->
        <link rel="stylesheet" href="css/style.css">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script><!--Add bootstrap js-->
        <title>Rules</title>
    </head>
    <body>
        <div id="webcontainer">
            <header>
                <h1>Game Rules</h1>
            </header>
            <main>
                <!--Create Rules Container-->
                <div class="rulesContainer">

                    <!--Create ordered list-->
                    <ol>
                        <li>
                            <span class="listHeading">Goal:</span>
                            <ul>
                                <li>Move the snake to eat as many apples as you can, without touching the walls or the snake itself with any part of the snake.</li>
                            </ul>
                        </li>
                        <li>
                            <span class="listHeading">Navigation Setup:</span>
                            <ul>
                                <li>Use the arrow keys to nagivate around the playing field.</li>
                                <li>Use the up arrow key to move to the top of the board.</li>
                                <li>Use the bottom arrow key to move to the top of the board.</li>
                                <li>Use the left arrow key to move to the left of the board.</li>
                                <li>Use the right arrow key to move to the right of the board.</li>
                            </ul>
                        </li>
                        <li>
                            <span class="listHeading">Rules:</span>
                            <ul>
                                <li>Each time you eat a apple, the snake will get longer.</li>
                                <li>Strategically move the snake to the direction of the apple you want it to eat.</li>
                                <li>Make sure you do not have it touch the walls of the playing field, and do not have it run into itself either.</li>
                            </ul>
                        </li>
                        <li>
                            <span class="listHeading">Hint:</span>
                            <ul>
                                <li>As your snake gets longer, utilize moving in tight turns to avoid hitting the walls and making precise movements. Be careful not to wrap it around itself too tightly or you will risk running into part of the snake.</li>
                            </ul>
                        </li>
                        <li>
                            <span class="listHeading">Winning:</span>
                            <ul>
                                <li>Each time you play, try to beat your last score in order to rank #1 on the leaderboard.</li>
                            </ul>
                        </li>
                        <li>
                            <span class="listHeading">Losing:</span>
                            <ul>
                                <li>If you can&apos;t make any more moves and you hit the wall, or the snake itself, the game is over.</li>
                            </ul>
                        </li>

                            <span class="listHeading">GOOD LUCK!</span>

                    </ol>
                </div>

                <!--Create buttons container-->
                <div class="btnContainer">

                    <!--Home Button-->
                    <a href="index.html">Home</a>

                    <!--Leaderboard Button-->
                    <a href="leaderboard.html">Score</a>
                </div>
            </main>
            <footer>
                &copy; 2025 Snake
            </footer>
        </div>
    </body>
</html>