From a75c64584eb5bfe2111166e61944c9205741ab51 Mon Sep 17 00:00:00 2001
From: Amel Abdic <Amel.Abdic@Student.Reutlingen-University.DE>
Date: Fri, 31 May 2024 15:24:17 +0200
Subject: [PATCH] Added Background animation, Changed text position color font,
removed old background image and reworked background, chnaged position of
connect 4 board
---
app.js | 20 +++++++++--
index.html | 52 +++++++++++++++++++++++++---
style.css | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++---
3 files changed, 160 insertions(+), 12 deletions(-)
diff --git a/app.js b/app.js
index 5b9e088..08e90ed 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 786fc62..7a93044 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 9d78949..40a5859 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;
+}
--
GitLab