Merge pull request #3379 from VijaySamant4368/main

Improved Tennis HUD and improved the CSS in Tennis
kunjgit · May 17, 2024 · bc581c4 · bc581c4
2 parents f5e31be + fa65e49
commit bc581c4
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 33 deletions.
diff --git a/Games/Tennis/index.html b/Games/Tennis/index.html
@@ -6,18 +6,16 @@
 </head>
 <body>
   <h1>🎾 Tennis Showdown 🎾 </h1>
-  <canvas id="gameCanvas"></canvas>
-  <div class="score-card">
-    <div class="player-score">
-      <span class="player-name">Player 1:</span>
+  <canvas id="gameCanvas"></canvas>     <!-- The main court -->
+        <!-- The score part-->
+  <div id="scoreCard">
       <span id="player1Score">0</span>
-    </div>
-    <div class="player-score">
-      <span class="player-name">Player 2:</span>
+
       <span id="player2Score">0</span>
-    </div>
   </div>
+
   <script src="script.js"></script>
   <script src="score.js"></script>
+
 </body>
 </html>
diff --git a/Games/Tennis/script.js b/Games/Tennis/script.js
@@ -91,10 +91,10 @@ function draw() {
   drawBall();
 
   drawPaddles();
-  context.fillStyle = "#ffffff";
-  context.font = "20px Arial";
-  context.fillText("Player 1: " + player1Score, 10, 20);
-  context.fillText("Player 2: " + player2Score, canvas.width - 120, 20);
+  const p1score=document.getElementById("player1Score")
+  p1score.innerHTML=player1Score
+  const p2score=document.getElementById("player2Score")
+  p2score.innerHTML=player2Score
 }
 
 

diff --git a/Games/Tennis/style.css b/Games/Tennis/style.css
@@ -21,7 +21,7 @@ canvas {
   border: 1px solid #fff;
   background-color: #3e931f;
 }
-
+/* 
 .paddle {
   position: absolute;
   display: block;
@@ -39,33 +39,31 @@ canvas {
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
-}
-
-.score-card {
-  width: 300px;
-  background-color: #333;
-  border-radius: 10px;
-  margin-top: 20px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-}
-
-.player-score {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  border-bottom: 1px solid #555;
-}
-
+} */
+/* 
 .player-name {
   margin-right: 10px;
   font-weight: bold;
+} */
+
+#player1Score{
+  position: relative;
+  font-size: 50px;
+  font-weight: bold;
+  color: rgba(255, 0, 0, 0.43);
+  background-color: white;
+  border-radius: 5px;
 }
 
-#player1Score,
 #player2Score {
+  position: relative;
+  font-size: 50px;
   font-weight: bold;
+  color: rgba(0, 0, 255, 0.43);
+  background-color: white;
+  border-radius: 5px;
 }
-
+/* 
 .score-card-title {
   font-size: 24px;
   color: #fff;
@@ -98,4 +96,4 @@ canvas {
 
 .footer a:hover {
   color: #fff;
-}
+} */