added startscreen, websockets not tested. Game restarts

jdbosser · Jan 13, 2015 · c157cf5 · c157cf5
1 parent 96cb3e6
commit c157cf5
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 35 deletions.
diff --git a/game.js b/game.js
@@ -2,23 +2,19 @@
 var backgroundColor = "#000000";
 var elementColor = "#FFFFFF";
 var initialBallSpeed = 10; //How many px should we move per frame?
-var randomV = Math.random() * (Math.PI/2) - Math.PI/4;
+var randomV = null;
 
-var initialBallK = Math.tan(randomV);
+var initialBallK = null;
 
-var canvas = document.getElementById("arena");
+var canvas = null;
 var height = window.innerHeight;
 var width = window.innerWidth;
 
 //canvas.style.backgroundColor = "#000000";
 document.getElementsByName("body").height = height;
-canvas.height = height;
-canvas.width = width;
 
-var ctx = canvas.getContext("2d");
 
-//Draw backgroucanvasDrawerctx.fillStyle = backgroundColor;
-ctx.fillRect(0,0,canvas.width, canvas.height);
+var ctx = null;
 
 var Ball = function(height, width, startX, startY, boundX, boundY){
     this.color = elementColor;
@@ -197,29 +193,49 @@ Platform.prototype.checkHitWithBall = function(ball){
     var largest = Math.max(x, oldX);
 }
 
-var start = null;
-var ball = new Ball(10, 10, width/2 - 5, height/2-5, canvas.width, canvas.height);
+var ball = null;
+var platformR = null;
+var platformL = null;
+var platforms = null;
+var running = false;
 
-var platformR = new Platform(
-    100,             // Height
-    10,             // Width
-    canvas.width - 40,             // StartX: 30px from right edge of canvas
-    height/2 - 50,    // Start in the middle on y-axis
-    canvas.height   // Only let it move so that we don't go outside of canvas
-);
+var init = function(){
+    randomV = Math.random() * (Math.PI/2) - Math.PI/4;
+    initialBallK = Math.tan(randomV);
+
+
+    canvas = document.getElementById("arena");
+    canvas.height = height;
+    canvas.width = width;
+    ctx = canvas.getContext("2d");
+    //Draw backgroucanvasDrawerctx.fillStyle = backgroundColor;
+    ctx.fillRect(0,0,canvas.width, canvas.height);
+
+    var start = null;
+    ball = new Ball(10, 10, width/2 - 5, height/2-5, canvas.width, canvas.height);
+    ball.k = initialBallK;
+
+    platformR = new Platform(
+        100,             // Height
+        10,             // Width
+        canvas.width - 40,             // StartX: 30px from right edge of canvas
+        height/2 - 50,    // Start in the middle on y-axis
+        canvas.height   // Only let it move so that we don't go outside of canvas
+    );
 
-var platformL = new Platform(
-    100,                 // Height
-    10,                 // Width
-    30,  // StartX: 30px (becomes 40px, because we need to count in the width of the platform) from left edge of canvas
-    height/2-50,        // Start in the middle on y-axis
-    canvas.height       // Only let it move so that we don't go outside of canvas)
-);
+    platformL = new Platform(
+        100,                 // Height
+        10,                 // Width
+        30,  // StartX: 30px (becomes 40px, because we need to count in the width of the platform) from left edge of canvas
+        height/2-50,        // Start in the middle on y-axis
+        canvas.height       // Only let it move so that we don't go outside of canvas)
+    );
 
-var platforms = [platformR, platformL];
-platformR.setVelocity(0);
-platformL.setVelocity(0);
-var running = true;
+    platforms = [platformR, platformL];
+    platformR.setVelocity(0);
+    platformL.setVelocity(0);
+    running = true;
+}
 var step = function(timestamp){
     for(var i = 0; i < platforms.length; i++){
         platforms[i].move();
@@ -272,18 +288,26 @@ var step = function(timestamp){
     ball.draw(ctx);
 
 
-    //Very advanced system for detection of winner. Please be careful when you
-    //uncomment this. It could lead to a broken toe, or worse, a 
-    //pinple on your elbow. Please uncomment with cuation. 
+    // Very advanced system for detection of winner. Please be careful when you
+    // uncomment this. It could lead to a broken toe, or worse, a 
+    // pinple on your elbow. Please uncomment with cuation. 
+
+
 
     if(ball.centerX <= 0){
         alert("alliansen vann!")
         running = false;
+        init();
     }
     if(ball.centerX >= ball.boundX){
         alert("Lefty vann!");
         running = false;
+        init();
     }
     if(running) window.requestAnimationFrame(step);
 };
-window.requestAnimationFrame(step);
+
+var startGame = function(){
+    init();
+    window.requestAnimationFrame(step);
+}
diff --git a/gamestarter.js b/gamestarter.js
@@ -0,0 +1,76 @@
+// First, some settings:
+
+var port = 1337;
+var portP1 = 1338;
+var portP2 = 1339;
+var ip = "192.168.0.254";
+var WS_START = "ws://";
+var connectMsg = "connected";
+
+var onOpenLogM = "Connected to " + WS_START + ip + ":" + port;
+
+var NUM_CONNECTED = 0;
+
+
+
+var startBtn = document.getElementById("startBtn");
+var p1Text = document.getElementById("p1");
+var p2Text = document.getElementById("p2");
+var littleConsole = document.getElementById("littleConsole");
+var everything = document.getElementById("background");
+
+var startGameFunction = function(){
+    document.getElementById("body").removeChild(everything);
+    var canvas = document.createElement("canvas");
+    canvas.setAttribute("id", "arena");
+    document.getElementById("body").appendChild(canvas);
+    startGame();
+}
+
+var checkIfPlayable = function(){
+    if(NUM_CONNECTED == 3){
+        startBtn.style.opacity = 1;
+        startBtn.style.cursor = "pointer";
+        startBtn.onclick = startGameFunction();
+    }
+}
+startBtn.onclick=function(){
+    startGameFunction();
+}
+
+var ws = new WebSocket(WS_START + ip + ":" + port);
+ws.addEventListener("open", function(event){
+    NUM_CONNECTED++
+    startBtn.style.opacity = 1;
+});
+
+ws.addEventListener("message", function(event){
+    if(event.message == portP1 + " " + connectMessage){
+        p1Text.innerHTML = "P1 Connected!";
+        NUM_CONNECTED++;
+        checkIfPlayable();
+    }
+    else if(event.message == portP2 + " " + connectMessage){
+        p2Text.innerHTML = "P2 Connected!";
+        NUM_CONNECTED++;
+        checkIfPlayable();
+    }
+    else if(/\d{4} \d{0,}[.]\d{0,}/.test(event.message)){
+        // First get first four digits
+        var inPort = /\d{4}/.match(event.message);
+        var angle = event.message.substring((inPort + " ").length);
+
+        var speedRad = 20/(Math.PI/2);
+
+        var speed = angle * speedRad;
+
+        switch(inPort){
+            case (portP1):
+                platformL.setVelocity(speed);
+                break;
+            case (portP2):
+                platformR.setVelocity(speed);
+                break;
+        }
+    }
+});
diff --git a/index.html b/index.html
@@ -5,10 +5,27 @@
         <meta charset="utf-8">
         <title>PONG!!</title>
     </head>
-    <body>
-        <canvas id="arena"></canvas>
-        <p id="test"></p>
+    <body id="body">
+        <!--<canvas id="arena"></canvas>-->
+        <div id="background" style="height:100%;width:100%;background:black;">
+            <span class="logo">PONG</span>
+            <br>
+
+            <div class="qrHolder">
+                <div id="qr1" class="qrCode"></div><br>
+                <span id="p1">Spelare 1</span>
+            </div>
+
+            <div class="qrHolder">
+                <div id="qr2" class="qrCode"></div><br>
+                <span id="p2">Spelare 2</span>
+            </div>
+            <p id="littleConsole">Connecting to websocket...</p>
+            <span id="notes">Gjord av aka.Proxy.<br><u>Github</u></span>
+            <div id="startBtn">STARTA</div>
+        </div>
         <script type="text/javascript" src="game.js"></script>
         <script type="text/javascript" src="keymaster.js"></script>
+        <script type="text/javascript" src="gamestarter.js"></script>
     </body>
 </html>
diff --git a/slkscr.ttf b/slkscr.ttf
diff --git a/style.css b/style.css
@@ -1,8 +1,17 @@
+@font-face{
+    font-family: "8bit";
+    src: url(slkscr.ttf);
+}
 html, body {
     padding: 0;
     margin: 0;
     overflow: hidden;
     height: 100%;
+    font-family: "8bit";
+    color:white;
+}
+body{
+    min-height: 100%;
 }
 
 #arena {
@@ -11,4 +20,60 @@ html, body {
     background: blue;
     width: 50px;
     position: relative;
+}
+#background {
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    vertical-align: middle;
+    text-align: center;
+}
+#background > h1 {
+    font-family: "8bit";
+    margin: 0;
+    font-size: 10em; 
+    text-align: center;
+}
+.logo {
+    display: inline-block;
+    margin-top: 1em;
+    color:white;
+    font-family: "8bit";
+    font-size: 10em;   
+    vertical-align: bottom;
+}
+.qrCode {
+    height: 10em;
+    width: 10em;
+    margin: 30px;
+    display: inline-block;
+    background: white;
+    color:white;
+}
+.qrHolder > span {
+    color: white;
+    font-family: "8bit";
+}
+.qrHolder {
+    text-align: center;
+    display: inline-block;
+}
+#littleConsole {
+    padding-top: 3em;
+}
+#notes {
+    display: inline-block;
+    text-align: right;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    padding: 1em;
+    cursor:pointer;
+}
+#startBtn {
+    border: 0.3em solid white;
+    display: inline-block;
+    margin-top: 3em;
+    padding: 1em;
+    opacity: 0.1;
 }