Merge pull request kunjgit#2256 from sahaycodes/meme

Meme Battle Game [GSSOC'23]
Tharun-nennavath · Jul 5, 2023 · d71fd10 · d71fd10
2 parents c133e42 + c6ee085
commit d71fd10
Show file tree

Hide file tree

Showing 58 changed files with 822 additions and 0 deletions.
diff --git a/Games/Meme Battle Game/README.md b/Games/Meme Battle Game/README.md
@@ -0,0 +1,56 @@
+# MEME BATTLE GAME 
+---
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+We all know , how memes have affected our lives for the fun. To make it even better how battling out
+with your friends using - Memes for some weird or normal situations . The person who generates more memes related to the situation or the person who generates
+the first 5 memes wins this battle !!!
+- 
+
+## **functionalities 🎮**
+<!-- add functionalities over here -->
+-Dual-Player
+
+-Memes Generation
+
+-Battle Zone 
+
+- 
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+-Click on Generate Button to Generate the Meme for your characters
+
+
+-After that click on Battle Button to Battle Out
+
+
+-The player who generates first 5  memes wins the game
+
+-Message is displayed in a Pop-UP window
+
+-After 10s the Game restarts by emptying the meme containers for both players.
+
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+<!-- add your screenshots like this -->
+<!-- ![image](url) -->
+
+![Screenshot (76)](https://github.com/sahaycodes/GameZone/assets/99585576/4e1e187a-ee96-45f1-ab9c-f64fe4c91bbd)
+
+![Screenshot (75)](https://github.com/sahaycodes/GameZone/assets/99585576/ecf42280-52b1-40e9-b015-8ff14fd78c49)
+
+
+
+<br>
+
+## **Working video 📹**
+<!-- add your working video over here -->
diff --git a/Games/Meme Battle Game/public/BATTLE game (5).png b/Games/Meme Battle Game/public/BATTLE game (5).png
diff --git a/Games/Meme Battle Game/public/cloud.png b/Games/Meme Battle Game/public/cloud.png
diff --git a/Games/Meme Battle Game/public/go1.png b/Games/Meme Battle Game/public/go1.png
diff --git a/Games/Meme Battle Game/public/go2.png b/Games/Meme Battle Game/public/go2.png
diff --git a/Games/Meme Battle Game/public/heart.png b/Games/Meme Battle Game/public/heart.png
diff --git a/Games/Meme Battle Game/public/index.html b/Games/Meme Battle Game/public/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meme Battle Game</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css">
+
+
+
+
+</head>
+<body>
+
+
+
+
+    <section id="game-start" style="display: none;">
+        <h2>Game Start!</h2>
+        <!-- Add your game start background or content here -->
+    </section>
+
+    <div class="clouds">
+        <img class="cloud" src="cloud.png" alt="cloud">
+        <img class="cloud" src="cloud.png" alt="cloud">
+        <img class="cloud" src="cloud.png" alt="cloud">
+    </div>
+
+    <div class="heart">
+        <img class="hearts" src="heart.png" alt="hearts">
+        <img class="hearts" src="heart.png" alt="hearts">
+        <img class="hearts" src="heart.png" alt="hearts">
+        <img class="hearts" src="heart.png" alt="hearts">
+
+    </div>
+
+    <div class="stone">
+        <img class="sto" src="stone.png" alt="stone">
+        <img class="sto" src="stone.png" alt="stone">
+        <img class="sto" src="stone.png" alt="stone">
+        <img class="sto" src="stone.png" alt="stone">
+    </div>
+
+    <div class="go">
+        <img class="ghost" src="go1.png" alt="go">
+        <img class="ghost" src="go2.png" alt="go">
+    </div>
+
+    <h1 class="arcade-gamer-title"> Meme Battle Game </h1>
+
+
+
+
+
+
+
+
+    <div id="situation">
+        <h2>Situation</h2>
+        <p id="situation-text"></p>
+    </div>
+
+    <div id="game-section" style="display: none;">
+        <h2 id="username-display"></h2>
+        <!-- Rest of your game elements -->
+    </div>
+
+    <div id="player1">
+        <h2>ALPHA</h2>
+        <div id="meme-container1">
+            <!--Display memes by Player1-->
+            <img src = "" alt=" "/>
+        </div>
+        <button id="generate-btn1">Generate Meme</button>
+        <button id="battle-btn1">Battle !!</button>
+
+        <p id="player1-score"></p>
+
+
+    </div>
+
+    <div id="player2">
+        <h2>BETA</h2>
+        <div id="meme-container2">
+            <!--Display MEMES BY PLAYER2-->
+            <img src = "" alt =" "/>
+        </div>
+        <button id="generate-btn2">Generate Meme</button>
+        <button id="battle-btn2">Battle !!</button>
+
+        <p id="player2-score"></p>
+
+
+    </div>
+
+    <button id="show-results-btn">Show Battle Results</button>
+
+    <div id="modal-container">
+        <div id="modal-content">
+            <h3>Battle Results</h3>
+            <p id="result-text"></p>
+            <button id="close-modal-btn">Close</button>
+        </div>
+    </div>
+
+
+
+
+
+
+
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.js"></script>
+    <script src="main.js"></script>
+
+
+
+</body>
+</html>