Merge branch 'main' of https://gitlab2.informatik.hs-fulda.de/fdai7359/gesellschaftsspiele-sammlung

vier_gewinnt/JS/allSpaltenArrays.js

@@ -0,0 +1,8 @@
+function allSpaltenArrays() {
+    var allSpaltenArray =[];
+    for (let i = 1; i <= 7; i++) {
+        allSpaltenArray.push(steinInSpalte(i))
+    }
+
+    return allSpaltenArray
+}

vier_gewinnt/JS/gewinnErmitteln.js

@@ -0,0 +1,8 @@
+function gewinnErmitteln(spalte,reihe) {
+    if (vierInSpalte(steinInSpalte(spalte)) === 1 || vierInReihe(steinInReihe(reihe)) === 1 || vierDiagonalRechts(allSpaltenArrays()) === 1 || vierDiagonalLinks(allSpaltenArrays()) === 1) {
+        alert("Herzlichen Glückwunsch Spieler 1 (Grün) du hast gewonnen")
+    }if (vierInSpalte(steinInSpalte(spalte)) === 2 || vierInReihe(steinInReihe(reihe)) === 2 || vierDiagonalRechts(allSpaltenArrays()) === 2 || vierDiagonalLinks(allSpaltenArrays()) === 2){
+        alert("Spieler 2 (Rot) hat gewonnen")
+    }
+    
+}

vier_gewinnt/JS/naechsteFreierPlatz.js

@@ -0,0 +1,9 @@
+function ersterFreierPlatz(arr) {
+    for (let elem = 0; elem < arr.length; elem++) {
+        if (arr[elem] === 0) {
+            return elem+1;
+        }
+
+    }
+}
+module.exports= ersterFreierPlatz;

vier_gewinnt/JS/regeln.js

@@ -0,0 +1,10 @@
+function regelAnzeige() {
+    if (document.getElementById("regeln").innerHTML === '') {
+        document.getElementById("regelButton").innerHTML = "Regeln ausblenden";
+        document.getElementById("regeln").innerHTML = "Vier Gewinnt ist ein Spiel, indem Spieler abwechseld Steine in Felder legen, wer als erstes vier Steine nebeneinader, übereinander oder diagonal hat, hat gewonnen.";
+    }else {
+        document.getElementById("regelButton").innerHTML = "Regeln anzeigen";
+        document.getElementById("regeln").innerHTML = "";
+    }
+    
+}

vier_gewinnt/JS/steinSetzen.js

@@ -2,11 +2,16 @@ function setzeStein(reihe, spalte) {
     var aktuellerSpieler = document.getElementById("aktuellerSpieler").innerHTML;
     var color;
     if (aktuellerSpieler == 1) {
-        color = "red";
+        color = "green";
         
     } else {
-        color = "green";
+        color = "red";
     }
+
+    var reihe = ersterFreierPlatz(steinInSpalte(spalte));
+
     document.getElementById(reihe + "/" + spalte).style.backgroundColor= color;
+    gewinnErmitteln(spalte, reihe);
     spielerWechsel();
+    
 }

vier_gewinnt/JS/steineInReihe.js

@@ -0,0 +1,23 @@
+function steinInReihe(reiheImFeld) {
+    // Feld mit Steinen in Reihe
+    // O = kein Stein
+    // 1 = gruener Stein
+    // 2 = roter Stein
+    var reihe = [];
+    
+    for (let i = 1; i <= 7; i++) {
+        var color = document.getElementById(reiheImFeld + "/" + i).style.backgroundColor;
+        
+        if (color == "red") {
+            reihe.push(2);
+        }else if (color == "green") {
+            reihe.push(1);
+        } else {
+            reihe.push(0);
+        }
+    }
+
+    return reihe;
+    
+    
+}

vier_gewinnt/JS/steineInSpalte.js

@@ -6,15 +6,19 @@ function steinInSpalte(spalte) {
     var zeile = [];
     
     for (let i = 1; i <= 6; i++) {
+        var color = document.getElementById(i + "/" + spalte).style.backgroundColor;
         
-        if (document.getElementById( i +"/"+ spalte).style.backgroundColor == "red") {
+        if (color == "red") {
             zeile.push(2);
-        }if (document.getElementById(i + "/"+ spalte).style.backgroundColor == "green") {
+        }else if (color == "green") {
             zeile.push(1);
         } else {
             zeile.push(0);
         }
     }
 
+    return zeile;
+    
     
 }
+//module.exports = steinInSpalte;

vier_gewinnt/JS/vierDiagonalLinks.js

@@ -0,0 +1,14 @@
+function vierDiagonalLinks(allSpaltenArray) {
+    var Gewinner =0;
+    for (let i = 3; i <= allSpaltenArray.length; i++) {
+        for (let j = 0; j <= allSpaltenArray[0].length -3; j++) {
+            if (allSpaltenArray[j][i]===1 && allSpaltenArray[j+1][i-1]===1 && allSpaltenArray[j+2][i-2]===1 && allSpaltenArray[j+3][i-3]===1) {
+                Gewinner = 1;
+            }if (allSpaltenArray[j][i]===2 && allSpaltenArray[j+1][i-1]===2 && allSpaltenArray[j+2][i-2]===2 && allSpaltenArray[j+3][i-3]===2) {
+                Gewinner = 2;
+            } 
+        }     
+    }
+    return Gewinner;
+}
+module.exports = vierDiagonalLinks;

vier_gewinnt/JS/vierDiagonalRechts.js

@@ -0,0 +1,15 @@
+function vierDiagonalRechts(allSpaltenArray) {
+    var Gewinner =0;
+    for (let i = 0; i <= allSpaltenArray.length -3; i++) {
+        for (let j = 0; j <= allSpaltenArray[0].length -3; j++) {
+            if (allSpaltenArray[j][i]===1 && allSpaltenArray[j+1][i+1]===1 && allSpaltenArray[j+2][i+2]===1 && allSpaltenArray[j+3][i+3]===1) {
+                Gewinner = 1;
+            } 
+            if (allSpaltenArray[j][i]===2 && allSpaltenArray[j+1][i+1]===2 && allSpaltenArray[j+2][i+2]===2 && allSpaltenArray[j+3][i+3]===2) {
+                Gewinner = 2;
+            }  
+        }     
+    }
+    return Gewinner;
+}
+module.exports = vierDiagonalRechts;

vier_gewinnt/JS/vierInReihe.js

@@ -0,0 +1,18 @@
+function vierInReihe(arr){
+    var Gewinner = 0;
+    //Spieler Gruen
+    for (let i = 0; i < arr.length - 3; i++) {
+        if (arr[i] === 1 && arr[i + 1] === 1 && arr[i + 2] === 1 && arr[i + 3] === 1) {
+          Gewinner = 1;
+        }
+    }
+    //Spieler Rot
+    for (let i = 0; i < arr.length - 3; i++) {
+        if (arr[i] === 2 && arr[i + 1] === 2 && arr[i + 2] === 2 && arr[i + 3] === 2) {
+            Gewinner = 2;
+        }
+    }
+    return Gewinner;
+    
+}
+module.exports = vierInReihe;

vier_gewinnt/JS/vierInSpalte.js

@@ -0,0 +1,18 @@
+function vierInSpalte(arr){
+    var Gewinner = 0;
+    //Spieler Gruen
+    for (let i = 0; i < arr.length - 3; i++) {
+        if (arr[i] === 1 && arr[i + 1] === 1 && arr[i + 2] === 1 && arr[i + 3] === 1) {
+          Gewinner = 1;
+        }
+    }
+    //Spieler Rot
+    for (let i = 0; i < arr.length - 3; i++) {
+        if (arr[i] === 2 && arr[i + 1] === 2 && arr[i + 2] === 2 && arr[i + 3] === 2) {
+            Gewinner = 2;
+        }
+    }
+    return Gewinner;
+    
+}
+module.exports = vierInSpalte;

vier_gewinnt/tests/test_naechsterFreierPlatz.test.js

@@ -0,0 +1,8 @@
+const ersterFreierPlatz = require("../JS/naechsteFreierPlatz");
+
+describe("Test Vier Gewinnt", () => {
+    it("Test welcher naechster platz ist frei", () =>{
+        expect(ersterFreierPlatz([1, 1, 0, 0, 0, 0])).toBe(3);
+        expect(ersterFreierPlatz([1, 1, 2, 1, 0, 0])).toBe(5);
+    })
+})

vier_gewinnt/tests/test_vierDiagonalLinks.test.js

@@ -0,0 +1,24 @@
+const vierDiagonalLinks = require("../JS/vierDiagonalLinks");
+
+describe("Test Vier Gewinnt", () => {
+    it("Test vierDiagonalLinks: Vier Diagonal nach links erkennen und Gewinner 1(Gruen) zuruek geben", () =>{
+        expect(vierDiagonalLinks([[0, 0, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [2, 2, 1, 1, 0, 0], [2, 1, 1, 0, 0, 0], [2, 1, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0]])).toBe(1);
+        expect(vierDiagonalLinks([[2, 1, 2, 1, 0, 0], [2, 1, 1, 0, 0, 0], [2, 1, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]])).toBe(1);
+        expect(vierDiagonalLinks([[0, 0, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [2, 2, 1, 2, 1, 1], [2, 1, 2, 1, 1, 0], [2, 1, 2, 1, 0, 0], [1, 2, 1, 0, 0, 0]])).toBe(1);
+        expect(vierDiagonalLinks([[2, 2, 1, 2, 1, 1], [2, 1, 2, 1, 1, 0], [2, 1, 2, 1, 0, 0], [1, 2, 1, 0, 0, 0], [0, 0, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]])).toBe(1);
+        expect(vierDiagonalLinks([[0, 0, 0, 0, 0, 0], [1, 2, 1, 2, 1, 0], [2, 1, 2, 1, 0, 0], [2, 1, 1, 0, 0, 0], [2, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [1, 2, 2, 0, 0, 0]])).toBe(1);
+        
+    })
+})
+
+
+describe("Test Vier Gewinnt", () => {
+    it("Test vierDiagonalLinks: Vier Diagonal nach links erkennen und Gewinner 2(Rot) zuruek geben", () =>{
+        expect(vierDiagonalLinks([[0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [1, 1, 2, 2, 0, 0], [1, 2, 2, 0, 0, 0], [1, 2, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0]])).toBe(2);
+        expect(vierDiagonalLinks([[1, 2, 1, 2, 0, 0], [1, 2, 2, 0, 0, 0], [1, 2, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]])).toBe(2);
+        expect(vierDiagonalLinks([[0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [1, 1, 2, 1, 2, 2], [1, 2, 1, 2, 2, 0], [1, 2, 1, 2, 0, 0], [2, 1, 2, 0, 0, 0]])).toBe(2);
+        expect(vierDiagonalLinks([[1, 1, 2, 1, 2, 2], [1, 2, 1, 2, 2, 0], [1, 2, 1, 2, 0, 0], [2, 1, 2, 0, 0, 0], [0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]])).toBe(2);
+        expect(vierDiagonalLinks([[0, 0, 0, 0, 0, 0], [2, 1, 2, 1, 2, 0], [1, 2, 1, 2, 0, 0], [1, 2, 2, 0, 0, 0], [1, 2, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [2, 1, 1, 0, 0, 0]])).toBe(2);
+        
+    })
+})

vier_gewinnt/tests/test_vierDiagonalRechts.test.js

@@ -0,0 +1,21 @@
+const vierDiagonalRechts = require("../JS/vierDiagonalRechts");
+
+describe("Test Vier Gewinnt", () => {
+    it("Test vierDiagonalRechts: Vier Diagonal erkennen und Gewinner 1(Gruen) zuruek geben", () =>{
+        expect(vierDiagonalRechts([[1, 0, 0, 0, 0, 0], [2, 1, 0, 0, 0, 0], [2, 1, 1, 0, 0, 0], [2, 2, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]])).toBe(1);
+        expect(vierDiagonalRechts([[1, 2, 1, 0, 0, 0], [2, 1, 2, 1, 0, 0], [2, 1, 1, 2, 1, 0], [2, 2, 1, 2, 1, 1], [0, 0, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]])).toBe(1);
+        expect(vierDiagonalRechts([[2, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [2, 1, 0, 0, 0, 0], [2, 1, 1, 0, 0, 0], [2, 1, 2, 1, 0, 0], [1, 2, 1, 2, 1, 0]])).toBe(1);
+        expect(vierDiagonalRechts([[2, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0], [1, 2, 1, 0, 0, 0], [2, 1, 2, 1, 0, 0], [2, 1, 2, 1, 1, 0], [2, 2, 1, 2, 1, 1]])).toBe(1);
+        expect(vierDiagonalRechts([[2, 0, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0], [1, 2, 1, 0, 0, 0], [2, 1, 2, 1, 0, 0], [2, 1, 2, 1, 1, 0], [2, 2, 1, 2, 1, 1], [1, 0, 0, 0, 0, 0]])).toBe(1);
+    })
+})
+
+describe("Test Vier Gewinnt", () => {
+    it("Test vierDiagonalRechts: Vier Diagonal erkennen und Gewinner 2 (rot) zuruek geben", () =>{
+        expect(vierDiagonalRechts([[2, 0, 0, 0, 0, 0], [1, 2, 0, 0, 0, 0], [1, 2, 2, 0, 0, 0], [1, 1, 2, 2, 0, 0], [0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]])).toBe(2);
+        expect(vierDiagonalRechts([[2, 1, 2, 0, 0, 0], [1, 2, 1, 2, 0, 0], [1, 2, 2, 1, 2, 0], [1, 1, 2, 1, 2, 2], [0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]])).toBe(2);
+        expect(vierDiagonalRechts([[1, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0], [1, 2, 0, 0, 0, 0], [1, 2, 2, 0, 0, 0], [1, 2, 1, 2, 0, 0], [2, 1, 2, 1, 2, 0]])).toBe(2);
+        expect(vierDiagonalRechts([[1, 0, 0, 0, 0, 0], [2, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0], [2, 1, 2, 0, 0, 0], [1, 2, 1, 2, 0, 0], [1, 2, 1, 2, 2, 0], [1, 1, 2, 1, 2, 2]])).toBe(2);
+        expect(vierDiagonalRechts([[1, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0], [2, 1, 2, 0, 0, 0], [1, 2, 1, 2, 0, 0], [1, 2, 1, 2, 2, 0], [1, 1, 2, 1, 2, 2], [2, 0, 0, 0, 0, 0]])).toBe(2);
+    })
+})

vier_gewinnt/tests/test_vierInReihe.test.js

@@ -0,0 +1,10 @@
+const vierInSpalte = require("../JS/vierInSpalte");
+
+describe("Test Vier Gewinnt", () => {
+    it("Test vier Steine nebeneinander in einer Reihe vorhanden und gebe Gewinner 1 aus", () =>{
+        expect(vierInSpalte([0, 1, 1, 1, 1, 0, 0])).toBe(1);
+    })
+    it("Test vier Steine nebeneinander in einer Reihe vorhanden und gebe Gewinner 2 aus", () =>{
+        expect(vierInSpalte([0, 0, 2, 2, 2, 2, 0])).toBe(2);
+    })
+})

vier_gewinnt/tests/test_vierInSpalte.test.js

@@ -0,0 +1,10 @@
+const vierInSpalte = require("../JS/vierInSpalte");
+
+describe("Test Vier Gewinnt", () => {
+    it("Test vier Stein in einer Spalte vorhanden und gebe Gewinner 1 aus", () =>{
+        expect(vierInSpalte([1, 1, 1, 1, 0, 0])).toBe(1);
+    })
+    it("Test vier Stein in einer Spalte vorhanden und gebe Gewinner 2 aus", () =>{
+        expect(vierInSpalte([0, 2, 2, 2, 2, 0])).toBe(2);
+    })
+})

vier_gewinnt/vierGewinnt.html

@@ -8,70 +8,81 @@
     <script src="./JS/steinSetzen.js"></script>
     <script src="./JS/spielerWechsel.js"></script>
     <script src="./JS/steineInSpalte.js"></script>
+    <script src="./JS/steineInReihe.js"></script>
+    <script src="./JS/allSpaltenArrays.js"></script>
+    <script src="./JS/naechsteFreierPlatz.js"></script>
+    <script src="./JS/vierInSpalte.js"></script>
+    <script src="./JS/vierInReihe.js"></script>
+    <script src="./JS/vierDiagonalRechts.js"></script>
+    <script src="./JS/vierDiagonalLinks.js"></script>
+    <script src="./JS/gewinnErmitteln.js"></script>
+    <script src="./JS/regeln.js"></script>
     <title>Vier Gewinnt</title>
 </head>
 <body>
     <h1>Vier Gewinnt</h1>
-    <p>Vier Gewinnt ist ein Spiel, indem Spieler abwechseld Steine in Felder legen, wer als erstes vier Steine nebeneinader, übereinander oder diagonal hat, hat gewonnen.</p>
-    <p>Spieler an Zug: <p id="aktuellerSpieler">1</p></p>
+    <button id="regelButton" onclick="regelAnzeige()">Regeln anzeigen</button>
+    <p id="regeln">Vier Gewinnt ist ein Spiel, indem Spieler abwechseld Steine in Felder legen, wer als erstes vier Steine nebeneinader, übereinander oder diagonal hat, hat gewonnen.</p>
+    <p>Spieler am Zug: <p id="aktuellerSpieler">1</p></p>
 
     <table>
         <tr>
-            <td id="1/6" onclick="setzeStein(1,6);"></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
+            <td id="6/1" onclick="setzeStein(6,1);"></td>
+            <td id="6/2" onclick="setzeStein(6,2);"></td>
+            <td id="6/3" onclick="setzeStein(6,3);"></td>
+            <td id="6/4" onclick="setzeStein(6,4);"></td>
+            <td id="6/5" onclick="setzeStein(6,5);"></td>
+            <td id="6/6" onclick="setzeStein(6,6);"></td>
+            <td id="6/7" onclick="setzeStein(6,7);"></td>
         </tr>
         <tr>
-            <td id="1/5" onclick="setzeStein(1,5);"></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
+            <td id="5/1" onclick="setzeStein(5,1);"></td>
+            <td id="5/2" onclick="setzeStein(5,2);"></td>
+            <td id="5/3" onclick="setzeStein(5,3);"></td>
+            <td id="5/4" onclick="setzeStein(5,4);"></td>
+            <td id="5/5" onclick="setzeStein(5,5);"></td>
+            <td id="5/6" onclick="setzeStein(5,6);"></td>
+            <td id="5/7" onclick="setzeStein(5,7);"></td>
         </tr>
         <tr>
-            <td id="1/4" onclick="setzeStein(1,4);"></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
+            <td id="4/1" onclick="setzeStein(4,1);"></td>
+            <td id="4/2" onclick="setzeStein(4,2);"></td>
+            <td id="4/3" onclick="setzeStein(4,3);"></td>
+            <td id="4/4" onclick="setzeStein(4,4);"></td>
+            <td id="4/5" onclick="setzeStein(4,5);"></td>
+            <td id="4/6" onclick="setzeStein(4,6);"></td>
+            <td id="4/7" onclick="setzeStein(4,7);"></td>
         </tr>
         <tr>
-            <td id="1/3" onclick="setzeStein(1,3);"></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
+            <td id="3/1" onclick="setzeStein(3,1);"></td>
+            <td id="3/2" onclick="setzeStein(3,2);"></td>
+            <td id="3/3" onclick="setzeStein(3,3);"></td>
+            <td id="3/4" onclick="setzeStein(3,4);"></td>
+            <td id="3/5" onclick="setzeStein(3,5);"></td>
+            <td id="3/6" onclick="setzeStein(3,6);"></td>
+            <td id="3/7" onclick="setzeStein(3,7);"></td>
         </tr>
         <tr>
-            <td id="1/2" onclick="setzeStein(1,2);"></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
+            <td id="2/1" onclick="setzeStein(2,1);"></td>
+            <td id="2/2" onclick="setzeStein(2,2);"></td>
+            <td id="2/3" onclick="setzeStein(2,3);"></td>
+            <td id="2/4" onclick="setzeStein(2,4);"></td>
+            <td id="2/5" onclick="setzeStein(2,5);"></td>
+            <td id="2/6" onclick="setzeStein(2,6);"></td>
+            <td id="2/7" onclick="setzeStein(2,7);"></td>
         </tr>
         <tr>
             <td id="1/1" onclick="setzeStein(1,1);"></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
+            <td id="1/2" onclick="setzeStein(1,2);"></td>
+            <td id="1/3" onclick="setzeStein(1,3);"></td>
+            <td id="1/4" onclick="setzeStein(1,4);"></td>
+            <td id="1/5" onclick="setzeStein(1,5);"></td>
+            <td id="1/6" onclick="setzeStein(1,6);"></td>
+            <td id="1/7" onclick="setzeStein(1,7);"></td>
             
         </tr>
         
     </table>
+    <button onClick="window.location.reload();">Spiel neu Starten</button>
 </body>
 </html>