„README.md“ ändern

Output/BoardServer.js

@@ -19,8 +19,7 @@ Board.events = {
     GAME_READY: 'gameReady',
     CUP_MARKED: 'cupMarked',
     CHANGE_TURN: 'changeTurn',
-    WINNER: 'winner',
-    DRAW: 'draw'
+    WINNER: 'winner'
 };
 
 util.inherits(Board, EventEmitter);
@@ -67,9 +66,7 @@ Board.prototype.mark = function(cupId) {
         var res = this.checkWinner();
         if (res.win) {
             this.disableAll();
-            this.emit(Board.events.WINNER, {player: this.players[this.currentTurn], pos: res.pos});
-        } else if (this.checkDraw()) {
-            this.emit(Board.events.DRAW, {});
+            this.emit(Board.events.WINNER, {player: this.players[this.currentTurn]});
         } else {
             this.currentTurn = (this.currentTurn + 1) % 2;
             this.emit(Board.events.CHANGE_TURN, this.players[this.currentTurn]);
@@ -83,7 +80,6 @@ Board.prototype.mark = function(cupId) {
  * @returns {boolean}
  */
 Board.prototype.checkTurn = function(playerId) {
-  ('checkTurn');
     return this.players[this.currentTurn].id == playerId;
 };
 
@@ -91,52 +87,50 @@ Board.prototype.checkTurn = function(playerId) {
  *
  * @returns {{win: boolean, pos: Array}}
  */
-Board.prototype.checkWinner = function() {
-    var winPosition = [
-        [0, 1, 2],
-        [3, 4, 5],
-        [6, 7, 8],
+ Board.prototype.checkWinner = function() {
+   var win = false;
+   var counter=0;
 
-        [0, 3, 6],
-        [1, 4, 7],
-        [2, 5, 8],
+   this.cups.forEach(function(cup) {
+     if(cup.active == false) {
+       counter++;
+     }
+   });
 
-        [0, 4, 8],
-        [6, 4, 2]
-    ];
+   if(counter == 10) {
+     win = true;
+   }
 
-    var player = this.players[this.currentTurn];
-    var pos = [];
 
-    var win = winPosition.some(function(win) {
-        if (this.cups[win[0]].value === player.label) {
-            var res = this.cups[win[0]].value === this.cups[win[1]].value && this.cups[win[1]].value === this.cups[win[2]].value;
 
-            if (res) {
-                pos = win;
-                return true;
-            }
-        }
+ /*
+     var winPosition = [
+         [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+     ];
 
-        return false;
-    }, this);
+     var player = this.players[this.currentTurn];
+     var pos = [];
 
-    return {
-        win: win,
-        pos: pos
-    };
+     var win = winPosition.some(function(win) {
+         if (this.cups[win[0]].textContent === player.label) {
+             var res = this.cups[win[0]].textContent === this.cups[win[1]].textContent && this.cups[win[1]].textContent === this.cups[win[2]].textContent;
+
+             if (res) {
+                 pos = win;
+                 return true;
+             }
+}
+
+         return false;
+     }, this);*/
+
+     return {
+         win: win
+     };
+
+ };
 
-};
 
-/**
- *
- * @returns {boolean}
- */
-Board.prototype.checkDraw = function() {
-    return this.cups.every(function(cup) {
-        return cup.value === this.players[0].label || cup.value === this.players[1].label;
-    }, this);
-};
 
 /**
  *

Output/public/css/style.css

@@ -141,7 +141,10 @@ ellipse{
     100%{top: var(--top325)}
 }
 
-
+@-webkit-keyframes Shoot{
+    0%{top: var(--top)}
+    100%{top: var(--top325)}
+}
 
 
 

Output/public/js/Board.js

@@ -60,14 +60,12 @@ Board.prototype.enableTurn = function() {
             cup.setAttribute('active', 'true');
         }
     });
+   ball.classList.remove("Shoot");
 };
 
-Board.prototype.highlightcups = function(pos) {
+Board.prototype.highlightcups = function() {
     var cups = this.cups;
     alert('highlightcups');
-    pos.forEach(function(i) {
-      //  cups[i].classList.add('colorRed');
-    });
 
     cups.forEach(function(cup) {
         cup.setAttribute('marked', 'true');
@@ -82,88 +80,110 @@ Board.prototype.lowlightcups = function() {
     });
 };
 
+Board.prototype.shoot = function(cup) {
+  ball.classList.add("Shoot");  
+  switch(cup) {
+    case 0:
+    root.style.setProperty('--top325', "-515"+ "px");
+    ball.style.top = "-515px";
+    ball.style.left = "-155px";
+      break;
+    case 1:
+      root.style.setProperty('--top325', "-515"+ "px");
+      ball.style.top = "-515px";
+      ball.style.left = "-50px";
+      break;
+    case 2:
+      root.style.setProperty('--top325', "-515"+ "px");
+      ball.style.top = "-515px";
+      ball.style.left = "50px";
+      break;
+    case 3:
+      root.style.setProperty('--top325', "-515"+ "px");
+      ball.style.top = "-515px";
+      ball.style.left = "150px";
+      break;
+    case 4:
+      root.style.setProperty('--top325', "-430"+ "px");
+      ball.style.top = "-430px";
+      ball.style.left = "-100px";
+      break;
+    case 5:
+      root.style.setProperty('--top325', "-430"+ "px");
+      ball.style.top = "-430px";
+      ball.style.left = "0px";
+      break;
+    case 6:
+      root.style.setProperty('--top325', "-430"+ "px");
+      ball.style.top = "-430px";
+      ball.style.left = "100px";
+      break;
+    case 7:
+      root.style.setProperty('--top325', "-340"+ "px");
+      ball.style.top = "-340px"
+      ball.style.left = "-50px";
+      break;
+    case 8:
+      root.style.setProperty('--top325', "-340"+ "px");
+      ball.style.top = "-340px"
+      ball.style.left = "50px";
+      break;
+    case 9:
+      root.style.setProperty('--top325', "-250"+ "px");
+      ball.style.top = "-250px"
+      ball.style.left = "0px";
+      break;
+    default:
+      break;
+  }
+
+
+}
+
+
 
 Board.prototype.getCup = function(code) {
-  ball.classList.add("Shoot");
+ 
   switch (code)
   {
     case 'q':
     case 'Q':
-    root.style.setProperty('--top325', "-515"+ "px");
-    ball.style.top = "-515px";
-    ball.style.left = "-155px";
       return "cup1";
       break;
     case 'w':
     case 'W':
-      root.style.setProperty('--top325', "-515"+ "px");
-      ball.style.top = "-515px";
-      ball.style.left = "-50px";
       return "cup2";
-      //removeCup("2");j
       break;
     case 'e':
     case 'E':
-      root.style.setProperty('--top325', "-515"+ "px");
-      ball.style.top = "-515px";
-      ball.style.left = "50px";
       return "cup3";
-      //removeCup("3");
       break;
     case 'r':
     case 'R':
-      root.style.setProperty('--top325', "-515"+ "px");
-      ball.style.top = "-515px";
-      ball.style.left = "150px";
       return "cup4";
-      //removeCup("4");
       break;
     case 'a':
     case 'A':
-      root.style.setProperty('--top325', "-430"+ "px");
-      ball.style.top = "-430px";
-      ball.style.left = "-100px";
       return "cup5";
-      //removeCup("5");
       break;
     case 's':
     case 'S':
-      root.style.setProperty('--top325', "-430"+ "px");
-      ball.style.top = "-430px";
-      ball.style.left = "0px";
       return "cup6";
-      //removeCup("6");
       break;
     case 'd':
     case 'D':
-      root.style.setProperty('--top325', "-430"+ "px");
-      ball.style.top = "-430px";
-      ball.style.left = "100px";
-      //removeCup("7");
       return "cup7";
       break;
     case 'y':
     case 'Y':
-      root.style.setProperty('--top325', "-340"+ "px");
-      ball.style.top = "-340px"
-      ball.style.left = "-50px";
-      //removeCup("8");
       return "cup8";
       break;
     case 'x':
     case 'X':
-      root.style.setProperty('--top325', "-340"+ "px");
-      ball.style.top = "-340px"
-      ball.style.left = "50px";
-      //removeCup("9");
       return "cup9";
       break;
     case 'c':
     case 'C':
-      root.style.setProperty('--top325', "-250"+ "px");
-      ball.style.top = "-250px"
-      ball.style.left = "0px";
-      //removeCup("10");
       return "cup10";
       break;
     default:
@@ -177,6 +197,7 @@ Board.prototype.getCup = function(code) {
  */
 Board.prototype.mark = function(event) {
     if (this.ready) {
+      
       var target = document.getElementById(this.getCup(event.key));
       if (target.getAttribute('data-intent') === 'gamecup' && target.getAttribute('active') === 'true') {
           this.onMark(this.cups.indexOf(target));
@@ -195,31 +216,27 @@ Board.prototype.doMark = function(cupId, label) {
     var cup = this.cups[cupId];
     cup.textContent = label;
     //cup.classList.add('notActive');
-    // removeCup
+    // removeCup 
+    if(cup.getAttribute('marked') === 'false') this.shoot(cupId);
     setTimeout(this.cups[cupId].classList.add("fadeAway") ,1000);
     cup.setAttribute('marked', 'true');
     setTimeout(function() {
       ball.style.top = "0px";
       ball.style.left = "0px";
     }, 1000);
+    this.currentTurn = (this.currentTurn + 1) % 2;
 };
 
 /**
  *
  * @param pos
  */
-Board.prototype.doWinner = function(pos) {
+Board.prototype.doWinner = function() {
     this.disableAll();
-    this.highlightcups(pos);
+    this.highlightcups();
 };
 
-/**
- *
- */
-Board.prototype.doDraw = function() {
-    alert('doDraw');
-    this.lowlightcups();
-};
+
 
 /**
  *
@@ -241,17 +258,23 @@ Board.prototype.highlightScoreboard = function(playerId) {
  * @returns {{win: boolean, pos: Array}}
  */
 Board.prototype.checkWinner = function() {
+  var counter=0;
+  var win = false;
+  this.cups.forEach(function(cup) {
+      if (cup.getAttribute('marked') === 'true') {
+          counter++;
+      }
+  });
+
+    if(counter === 10) {
+      win = true;
+    }
+
+
+
+/*
     var winPosition = [
-        [0, 1, 2],
-        [3, 4, 5],
-        [6, 7, 8],
-
-        [0, 3, 6],
-        [1, 4, 7],
-        [2, 5, 8],
-
-        [0, 4, 8],
-        [6, 4, 2]
+        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
     ];
 
     var player = this.players[this.currentTurn];
@@ -268,7 +291,7 @@ Board.prototype.checkWinner = function() {
         }
 
         return false;
-    }, this);
+    }, this);*/
 
     return {
         win: win,
@@ -277,15 +300,7 @@ Board.prototype.checkWinner = function() {
 
 };
 
-/**
- *
- * @returns {boolean}
- */
-Board.prototype.checkDraw = function() {
-    return this.cups.every(function(cup) {
-        return cup.textContent === this.players[0].label || cup.textContent === this.players[1].label;
-    }, this);
-};
+
 
 /**
  *

Output/public/js/app.js

@@ -114,9 +114,7 @@ socket.onmessage = function(event){
 
         case events.incoming.GAME_OVER:
             if (msg.data.player) {
-                board.doWinner(msg.data.pos);
-            } else {
-                board.doDraw();
+                board.doWinner();
             }
 
             socket.send(makeMessage(events.outgoing.QUIT, hero.id));

Output/server.js

@@ -71,11 +71,6 @@ wss.on('connection', function connection(ws) {
         });
     });
 
-    board.on(Board.events.DRAW, function(event) {
-        wss.clients.forEach(function(client) {
-            client.send(makeMessage(events.outgoing.GAME_OVER, event));
-        });
-    });
 
     ws.on('message', function incoming(msg) {
 

README.md

@@ -4,10 +4,28 @@ Ein Projekt das es ermöglicht Beerpong über das Internet von zwei unabhängige
 
 Entstehung im Rahmen einer Praktikumsaufgabe im Fach Interaktion.
 
-Voraussetzungen: Node.js wurde installiert.
+## Vorbereitung
 
-Erst den Web-server starten mit: 
+Voraussetzungen: Node.js wurde installiert, so dass npm im Terminal verfügbar ist.
+In der Kommandozeile dann in das Verzeichnis Output wechseln und Folgende Schritte befolgen.
+
+Erst den Web-server starten mit:
 npm run-script web-server
 
 danach den Socket-server starten mit:
-npm run-script socket-server
+npm run-script socket-server
+
+Die Website ist dann unter http://localhost:3000 verfügbar. Es kann gespielt werden sobald zwei Browser Fenster diese Website besuchen.
+
+Wenn in der Datei Beerpong/public/app.js in der ersten Zeile anstatt localhost die IP-Adresse des Servers hinterlegt wird, kann von jedem PC im Netzwerk über http://"server-ip":3000 (ersetzt mit ip-Adresse, ohne Anführungszeichen) das Spiel gespielt werden. 
+
+## zum Spielen
+
+Erst muss jeder Spieler seinen Namen eingeben und mit Start bestätigen.
+
+Becher über die Tasten:
+         qwer
+         asd
+         yx
+         c
+verschwinden lassen.