Initial Commit

MerGatto · Feb 11, 2016 · 103c925 · 103c925
1 parent 9ad5860
commit 103c925
Show file tree

Hide file tree

Showing 15 changed files with 1,210 additions and 0 deletions.
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,157 @@
+html {
+    background-image: url("../img/background.jpg");
+    background-size: cover;
+
+}
+
+body {
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    overflow: hidden;
+}
+
+#headline {
+    width: 120vw;
+    padding: 10px;
+    margin-left: -10vw;
+    margin-top: -10px;
+    text-align: center;
+    vertical-align: middle;
+    color: darkblue;
+    background-color: lavender;
+    border-bottom: black 2px solid;
+}
+
+#headline h1 {
+    margin: 0 auto;
+    top: 0;
+    bottom: 0;
+    vertical-align: middle;
+    text-align: center;
+}
+
+#footer {
+    position: absolute;
+    clear:left;
+    width: 120vw;
+    height: 20px;
+    margin-left: -10vw;
+    padding:10px;
+    background-color: lavender;
+    bottom: 0;
+    text-align: left;
+    border-top: black 2px solid;
+}
+
+#footer small {
+    margin-left: 10vw;
+}
+
+.centered {
+    position: absolute;
+    top: 80px;
+    left: 0;
+    right: 0;
+	width: 80vh;
+    height: 80vh;
+    margin: 0 auto;
+    display: block;
+    border: 1px solid black;
+}
+
+#playground:-webkit-full-screen {
+    top: 0;
+    width:100vh;
+    height: 100vh;
+}
+
+#playground:-moz-full-screen {
+    top: 0;
+    width:100vh;
+    height: 100vh;
+}
+
+#playground:-ms-fullscreen {
+    top: 0;
+    width:100vh;
+    height: 100vh;
+}
+
+#playground:fullscreen {
+    top: 0;
+    width:100vh;
+    height: 100vh;
+}
+
+
+.btnStart:hover {
+    cursor:pointer;
+}
+
+.btnStart:hover > rect {
+    fill: DeepSkyBlue;
+}
+
+#btnFscr:hover {
+    cursor: pointer;
+}
+
+#cbOrient:hover {
+    cursor: pointer;
+}
+
+#btnFscr:hover > rect {
+    fill: gray;
+}
+
+
+#debug {
+    position: fixed;
+    float: left;
+    width: 25%;
+}
+
+@media all and (orientation:portrait) {
+    .centered {
+	    width: 80vw;
+        height: 80vw;
+    }
+
+
+    #playground:-webkit-full-screen {
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        width:100vw;
+        height: 100vw;
+    }
+
+    #playground:-moz-full-screen {
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        width:100vw;
+        height: 100vw;
+    }
+
+    #playground:-ms-fullscreen {
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        width:100vw;
+        height: 100vw;
+    }
+
+    #playground:fullscreen {
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        width:100vw;
+        height: 100vw;
+    }
+}
+
+@media all and (orientation:landscape) and  (max-height: 500px) {
+    #footer {
+        visibility: hidden;
+    }
+}
diff --git a/img/background.jpg b/img/background.jpg
diff --git a/img/clock.png b/img/clock.png
diff --git a/img/cross.png b/img/cross.png
diff --git a/img/fullscreen.png b/img/fullscreen.png
diff --git a/img/laser.png b/img/laser.png
diff --git a/img/mine.png b/img/mine.png
diff --git a/img/nClock.png b/img/nClock.png
diff --git a/img/player.png b/img/player.png
diff --git a/img/star.png b/img/star.png
diff --git a/index.html b/index.html
@@ -0,0 +1,97 @@
+<!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/timer.js"></script>	
+    <script src="scripts/config.js"></script>
+	<script src="scripts/controls.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">
+        <rect x="0" y="0" width="640" height="640" fill="Lavender"></rect>
+        <g id="welcomeScreen" visibility="visible">
+            <text x="20" y="50" font-size="36">Einführung: </text>
+            <image xlink:href="img/player.png" x="44" 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="btnStart">
+                <rect x="20" y="550" width="200" height="50" fill="LightSkyBlue"></rect>
+                <text x="120" y="585" text-anchor="middle" font-size="27">Spiel starten!</text>
+            </g>
+            <g id="cbOrient">
+                <rect x="330" y="560" height="30" width="30" fill="lightgrey" stroke="black" stroke-width="3"></rect>
+                <image id="cbOrientChecked" x="325" y="555" height="40" width="40" xlink:href="img/cross.png" visibility="visible"></image>
+                <text x="380" y="580" text-anchor="start" font-size="24">Schwenksteuerung</text>
+            </g>
+        </g>
+        <g id="gameField" visibility="hidden">
+            <defs>
+                <image id="star" xlink:href="img/star.png" 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>
+
+        <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="340" text-anchor="middle" font-size="27">Mehr Glück beim nächsten mal!</text>
+            <g class="btnStart">
+                <rect x="220" y="420" width="200" height="50" fill="LightSkyBlue"></rect>
+                <text x="320" y="455" text-anchor="middle" font-size="27">Neues Spiel!</text>
+            </g>
+        </g>
+        <g id="btnFscr">
+            <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>
diff --git a/scripts/config.js b/scripts/config.js
@@ -0,0 +1,51 @@
+//Debugmodus
+var debug = true;
+
+//Gamespeed in FPS
+var GAMESPEED = 125;
+
+//Benutze Schwenksteuerung(noch nicht verfügbar)
+var useDevOr = false;
+
+//Orientation Schwenktoleranz
+var orTolerance = 5;
+
+//Benutzes ein Gamepad(wenn verfügbar)
+var useGP = true;
+//Gamepad StickToleranz
+var gpTolerance = 0.3;
+
+//Countdown bis zum Start(sek)
+var countdown = 3;
+
+//Spawntimer für die Uhr(ms)
+var clockSpawntime = 6000;
+var clockDespawntime = 4000;
+
+//Verlangsamung des Lasers durch die Uhr
+var clockBonus = 0.8;
+
+//Spawntimer für die Mine(ms)
+var mineSpawntime = 5000;
+var mineDespawntime = 1750;
+
+//Geschwindigkeit der Mine(px/frame)
+var minespeed = 2.5;
+
+//Geschwindigkeitserhöhung des Lasers durch die Mine
+var minePenalty = 1.3;
+
+//Maximale Spielergeschwindigkeit(px/frame)
+var playerMaxSpeed = 4.5;
+//Spielerbeschleunigung(px/frame²)
+var playerAcc = 0.06;
+//Spielerbremswirkung(px/frame²)
+var playerBrk = 0.05;
+
+//Startgeschwindigkeit des Lasers
+var laserStartSpeed = 1;
+
+//Min und Maximale Veränderung des Lasers beim Aufprall an der Wand
+//Angaben in Prozent
+var minLaserChange = -5;
+var maxLaserChange = 15;