Merge branch 'main' into datajson

.github/CONTRIBUTING_GUIDELINE.md

@@ -90,31 +90,41 @@ If you find this project helpful, please consider giving it a star on GitHub! Yo
 * Note:-All Other data except the ScreenShot of your Game, should be in it's main folder , don't add it to other folders of the project.
 
 <br>
+---
 
-## Add Game to assets/js/gamesData.json
-
-* This is to Show your game on the main Website
-   - Go to the end of gamesData.json and add :
-   - **,**
-         " **No.** ":{
-            "gameTitle" : " **Title** ",
-            "gameUrl": " **Main Folder** ",
-            "thumbnailUrl":" **Preview Image** " 
-         }
-   - **No.**: Number for your Game , it should be the next number with respect to the file. eg: if the last no. in file at present is *625* you should put *626* at the place of **No.**
-   - **Title:** this is the title for your game that will be shown on the website, if your game name is ```Super_Mario_Game``` ,put Title as ```Super Mario Game```
-   - **Main Folder :** This is the reference to *index.html* 
-      - if your index.html is directly in main game folder ,put the main folder name eg: ```Super_Mario_Game```
-      - if your index.html is in subfolder , give path to it 
-      eg: ```Super_Mario_Game/public``` (assuming index.html is in public folder of Super_Mario_Game folder)
-      - if your main html file's name is not index.html , you need to specify the main html file also. eg:```Super_Mario_Game/mario.html``` or if in sub folder ```Super_Mario_Game/public/mario.html```
-   - **Preview Image:** This is the image that will be shown as preview for your game , here you provide the name of the image that you added to **assets/images** folder, along with format type. Eg. ```Super_Mario_Game.png``` or ```Super_Mario_Game.jpg``` or with any other format.
-
-**Note:-** 
-
-   -  Do not modify anything else in the rest of the file, you only need to add your game in the end of the file. 
-   - Don't forget to add the comma for new entry (already give in above sample but this is a reminder as one might miss it to see in the sample)
+## Add Game to `assets/js/gamesData.json`
 
+*This guide will help you add your game to the main website.*
+
+1. **Locate `gamesData.json`:** Go to the end of the `gamesData.json` file.
+
+2. **Add Your Game Data:** Append the following JSON entry at the end of the file:
+   ```json
+   ,
+   "No.": {
+       "gameTitle": "Title",
+       "gameUrl": "Main Folder",
+       "thumbnailUrl": "Preview Image"
+   }
+   ```
+
+   - **No.:** Replace `No.` with the next number in sequence. For example, if the last number in the file is `625`, use `626` for your game.
+
+   - **Title:** Replace `"Title"` with the title of your game as it should appear on the website. For example, if your game is named `Super_Mario_Game`, use `"Super Mario Game"`.
+
+   - **Main Folder:** Replace `"Main Folder"` with the path to your game's main HTML file. If `index.html` is directly in the game's folder, use the folder name (e.g., `"Super_Mario_Game"`). If `index.html` is in a subfolder, specify the path (e.g., `"Super_Mario_Game/public"`). If your main HTML file is not named `index.html`, include the file name (e.g., `"Super_Mario_Game/mario.html"` or `"Super_Mario_Game/public/mario.html"`).
+
+   - **Preview Image:** Replace `"Preview Image"` with the name of the image you added to the `assets/images` folder, including the file format. For example, `"Super_Mario_Game.png"` or `"Super_Mario_Game.jpg"`.
+
+3. **Important Notes:**
+   - **Comma Placement:** Ensure you add a comma before your new entry. This is crucial to maintain valid JSON format. The provided sample includes the comma, but make sure you don’t forget it.
+   - **Trailing Comma:** JSON does not allow trailing commas. Do not add a comma after the last entry. Ensure your new game entry is added before the final closing curly brace of the file.
+   - **File Integrity:** Do not modify any other part of the file. Only add your game entry at the end.
+
+4. **Check if Game Load**
+   - **Open index.html:** After you have added your game to the gamesData.json open index.html of GameZone
+   - **Go To last Page:** Go to the Last page and check if your game is loading along with preview image and when opened ,works properly.
+---
 
 <br>
 

CONTRIBUTING.md

@@ -90,31 +90,42 @@ If you find this project helpful, please consider giving it a star on GitHub! Yo
 * Note:-All Other data except the ScreenShot of your Game, should be in it's main folder , don't add it to other folders of the project.
 
 <br>
+---
 
+## Add Game to `assets/js/gamesData.json`
+
+*This guide will help you add your game to the main website.*
+
+1. **Locate `gamesData.json`:** Go to the end of the `gamesData.json` file.
+
+2. **Add Your Game Data:** Append the following JSON entry at the end of the file:
+   ```json
+   ,
+   "No.": {
+       "gameTitle": "Title",
+       "gameUrl": "Main Folder",
+       "thumbnailUrl": "Preview Image"
+   }
+   ```
+
+   - **No.:** Replace `No.` with the next number in sequence. For example, if the last number in the file is `625`, use `626` for your game.
+
+   - **Title:** Replace `"Title"` with the title of your game as it should appear on the website. For example, if your game is named `Super_Mario_Game`, use `"Super Mario Game"`.
+
+   - **Main Folder:** Replace `"Main Folder"` with the path to your game's main HTML file. If `index.html` is directly in the game's folder, use the folder name (e.g., `"Super_Mario_Game"`). If `index.html` is in a subfolder, specify the path (e.g., `"Super_Mario_Game/public"`). If your main HTML file is not named `index.html`, include the file name (e.g., `"Super_Mario_Game/mario.html"` or `"Super_Mario_Game/public/mario.html"`).
+
+   - **Preview Image:** Replace `"Preview Image"` with the name of the image you added to the `assets/images` folder, including the file format. For example, `"Super_Mario_Game.png"` or `"Super_Mario_Game.jpg"`.
+
+3. **Important Notes:**
+   - **Comma Placement:** Ensure you add a comma before your new entry. This is crucial to maintain valid JSON format. The provided sample includes the comma, but make sure you don’t forget it.
+   - **Trailing Comma:** JSON does not allow trailing commas. Do not add a comma after the last entry. Ensure your new game entry is added before the final closing curly brace of the file.
+   - **File Integrity:** Do not modify any other part of the file. Only add your game entry at the end.
+
+4. **Check if Game Load**
+   - **Open index.html:** After you have added your game to the gamesData.json open index.html of GameZone
+   - **Go To last Page:** Go to the Last page and check if your game is loading along with preview image and when opened ,works properly.
+---
 
-## Add Game to assets/js/gamesData.json
-
-* This is to Show your game on the main Website
-   - Go to the end of gamesData.json and add :
-   - **,**
-         " **No.** ":{
-            "gameTitle" : " **Title** ",
-            "gameUrl": " **Main Folder** ",
-            "thumbnailUrl":" **Preview Image** " 
-         }
-   - **No.**: Number for your Game , it should be the next number with respect to the file. eg: if the last no. in file at present is *625* you should put *626* at the place of **No.**
-   - **Title:** this is the title for your game that will be shown on the website, if your game name is ```Super_Mario_Game``` ,put Title as ```Super Mario Game```
-   - **Main Folder :** This is the reference to *index.html* 
-      - if your index.html is directly in main game folder ,put the main folder name eg: ```Super_Mario_Game```
-      - if your index.html is in subfolder , give path to it 
-      eg: ```Super_Mario_Game/public``` (assuming index.html is in public folder of Super_Mario_Game folder)
-      - if your main html file's name is not index.html , you need to specify the main html file also. eg:```Super_Mario_Game/mario.html``` or if in sub folder ```Super_Mario_Game/public/mario.html```
-   - **Preview Image:** This is the image that will be shown as preview for your game , here you provide the name of the image that you added to **assets/images** folder, along with format type. Eg. ```Super_Mario_Game.png``` or ```Super_Mario_Game.jpg``` or with any other format.
-
-**Note:-** 
-
-   -  Do not modify anything else in the rest of the file, you only need to add your game in the end of the file. 
-   - Don't forget to add the comma for new entry (already give in above sample but this is a reminder as one might miss it to see in the sample)
 <br>
 ## **Pull Request Process 🚀**
 

Games/Airhocky_game/README.md

@@ -0,0 +1,23 @@
+# **Game_Name** 
+
+Airhockey_game
+
+<br>
+
+## **Description 📃**
+- game involves simulating the movement and interactions of the puck and mallets on a table.
+
+## **functionalities 🎮**
+- this game is played by just moving your cursor or mouse around and score a goal. providing a challenging experience for the player against the computer-controlled opponent.
+<br>
+
+## **How to play? 🕹️**
+-Start the Game
+Score Goals
+Defend Your Goal
+<br>
+
+## **Screenshots 📸**
+
+<br>
+[image](GameZone\Games\Airhocky_game\airhockey_game.png)

Games/Airhocky_game/game.js

@@ -0,0 +1,155 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+const WIDTH = canvas.width;
+const HEIGHT = canvas.height;
+const PUCK_RADIUS = 15;
+const MALLET_RADIUS = 30;
+const FRICTION = 0.99;
+const GOAL_WIDTH = 200;
+const GOAL_HEIGHT = 40;
+const MAX_SPEED = 10;
+
+let puck = { x: WIDTH / 2, y: HEIGHT / 2, vx: 0, vy: 0 };
+let mallet1 = { x: WIDTH / 4, y: HEIGHT / 2 };
+let mallet2 = { x: 3 * WIDTH / 4, y: HEIGHT / 2 };
+let playerScore = 0;
+let computerScore = 0;
+
+canvas.addEventListener('mousemove', (event) => {
+    mallet1.x = event.offsetX;
+    mallet1.y = event.offsetY;
+    mallet1.x = Math.min(Math.max(mallet1.x, MALLET_RADIUS), WIDTH - MALLET_RADIUS);
+    mallet1.y = Math.min(Math.max(mallet1.y, MALLET_RADIUS), HEIGHT - MALLET_RADIUS);
+});
+
+function drawCircle(x, y, radius, color) {
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, Math.PI * 2);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawRectangle(x, y, width, height, color) {
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.closePath();
+}
+
+function drawLine(x1, y1, x2, y2, color) {
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 5;
+    ctx.stroke();
+    ctx.closePath();
+}
+
+function updatePuck() {
+    puck.x += puck.vx;
+    puck.y += puck.vy;
+    puck.vx *= FRICTION;
+    puck.vy *= FRICTION;
+
+    // Ensure speed does not exceed maximum
+    let speed = Math.sqrt(puck.vx * puck.vx + puck.vy * puck.vy);
+    if (speed > MAX_SPEED) {
+        puck.vx *= MAX_SPEED / speed;
+        puck.vy *= MAX_SPEED / speed;
+    }
+
+    // Ensure puck does not move out of the borders
+    if (puck.x < PUCK_RADIUS) {
+        puck.x = PUCK_RADIUS;
+        puck.vx = -puck.vx;
+    }
+    if (puck.x > WIDTH - PUCK_RADIUS) {
+        puck.x = WIDTH - PUCK_RADIUS;
+        puck.vx = -puck.vx;
+    }
+    if (puck.y < PUCK_RADIUS) {
+        puck.y = PUCK_RADIUS;
+        puck.vy = -puck.vy;
+    }
+    if (puck.y > HEIGHT - PUCK_RADIUS) {
+        puck.y = HEIGHT - PUCK_RADIUS;
+        puck.vy = -puck.vy;
+    }
+
+    if (puck.x <= PUCK_RADIUS && (puck.y > HEIGHT / 2 - GOAL_WIDTH / 2 && puck.y < HEIGHT / 2 + GOAL_WIDTH / 2)) {
+        computerScore++;
+        resetPuck();
+    }
+
+    if (puck.x >= WIDTH - PUCK_RADIUS && (puck.y > HEIGHT / 2 - GOAL_WIDTH / 2 && puck.y < HEIGHT / 2 + GOAL_WIDTH / 2)) {
+        playerScore++;
+        resetPuck();
+    }
+}
+
+function resetPuck() {
+    puck.x = WIDTH / 2;
+    puck.y = HEIGHT / 2;
+    puck.vx = 0;
+    puck.vy = 0;
+}
+
+function checkCollisionWithMallet(mallet) {
+    let dx = puck.x - mallet.x;
+    let dy = puck.y - mallet.y;
+    let distance = Math.sqrt(dx * dx + dy * dy);
+
+    if (distance < PUCK_RADIUS + MALLET_RADIUS) {
+        let angle = Math.atan2(dy, dx);
+        puck.vx = Math.cos(angle) * 5;
+        puck.vy = Math.sin(angle) * 5;
+
+        // Move puck out of collision
+        let overlap = PUCK_RADIUS + MALLET_RADIUS - distance;
+        puck.x += Math.cos(angle) * overlap;
+        puck.y += Math.sin(angle) * overlap;
+    }
+}
+
+function updateComputerMallet() {
+    let dx = puck.x - mallet2.x;
+    let dy = puck.y - mallet2.y;
+
+    // Simplified AI: Move towards the puck
+    mallet2.x += dx * 0.05;
+    mallet2.y += dy * 0.05;
+
+    // Restrict to the table
+    mallet2.x = Math.min(Math.max(mallet2.x, MALLET_RADIUS), WIDTH - MALLET_RADIUS);
+    mallet2.y = Math.min(Math.max(mallet2.y, MALLET_RADIUS), HEIGHT - MALLET_RADIUS);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    drawRectangle(0, HEIGHT / 2 - GOAL_WIDTH / 2, GOAL_HEIGHT, GOAL_WIDTH, '#00ff00');
+    drawRectangle(WIDTH - GOAL_HEIGHT, HEIGHT / 2 - GOAL_WIDTH / 2, GOAL_HEIGHT, GOAL_WIDTH, '#00ff00');
+    drawLine(WIDTH / 2, 0, WIDTH / 2, HEIGHT, '#ffffff');
+
+    drawCircle(puck.x, puck.y, PUCK_RADIUS, '#ff0000');
+    drawCircle(mallet1.x, mallet1.y, MALLET_RADIUS, '#00ff00');
+    drawCircle(mallet2.x, mallet2.y, MALLET_RADIUS, '#0000ff');
+
+    updatePuck();
+    checkCollisionWithMallet(mallet1);
+    checkCollisionWithMallet(mallet2);
+    updateComputerMallet();
+
+    ctx.font = "20px Arial";
+    ctx.fillStyle = "#ffffff";
+    ctx.fillText(`Player: ${playerScore}`, 20, 30);
+    ctx.fillText(`Computer: ${computerScore}`, WIDTH - 150, 30);
+
+    requestAnimationFrame(draw);
+}
+
+draw();

Games/Airhocky_game/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Air Hockey Game</title>
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #1e1e1e;
+            color: #ffffff;
+            margin: 0;
+            font-family: Arial, sans-serif;
+        }
+        canvas {
+            background-color: #2c2c2c;
+            border: 5px solid #ffffff;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="gameCanvas" width="800" height="400"></canvas>
+    <script src="game.js"></script>
+</body>
+</html>
+

Games/Anagram_Checker_Game/about.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About Anagram Checker Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1 align="center">About Anagram Checker Game</h1>
+    <div class="container">
+        <p>This Anagram Checker Game allows you to check if two words are anagrams of each other. An anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once.</p>
+
+        <h2>Features:</h2>
+        <ul>
+            <li>Simple and intuitive interface</li>
+            <li>Quickly check if two words are anagrams</li>
+            <li>Learn about anagrams and how they work</li>
+        </ul>
+
+        <h2>About Us:</h2>
+        <p>We are dedicated to creating fun and educational games that challenge your mind and expand your knowledge of language and literature.</p>
+
+        <h2>Contact Us:</h2>
+        <p>If you have any questions or feedback about the Anagram Checker Game, feel free to reach out to us at <a href="mailto:[email protected]">[email protected]</a>.</p>
+
+        <p>Follow us on social media for updates and more games!</p>
+        <ul>
+            <li><a href="#">Facebook</a></li>
+            <li><a href="#">Twitter</a></li>
+            <li><a href="#">Instagram</a></li>
+        </ul>
+
+        <p>Thank you for playing!</p>
+    </div>
+</body>
+</html>