diff --git a/app.js b/app.js index 5b9e088e5ff036e60fc48a5c9fc2eb66c70669b3..08e90ede23bd0d3fbb697c47afa933f803603fa1 100644 --- a/app.js +++ b/app.js @@ -4,6 +4,10 @@ document.addEventListener('DOMContentLoaded', () => { //Aus der html werden alle divs in die constante 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 displayCurrentPlayer = document.querySelector('#current-player'); // Variable für den aktuellen Spieler (1 oder 2) let currentPlayer = 1; @@ -155,8 +159,14 @@ function placeChipInColumn(column) { square4.classList.contains('player-one') ) { - ergebnis.innerHTML = 'Player One Wins!' + 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' } + if ( square1.classList.contains('player-two') && square2.classList.contains('player-two') && @@ -164,8 +174,14 @@ function placeChipInColumn(column) { square4.classList.contains('player-two') ) { - ergebnis.innerHTML = 'Player Two Wins!' + 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' } + } } // Fügt jedem Feld im Grid einen Klick-Event-Listener hinzu diff --git a/index.html b/index.html index 786fc62fd1cc7ccc76497a7dc579ff5c240f2ca6..7a930447efd854ac5b99afb9160b4ac1da3528df 100644 --- a/index.html +++ b/index.html @@ -8,15 +8,56 @@ <script type="module" src="app.js" charset="utf-8" defer></script> </head> <body> +<div class="backgroundContainer"> + <div class="bubbles"> + <span style="--i:11"></span> + <span style="--i:12"></span> + <span style="--i:24"></span> + <span style="--i:10"></span> + <span style="--i:14"></span> + <span style="--i:23"></span> + <span style="--i:18"></span> + <span style="--i:16"></span> + <span style="--i:19"></span> + <span style="--i:20"></span> + <span style="--i:22"></span> + <span style="--i:25"></span> + <span style="--i:18"></span> + <span style="--i:21"></span> + <span style="--i:15"></span> + <span style="--i:13"></span> + <span style="--i:26"></span> + <span style="--i:17"></span> + <span style="--i:13"></span> + <span style="--i:28"></span> + + <span style="--i:32"></span> + <span style="--i:34"></span> + <span style="--i:38"></span> + <span style="--i:40"></span> + <span style="--i:42"></span> + <span style="--i:13"></span> + <span style="--i:26"></span> + <span style="--i:17"></span> + <span style="--i:13"></span> + <span style="--i:28"></span> + + + + + + + <!--<div id="main-menu"> <h1>Connect Four</h1> <button id="start-game">Spiel starten</button> <button id="settings">Einstellungen</button> </div>--> - <h1>Der derzeitige Spieler ist: Spieler <span id="current-player">1</span></h1> +<div id="totalDiv"> <h3 id="result"></h3> - <img id ="img" alt="4 Gewinnt" src="four.jpg" width="500" height="600"> <div class="grid"> - <h1 id="title">4 GEWINNT SPIEL</h1> + <h3 id="result2"></h3> + <h1 id="playerTitle">Spieler <span id="current-player">1</span> ist am Zug</h1> + <div class="grid"> <div></div> <div></div> <div></div> @@ -67,10 +108,11 @@ <div class="taken"></div> <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;"/> - - +</div> +</div> </body> </html> diff --git a/style.css b/style.css index 9d78949ac2a03132660e887c286167932bae88d2..40a5859ece8b28429b8266417a24e884d5f21b91 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,52 @@ +*{ + +} +body{ + min-height: 100vh; + background: #0c192c; +} +.backgroundContainer{ + position: relative; + width: 100%; + height: 100vh; + overflow: hidden; +} +.bubbles{ + position: relative; + display: flex; +} +.bubbles span{ + position: relative; + width: 30px; + height: 30px; + background: #FF0000; + margin: 0 15px; + border-radius: 50%; + box-shadow: 0 0 0 10px #FF000044, + 0 0 50px #FF0000, + 0 0 100px #FF0000; + animation: animate 30s linear infinite; + animation-duration: calc(200s /var(--i)); +} +@keyframes animate { +0%{ + transform: translateY(100vh) scale(0); +} + 100%{ + transform: translateY(-10vh) scale(1); +} +} + .bubbles span:nth-child(even){ + background: #ffff00; + box-shadow: 0 0 0 10px #ffff0044, + 0 0 50px #ffff00, + 0 0 100px #ffff00; + } .grid { + left:1000px; border: 5px solid; - height: 480px; - width: 560px; + height: 720px; + width: 840px; display: flex; flex-wrap: wrap; background-color: blue; @@ -10,9 +55,9 @@ } .grid div { - height: 70px; - width: 70px; - margin: 5px; + height: 105px; + width: 105px; + margin: 7.5px; background-color: white; border-radius: 50%; transition: background-color 0.3s ease; @@ -89,6 +134,51 @@ button:hover { } } +@keyframes playerSwitch { + 0% { + transform: scale(1); + color: #000; + } + 50% { + transform: scale(1.5); + color: #fff; + } + 100% { + transform: scale(1); + color: #000; + } +} + +#current-player { + animation: playerSwitch 0.5s ease-in-out; +} + +#playerTitle{ + font-family: "Comic Sans MS"; + font-size: 80px; + color: green; +} +#totalDiv{ + position: absolute; + left:600px; +} +#result{ + position: absolute; + top:360px; + right:450px; + font-family: "Comic Sans MS"; + color: green; + font-size: 50px; + margin-right: 500px; +} +#result2{ + position: absolute; + top:350px; + left:1000px; + font-family: "Comic Sans MS"; + color: green; + font-size: 50px; +}