blasterGame/index.html at master · linxiaow/blasterGame · 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Div Blaster</title>
	<!-- JS -->
	<script type="text/javascript" src='scripts/jquery.min.js'></script>
	<script type="text/javascript" src='scripts/page.js'></script>

	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<!-- HTML -->
<body>
  <audio id='intro' loop>
    <source src="audio/intro.mp3" type="audio/mp3">
  </audio>
  <audio id='explode'>
      <source src="audio/explode.wav" type="audio/wav">
  </audio>
  <audio id='over'>
    <source src="audio/gameover.wav" type="audio/wav">
  </audio>
  <audio id='rocket'>
    <source src="audio/rocket.wav" type="audio/wav">
  </audio>
  <audio id='background' loop>
      <source src="audio/background2.wav" type="audio/wav">
  </audio>
  <!--https://freesound.org/people/joshuaempyre/sounds/251461/-->

  <audio id='transition'>
      <source src="audio/transition4.flac" type="audio/flac">
  </audio>
  <!--https://freesound.org/people/soneproject/sounds/346425/ -->

  <div class='outer-container'>
    <div class='game-window'>
      <div id='health'>
        <div id='heart-1'>
          <img src='img/heart.png' height='20px'/> <!--heart img: src='https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d'-->
        </div>
        <div id='heart-2'>
          <img src='img/heart.png' height='20px'/> <!--ship img: src='http://i.stack.imgur.com/rsH6n.png'-->
        </div>
      </div>

      <div id='splash'>
        <h1>Blaster Game</h1>
        <h3>Created by Linxiao Wu</h3>
        <br><br>
        <p>Space: Fire a Rocket</p>
        <p>Arrow Key(← ↑ → ↓): Move the ship</p>
        <br>
        <button id='game-start'>Start Blaster Game</button>
      </div>

      <div id='level-up'>
        <h1>Enter Level</h1>
        <h1 id="level">1</h1>
      </div>

      <div id='enterprise' class='ship'>
        <img class='ship-avatar' id='ship-primary' src='img/fighter.png' height='50px'/> <!--ship img: src='http://i.stack.imgur.com/rsH6n.png'-->

        <img id='explosion' src='img/explosion.png'/> <!--ship img: src='http://i.stack.imgur.com/rsH6n.png'-->

        <div id='shield_wear'>
          <img src='img/shield.png' height='65px'/>
        </div>

        <!--
        <img class='ship-avatar' id='ship-dual' src='img/fighter.png' height='50px'/>

        <div id='shield-dual'>
          <img src='img/shield.png' height='65px'/>
        </div>
        -->

      </div>

      <div class='game-over' style="display: none;">
        <h1>GAME OVER!</h1>
        <h3 id='final-score'>Your Score is: 0 points</h3>
        <br><br>
        <button id='go-back'>Go Back</button>
      </div>
    </div>

    <div class='status-window' style='text-align: center'>
      <h3>Welcome!</h3>
      <hr>
      <br>
      <p>score:</p>
      <h1 id='score-box'>0</h1>
      <br>
      <p>rate:</p>
      <h1 id='acc-box'>0%</h1>
      <button id='set-panel'>Open Setting Panel</button>
      <form id='set-box'>
        <p>Asteroid Spawning Rate<br>
          (# of asteroid per second)
          <br>
        <input id='spawn' type='text' name='spawn' value=1 placeholder="Min: 0.2 Max: 4">
        <br>
        Mute Audio
        <input id='audio' type="checkbox" name="sound" checked>
        <br>
        <input type='submit' value='UPDATE'>
      </form>
    </div>
  </div>
</body>

</html>