-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
37 lines (33 loc) · 2.82 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body style="background-color: black">
<h1 id="p1score">score: 0</h1>
<img id="trophyP1" src="goldTrophy.png" height="100px" width="100px">
<h1 id="p2score">score: 0</h1>
<img id="trophyP2" src="goldTrophy.png" height="100px" width="100px">
<button id="colorButtonP1" onclick="changeColor('1')" style="font-size: 200%">change color</button>
<button onclick="reset()" style="font-size: 200%">reset</button>
<input type="number" min="1" style="position: absolute; top: 45px; left: 47.5%; width: 5%" id="NumHits" onchange="localStorage.setItem('numhit', $('#NumHits').val());">
<button id="colorButtonP2" onclick="changeColor('2')" style="font-size: 200%">change color</button>
<div id="game_area" style="width: 100%; border: 2px solid cyan; position: fixed; bottom: 0">
<div id="player1" class="player"><p>score: 0</p><p>player1</p></div>
<div id="player2" class="player"><p>score: 0</p><p>player2</p></div>
<div id="block" class="block" style="background: gray; width: 100px; height: 100px; position: absolute; top: 200px; left: 400px;"></div>
<div id="block1" class="block" style="background: gray; width: 100px; height: 100px; position: absolute; top: 300px; left: 400px;"></div>
<div id="block2" class="block" style="background: gray; width: 100px; height: 100px; position: absolute; top: 400px; left: 400px;"></div>
<div id="block3" class="block" style="background: gray; width: 100px; height: 100px; position: absolute; top: 500px; left: 400px;"></div>
<div id="block4" class="block" style="background: gray; width: 100px; height: 100px; position: absolute; top: 600px; left: 400px;"></div>
<div id="block5" class="block" style="background: gray; width: 100px; height: 100px; position: absolute; top: 200px; left: 1400px;"></div>
<div id="block6" class="block" style="background: gray; width: 100px; height: 100px; position: absolute; top: 300px; left: 1400px;"></div>
<div id="block7" class="block" style="background: gray; width: 100px; height: 100px; position: absolute; top: 400px; left: 1400px;"></div>
<div id="block8" class="block" style="background: gray; width: 100px; height: 100px; position: absolute; top: 500px; left: 1400px;"></div>
<div id="block9" class="block" style="background: gray; width: 100px; height: 100px; position: absolute; top: 600px; left: 1400px;"></div>
</div>
</body>
</html>