Bird_Feeding/index.html at main · ankitraj5ar/Bird_Feeding · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style/style.css">
    <title>Bird Feeding</title>
</head>
<body>
    <section class="intro">
         <div class="game_rules">
            <div class="close">X</div>
            <div class="rules">
                <h1>Game Introduction</h1>
                <ol>
                    <li>You have to feed the birds to win</li>
                    <li>brid with crown has 2 points</li>
                    <li>you need 10 points to win</li>
                    <li>on score meter you can see your score</li>
                </ol>
            </div>
            <div class="done">Done</div>
         </div>
    </section>
    <section class="bg gone">
        <div class="worm-box">
            <div style = "width:5%" class="worm-container">
                <img src="/image/worm.png" class ="worm" alt="leaderboard">
            </div>
        </div>
        <div class="hole-container">
            <div class="hole" id="hole-0">
                <img src="./image/king-mole-hungry.png" data-index="0" class="mole" alt="mole">
            </div>
        </div>
        <div class="hole-container">
            <div class="hole" id="hole-1">
                <img src="./image/king-mole-sad.png" data-index="1" class="mole" alt="mole">
            </div>
        </div>
        <div class="hole-container">
            <div class="hole" id="hole-2">
                <img src="./image/king-mole-hungry.png" data-index="2" class="mole" alt="mole">
            </div>
        </div>
        <div class="hole-container">
            <div class="hole" id="hole-3">
                <img src="./image/king-mole-sad.png" data-index="3" class="mole" alt="mole">
            </div>
        </div>
        <div class="hole-container">
            <div class="hole" id="hole-4">
                <img src="./image/king-mole-leaving.png" data-index="4" class="mole" alt="mole">
            </div>
        </div>
        <div class="hole-container">
            <div class="hole" id="hole-5">
                <img src="./image/mole-hungry.png" data-index="5" class="mole" alt="mole">
            </div>
        </div>
        <div class="hole-container">
            <div class="hole" id="hole-6">
                <img src="./image/mole-sad.png" data-index="6" class="mole" alt="mole">
            </div>
        </div>
        <div class="hole-container">
            <div class="hole" id="hole-7">
                <img src="./image/mole-sad.png" data-index="7" class="mole" alt="mole">
            </div>
        </div>
    </section>
    <img src="./image/win.png" class = "jeet win gone" alt="win">
    <audio id="audio">
        <source src="./music/gamesound.mp3"/>
    </audio>
    <script src="./javascript/script.js"></script>

</body>
</html>