diff --git a/app.js b/app.js index 08e90ede23bd0d3fbb697c47afa933f803603fa1..b155fbda531dc13fc902fdb7bf801449d8862d7e 100644 --- a/app.js +++ b/app.js @@ -5,13 +5,15 @@ document.addEventListener('DOMContentLoaded', () => { const flaechen = document.querySelectorAll('.grid div'); const ergebnis = document.querySelector('#result'); const ergebnis2 = document.querySelector('#result2'); - const bubbles1 = document.querySelector('.bubbles span'); - const bubbles2 = document.querySelector('.bubbles span:nth-child(even)'); + const bubbles1 = document.querySelectorAll('.bubbles span:nth-child(odd)'); + const bubbles2 = document.querySelectorAll('.bubbles span:nth-child(even)'); + + const takenChips = document.querySelectorAll('.grid div'); const displayCurrentPlayer = document.querySelector('#current-player'); // Variable für den aktuellen Spieler (1 oder 2) let currentPlayer = 1; - + let gameActive = true; //Hier werden alle potentielle gewinn Flächen abgespeichert // 4 Flächen müssen mit der gleichen Farbe belegt sein @@ -123,6 +125,7 @@ ws.onmessage = function(event) { }; // Funktion, um eine Spielmarke in der angegebenen Spalte zu platzieren function placeChipInColumn(column) { + if (!gameActive) return; // Beginne am unteren Ende der Spalte und suche das erste freie Feld for (let i = 5; i >= 0; i--) { const index = i * 7 + column; @@ -143,6 +146,14 @@ function placeChipInColumn(column) { break; } } +} +function checkForDraw(){ + for (let i = 0; i < flaechen.length; i++) { + if (!flaechen[i].classList.contains('taken')) { + return false; + } + } + return true; } // DIese Methode Überprüft jede Gewinnkombination function checkBoard() { @@ -161,10 +172,12 @@ function placeChipInColumn(column) { { ergebnis.innerHTML = 'Spieler 1 siegt!' ergebnis2.innerHTML = 'Spieler 1 siegt!' - bubbles1.style.background = '#ff0000' - bubbles2.style.background = '#ff0000' - bubbles1.style.boxShadow = '#ff000044' - bubbles2.style.boxShadow = '#ff000044' + bubbles2.forEach(bubble => { + bubble.style.background = '#ff0000'; + bubble.style.boxShadow = '0 0 10px #ff0000'; + }); + gameActive = false; + return; } if ( @@ -176,17 +189,31 @@ function placeChipInColumn(column) { { ergebnis.innerHTML = 'Spieler 2 siegt!' ergebnis2.innerHTML = 'Spieler 2 siegt!' - bubbles1.style.background = '#ffff00' - bubbles2.style.background = '#ffff00' - bubbles1.style.boxShadow = '#ffff0044' - bubbles2.style.boxShadow = '#ffff0044' + bubbles1.forEach(bubble => { + bubble.style.background = '#ffff00'; + bubble.style.boxShadow = '0 0 10px #ffff00'; + }); + gameActive = false; + return; + } + if(gewinnFlaechen.length - 1 === y && checkForDraw()){ + ergebnis.innerHTML = 'Unentschieden!'; + ergebnis2.innerHTML = 'Unentschieden!'; + bubbles1.forEach(bubbleodd => { + bubbleodd.style.background = '#ffffff'; + bubbleodd.style.boxShadow = '0 0 10px #ffffff'; + }); + bubbles2.forEach(bubbleeven => { + bubbleeven.style.background = '#ffffff'; + bubbleeven.style.boxShadow = '0 0 10px #ffffff'; + }); } - } } // Fügt jedem Feld im Grid einen Klick-Event-Listener hinzu for (let i = 0; i < flaechen.length; i++) { flaechen[i].onclick = () => { + if (!gameActive) return; // Überprüft, ob das darüberliegende Feld besetzt ist und das aktuelle Feld frei ist, um die Gültigkeit des Zuges zu sichern if (flaechen[i + 7].classList.contains('taken') &&!flaechen[i].classList.contains('taken')) { if (currentPlayer == 1) { // Wenn Spieler Eins am Zug ist @@ -212,5 +239,9 @@ function simulateClick(divElement) { } } + const startButton = document.getElementById('restartButton'); + startButton.addEventListener('click', () => { + location.reload() + }); diff --git a/index.html b/index.html index 7a930447efd854ac5b99afb9160b4ac1da3528df..3e291fedc926ee9639129c2e138401a43a8f7e2f 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,9 @@ <script type="module" src="app.js" charset="utf-8" defer></script> </head> <body> + <div class="backgroundContainer"> + <button id="restartButton"><p id="test">RESTART</p></button> <div class="bubbles"> <span style="--i:11"></span> <span style="--i:12"></span> @@ -42,6 +44,11 @@ <span style="--i:13"></span> <span style="--i:28"></span> + <span style="--i:26"></span> + <span style="--i:17"></span> + <span style="--i:13"></span> + <span style="--i:28"></span> + @@ -109,8 +116,8 @@ <div class="taken"></div> </div> </div> -<img id="cursor0" src="file.png" width="15" height="20" alt="Cursor 1" style="position: absolute;"/> -<img id="cursor1" src="file.png" width="15" height="20" alt="Cursor 2" style="position: absolute;"/> +<img id="cursor0" src="file.png" width="30" height="40" alt="Cursor 1" style="position: absolute;"/> +<img id="cursor1" src="file.png" width="30" height="40" alt="Cursor 2" style="position: absolute;"/> </div> </div> diff --git a/style.css b/style.css index 40a5859ece8b28429b8266417a24e884d5f21b91..7cc41c9aa62d1ad6e60f206a0da047fd46b537c6 100644 --- a/style.css +++ b/style.css @@ -178,7 +178,15 @@ button:hover { font-family: "Comic Sans MS"; color: green; font-size: 50px; - } +#restartButton{ + position: absolute; + background:green; +} +#test{ + color: black; + font-family: "Comic Sans MS"; +} +