-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcanvas.html
82 lines (78 loc) · 4.3 KB
/
canvas.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="general.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
<script src="Snake.js"></script>
<script src="interface.js"></script>
</head>
<body onload="init();" style="background-color:black">
<div id="gameInterface" class="gameInterfaceWrapper" style="display: none">
<canvas id="canvas" width="400" height="400" style="display: inline; color: white" onclick="restartGameIfOver()"></canvas>
<div id="scores" class="scoresWrapper">
<div id="p1Score" class="scoreBox">
<div id="p1ScoreName">Player1</div>
<br />
<div id="p1ScoreValue" class="scoreValue">100</div>
</div>
<div id="p2Score" class="scoreBox">
<div id="p2ScoreName">Player1</div>
<br />
<div id="p2ScoreValue" class="scoreValue">100</div>
</div>
<div id="p3Score" class="scoreBox">
<div id="p3ScoreName">Player1</div>
<br />
<div id="p3ScoreValue" class="scoreValue">100</div>
</div>
</div>
</div>
<div id="playerSelect" class="playerSelectBox" style=" display: inline">
<div id="p1Wrapper" class="playerWrapper">
<div id="p1" class="selecterOn" ></div>
<input type="text" id="p1Name" class="playerNameInput" placeholder="Player1">
<div id="p1Color" class="colorPicker">
<div id="p1c1" class="selectedColor" style="background-color: #000000" onClick="selectColor"></div>
<div id="p1c2" class="colorBlock hidden" style="background-color: #00A1CB"></div>
<div id="p1c3" class="colorBlock hidden" style="background-color: #D0D102"></div>
<div id="p1c4" class="colorBlock" style="background-color: #32742C"></div>
<div id="p1c5" class="colorBlock" style="background-color: #D70060"></div>
<div id="p1c6" class="colorBlock" style="background-color: #F18D05"></div>
<div id="p1c7" class="colorBlock" style="background-color: #61AE24"></div>
<div id="p1c8" class="colorBlock" style="background-color: #E54028"></div>
</div>
</div>
<div id="p1Wrapper" class="playerWrapper">
<div id="p2" class="selecterOn"></div>
<input type="text" id="p2Name" class="playerNameInput" placeholder="Player2">
<div id="p2Color" class="colorPicker">
<div id="p2c1" class="colorBlock hidden" style="background-color: #000000"></div>
<div id="p2c2" class="selectedColor" style="background-color: #00A1CB"></div>
<div id="p2c3" class="colorBlock hidden" style="background-color: #D0D102"></div>
<div id="p2c4" class="colorBlock" style="background-color: #32742C"></div>
<div id="p2c5" class="colorBlock" style="background-color: #D70060"></div>
<div id="p2c6" class="colorBlock" style="background-color: #F18D05"></div>
<div id="p2c7" class="colorBlock" style="background-color: #61AE24"></div>
<div id="p2c8" class="colorBlock" style="background-color: #E54028"></div>
</div>
</div>
<div id="p1Wrapper" class="playerWrapper">
<div id="p3" class="selecterOff" onClick="toggleSelecter('p3')"></div>
<input type="text" id="p3Name" class="playerNameInput" placeholder="Player3">
<div id="p3Color" class="colorPicker">
<div id="p3c1" class="colorBlock hidden" style="background-color: #000000"></div>
<div id="p3c2" class="colorBlock hidden" style="background-color: #00A1CB"></div>
<div id="p3c3" class="selectedColor" style="background-color: #D0D102"></div>
<div id="p3c4" class="colorBlock" style="background-color: #32742C"></div>
<div id="p3c5" class="colorBlock" style="background-color: #D70060"></div>
<div id="p3c6" class="colorBlock" style="background-color: #F18D05"></div>
<div id="p3c7" class="colorBlock" style="background-color: #61AE24"></div>
<div id="p3c8" class="colorBlock" style="background-color: #E54028"></div>
</div>
</div>
<br />
<div id="startButton" class="buttonDiv" onClick="start()">Start game!</div>
</div>
</body>
</html>