-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (134 loc) · 7.63 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
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>LaserDodge</title>
<link href="css/index.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="scripts/debug.js"></script>
<script src="scripts/timer.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/controls.js"></script>
<script src="scripts/menus.js"></script>
<script src="scripts/laserdodge.js"></script>
</head>
<body>
<div id="headline">
<h1>Laserdodge - Reloaded</h1>
</div>
<div id="debug"></div>
<svg id="playground" class="centered" viewBox="0 0 640 640">
<defs>
</defs>
<!--Background-->
<rect x="0" y="0" width="640" height="640" fill="Lavender"></rect>
<!--Mainmenu-->
<g id="mainMenu" visibility="visible">
<text x="320" y="80" text-anchor="middle" font-size="52">Laserdodge</text>
<!--Menubuttons-->
<g transform="translate(220,160)">
<g class="button menuButton btnStart">
<rect x="0" y="0" width="200" height="50" fill="currentColor"></rect>
<text x="100" y="35" text-anchor="middle" fill="black" font-size="27">Spiel Starten!</text>
</g>
<g id="btnMStartMP" class="button">
<rect x="0" y="75" width="200" height="50" fill="lightgrey"></rect>
<text x="100" y="110" text-anchor="middle" fill="black" font-size="27">Multiplayer</text>
</g>
<g id="btnIntro" class="button menuButton">
<rect x="0" y="150" width="200" height="50" fill="currentColor"></rect>
<text x="100" y="185" text-anchor="middle" fill="black" font-size="27">Einführung</text>
</g>
<g id="btnOptions" class="button menuButton">
<rect x="0" y="225" width="200" height="50" fill="currentColor"></rect>
<text x="100" y="260" text-anchor="middle" fill="black" font-size="27">Optionen</text>
</g>
</g>
</g>
<!--Introduction-->
<g id="welcomeScreen" visibility="hidden">
<text x="20" y="50" font-size="36">Einführung: </text>
<image xlink:href="img/player.png" x="52" y="90" width="24" height="24"></image>
<text x="120" y="90" font-size="20">Die Spielfigur </text>
<text x="120" y="120" font-size="20">Steuerung erfolgt mittels Pfeiltasten bzw. WASD </text>
<image xlink:href="img/laser.png" x="20" y="150" width="72" height="72"></image>
<text x="120" y="170" font-size="20">Der Laser </text>
<text x="120" y="200" font-size="20">Bei Kontakt mit dem Laser endet das Spiel!</text>
<image xlink:href="img/star.png" x="44" y="260" width="24" height="24"></image>
<text x="120" y="260" font-size="20">Ein Stern </text>
<text x="120" y="290" font-size="20">Sterne erhöhen deinen Punktestand</text>
<image xlink:href="img/mine.png" x="44" y="340" width="24" height="24"></image>
<text x="120" y="340" font-size="20">Eine Zielsuchmine </text>
<text x="120" y="370" font-size="20">Bei Kontakt erhöht sich die Geschwindigkeit des Lasers</text>
<image xlink:href="img/clock.png" x="44" y="420" width="24" height="24"></image>
<text x="120" y="420" font-size="20">Eine Uhr </text>
<text x="120" y="450" font-size="20">Bei Kontakt verringert sich die Geschwindigkeit des Lasers</text>
<g class ="button menuButton btnBack">
<rect x="20" y="550" width="200" height="50" fill="currentColor"></rect>
<text x="120" y="585" text-anchor="middle" font-size="27">Zurück</text>
</g>
</g>
<!--Gamefield-->
<g id="gameField" visibility="hidden">
<defs>
<image id="star" xlink:href="img/star.svg" fill="blue" width="24" height="24"></image>
<image id="mine" xlink:href="img/mine.png" width="24" height="24"></image>
<g id="clock">
<image xlink:href="img/nClock.png" width="24" height="24">
</image>
<rect width="6" height="2" fill="black" x="12" y="12">
</rect>
<rect width="2" height="10" fill="black" x="12" y="12">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 13 13" to="360 13 13" begin="0" dur="4s" repeatCount="indefinite"></animateTransform>
</rect>
</g>
</defs>
<rect class="laser" id="vertLaser" x="250" y="-5" width="4" height="650" fill="red"></rect>
<rect class="laser" id="horLaser" x="-5" y="250" width="650" height="4" fill="red"></rect>
<circle id="player" r="12" cx="0" cy="0"></circle>
<text id="score" x="630" y="30" fill="blue" text-anchor="end" font-family="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" font-size="32px">Score</text>
<text id="countdown" x="320" y="320" font-size="64px" text-anchor="middle" fill="red" stroke="black" stroke-width="2"></text>
</g>
<!--Optionsmenu-->
<g id="optionsMenu" visibility="hidden">
<text x="320" y="80" text-anchor="middle" font-size="52">Optionen</text>
<!--Menubuttons-->
<g transform="translate(100,160)">
<g id="cbOrient" class="button" data-checked="false">
<rect x="0" y="0" height="30" width="30" fill="lightgrey" stroke="black" stroke-width="3"></rect>
<image id="cbOrientChecked" x="-5" y="-5" height="40" width="40" xlink:href=""></image>
<text x="50" y="20" text-anchor="start" font-size="24">Schwenksteuerung</text>
</g>
<g class="button menuButton btnBack">
<rect x="0" y="300" width="200" height="50" fill="currentColor"></rect>
<text x="100" y="335" text-anchor="middle" font-size="27">Zurück</text>
</g>
</g>
</g>
<!--GameOver screen-->
<g id="gameOverScreen" visibility="hidden">
<rect x="80" y="80" width="480" height="480" fill="Lavender" stroke="black" stroke-width="2"></rect>
<text x="320" y="170" text-anchor="middle" font-size="75">Game Over</text>
<text id="gameOverScore" x="320" y="260" text-anchor="middle" font-size="27"></text>
<text x="320" y="330" text-anchor="middle" font-size="27">Mehr Glück beim nächsten mal!</text>
<g class="button menuButton btnStart">
<rect x="220" y="370" width="200" height="50" fill="currentColor"></rect>
<text x="320" y="405" text-anchor="middle" font-size="27">Neues Spiel!</text>
</g>
<g class="button menuButton btnBack">
<rect x="220" y="445" width="200" height="50" fill="currentColor"></rect>
<text x="320" y="480" text-anchor="middle" font-size="27">Hauptmenü</text>
</g>
</g>
<!--Fullscreen Icon-->
<g id="btnFscr" class="button">
<rect x="600" y="600" width="25" height="25" fill="none"></rect>
<image xlink:href="img/fullscreen.png" x="600" y="600" width="25" height="25" ></image>
</g>
</svg>
<div id="footer">
<small>© 2015 Kepplinger Harald</small>
</div>
</body>
</html>