Snake/index.html at master · Phansa/Snake · 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
<html>

	<head>
		<style>
			#snakeInterface{
				height: 400px;
				width: 400px;
				border: thick solid #0000FF;
				border-left-color: #0000FF;
				border-top-color: #0000FF;
				border-right-color: #0000FF;
				border-bottom-color: #0000FF;
				position: relative;
			}
			#snake{
				height: 12px;
				width: 12px;
				border: thick solid #008000;
				border-left-color: #008000;
				border-top-color: #008000;
				border-right-color: #008000;
				border-bottom-color: #008000;
				background-color: #008000;
				position: absolute;
				left: 200px;
				top: 200px;
			}
			#adversary{
				height: 12px;
				width: 12px;
				border: thick solid #0000FF;
				background-color: #0000FF;
				position: absolute;
				left: 200px;
				top: 180px;
			}
			input{
				width: 40px;
				display: block;
    			box-sizing: border-box;
    			margin-left: 138px;
			}
			span
			{
				margin-left: 138px;
				width:40 px;
			}
			button{
				margin-left: 138px;
			}
		</style>
		<script src="javascripts/soundcloudapi.js"> </script>
		<script src="javascripts/snake.js"> </script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
		</script>
		<title> Phansa's Bizzare Adventure </title>
	</head>
	<body id="mainBody" onload="generateAdversary()">
		<div id="snakeInterface" style="display: inline-block;">
			<div id="snake">
			</div>
		</div>
		<div style="display: inline-block; height: 400px;  position: absolute;">
			<img id="dio" src =""> </img>
			<br />
			<span id="gameText" style="margin-top: 300px; margin-left: 0px"> </span>
		</div>
 		<br />
		<span> Score </span> <input id="score" value="0" readonly> </input>
		<span> Hi-Score </span> <input id="hiscore" value="0" readonly> </input>
		<span> Timer </span> <input id="timer" value="0" readonly> </input>
		<br />
		<button type="button" onclick="processStart()">Start! </button>
		<br />
		<span style="margin-left: 120px;"> Disable Music </span>
		<input type="checkbox" id="musicDisable" onclick="toggleMusic()" checked> </input>
		<span style="margin-left: 50px;"> Music Style </span>
		<select id="musicStyle" onchange="generateSoundcloudPlayer()">
		  <option value="Stardust Crusaders">Stardust Crusaders</option>
		  <option value="Fighting Gold">Fighting Gold</option>
		  <option value="Kpop">Kpop</option>
		</select>
		<p>
			Use your arrow keys or W,A,S,D to move the green square and attack the blue square.
			<br />
			Try to get as high of a score as possible!
			<br />
			You can press Space to start the game.
			<br />
			The higher your score, the more damage you deal to your opponent!
			<br />
			You may want to turn your volume down before enabling music.
		</p>
		<audio id="sfx" style="display: none;">
			<source src="sounds/GenjiMadaMada.ogg" type="audio/mpeg">
		</audio>
	</body>


</html>