DuckHunt/index.html at main · HowDidIGitHere/DuckHunt · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Linked-In photo -->
    <meta property="og:title" content="DuckHunt"/>
    <meta property="og:image" content="https://howdidigithere.github.io/DuckHunt/duck_hunt_gif.gif"/>
    <meta property="og:description" content="A throwback to the 1980's NES. This is a simple game with a clear objective, shoot the ducks before they fly away, but make sure not to miss! You only have three shots every round."/>
    <meta property="og:url" content="https://howdidigithere.github.io/DuckHunt/"/>
    <meta name="author" content="Jamie An" />

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./dist/main.css" />
    <link rel="icon" href="duck_icon.png">
    <script src="./dist/main.js"></script>
    <title>Duck Hunt</title>
</head>


<body>
    <div id="instructionsModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h1>
                Instructions
            </h1>
            <ul>
                <li>Click all the ducks before the timer runs out!</li>
                <li>Don't be too hasty though! You only have 3 shots each round!</li>
                <li>Good Luck!</li>
            </ul>
        </div>
    </div>
    <div>
        <audio class="sounds" id="shot" src="./src/audio/gunshot.mp3" preload="auto"></audio>
        <audio class="sounds" id="quack" src="./src/audio/quack.mp3" muted="true" preload="auto"></audio>
        <audio class="sounds" id="duck-falls" src="./src/audio/duck_falls.mp3" preload="auto"></audio>
        <audio class="sounds" id="game-over" src="./src/audio/game_over.mp3" muted="true" preload="auto"></audio>
        <audio class="sounds" id="flap" src="./src/audio/flapping.mp3" muted="true" preload="auto"></audio>
        <audio class="sounds" id="title-screen-song" src="./src/audio/title_screen_music.mp3" muted="true" preload="auto"></audio>
        <audio class="sounds" id="start-game-song" src="./src/audio/start_game_music.mp3" muted="true" preload="auto"></audio>
    </div>
    <div class="boop">
        <div class="game-container">
            <div id="screen">
                <canvas id="gameboard"></canvas>
                <footer>
                    <div class="volume">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="volume-mute" class="mute svg-inline--fa fa-volume-mute fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                            <path class="mute" fill="currentColor" d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z"></path>
                        </svg>
                        <svg style="display: none;" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="volume-up" class="vol-up svg-inline--fa fa-volume-up fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                            <path class="vol-up" fill="currentColor" d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z"></path>
                        </svg>
                    </div>
                    <nav>
                        <div>
                            <button id="instructions">Instructions</button>
                        </div>
                        <a href="https://www.linkedin.com/in/jamie-an-6b9b41114/" target="_blank">
                            <img src="./src/images/linkedin_logo.png" alt="linkedin">
                        </a>
                        <a href="https://github.com/HowDidIGitHere" target="_blank">
                            <img src="./src/images/github_logo.png" alt="github">
                        </a>
                    </nav>
                </footer>
            </div>
            <!-- <div id="panel">
                <img src="./duck_hunt_logo.png" alt="Duck Hunt">
                <img src="./crt.png" alt="controls">
            </div> -->
        </div>
    </div>
</body>

</html>