Merge pull request #5023 from its-kritika/main

New Game #4246
kunjgit · Jul 31, 2024 · 5faa5ef · 5faa5ef
2 parents 7eeb112 + 36540be
commit 5faa5ef
Show file tree

Hide file tree

Showing 17 changed files with 226 additions and 0 deletions.
diff --git a/Games/Garden-Builder-game/README.md b/Games/Garden-Builder-game/README.md
@@ -0,0 +1,21 @@
+# Garden Builder Game
+
+## Description
+Garden Builder is a game for kids where they create and manage their own virtual garden, designing landscapes with various elements like flowers, fountains, and fences. Enhance your creativity and build the garden of your dreams!
+
+
+## Functionality
+- Item Selection: Select different types of items from a menu or toolbar to add to your garden.
+- Item Placement: Click on the canvas to place various garden items such as flowers, vegetables, fences, and decor.
+- Drag and Drop: Drag items around the garden to rearrange them as desired.
+- Perspective View: Simulate a 3D effect to give depth and realism to the garden scene.
+- Rotation: Rotate items to achieve the perfect arrangement and view.
+
+## How to Play
+- Open the `index.html` file in a web browser.
+- Start creating your garden!
+
+## Files
+- `index.html`: The main HTML file that sets up the structure of the game.
+- `styles.css`: The CSS file that styles the game.
+- `script.js`: The JavaScript file that contains the game logic.
diff --git a/Games/Garden-Builder-game/images/photo10.png b/Games/Garden-Builder-game/images/photo10.png
diff --git a/Games/Garden-Builder-game/images/photo11.png b/Games/Garden-Builder-game/images/photo11.png
diff --git a/Games/Garden-Builder-game/images/photo14.png b/Games/Garden-Builder-game/images/photo14.png
diff --git a/Games/Garden-Builder-game/images/photo15.png b/Games/Garden-Builder-game/images/photo15.png
diff --git a/Games/Garden-Builder-game/images/photo16.png b/Games/Garden-Builder-game/images/photo16.png
diff --git a/Games/Garden-Builder-game/images/photo17.png b/Games/Garden-Builder-game/images/photo17.png
diff --git a/Games/Garden-Builder-game/images/photo1_.png b/Games/Garden-Builder-game/images/photo1_.png
diff --git a/Games/Garden-Builder-game/images/photo2_.png b/Games/Garden-Builder-game/images/photo2_.png
diff --git a/Games/Garden-Builder-game/images/photo3_.png b/Games/Garden-Builder-game/images/photo3_.png
diff --git a/Games/Garden-Builder-game/images/photo4_.png b/Games/Garden-Builder-game/images/photo4_.png
diff --git a/Games/Garden-Builder-game/images/photo6.png b/Games/Garden-Builder-game/images/photo6.png
diff --git a/Games/Garden-Builder-game/index.html b/Games/Garden-Builder-game/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Garden Builder</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="button-container" >
+        <img src="images/photo3_.png" alt="Add Flower" onclick="selectItem('flower')">
+        <img src="images/photo4_.png" alt="Add Chair" onclick="selectItem('mix')">
+        <img src="images/photo10.png" alt="Add Vegetable" onclick="selectItem('vegetable')">
+        <img src="images/photo1_.png" alt="Add Fence2" onclick="selectItem('whitefence')">
+        <img src="images/photo2_.png" alt="Add Decor" onclick="selectItem('decor')">
+        <img src="images/photo6.png" alt="Add Fence" onclick="selectItem('fence')">
+        <img src="images/photo11.png" alt="Add Fountain" onclick="selectItem('fountain')">
+        <img src="images/photo14.png" alt="Add Decor" onclick="selectItem('foun')">
+        <img src="images/photo15.png" alt="Add Fence" onclick="selectItem('pavement')">
+        <img src="images/photo16.png" alt="Add Fountain" onclick="selectItem('road')">
+        <img src="images/photo17.png" alt="Add Fountain" onclick="selectItem('fourroad')">
+    </div>
+    <canvas id="garden" width="1485" height="645"></canvas>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Garden-Builder-game/script.js b/Games/Garden-Builder-game/script.js
@@ -0,0 +1,154 @@
+const canvas = document.getElementById('garden');
+const ctx = canvas.getContext('2d');
+let selectedItem = null;
+let items = []; // Array to hold placed items
+let draggedItem = null;
+let offsetX, offsetY;
+let currItem = null;
+
+// Load images
+const images = {
+    flower: new Image(),
+    mix: new Image(),
+    vegetable: new Image(),
+    fence: new Image(),
+    whitefence: new Image(),
+    decor: new Image(),
+    fountain: new Image(),
+    foun: new Image(),
+    road: new Image(),
+    pavement: new Image(),
+    fourroad: new Image()
+};
+
+// Set the source for each image
+images.flower.src = 'images/photo3_.png';
+images.mix.src = 'images/photo4_.png';
+images.vegetable.src = 'images/photo10.png';
+images.fence.src = 'images/photo6.png';
+images.decor.src = 'images/photo2_.png';
+images.whitefence.src = 'images/photo1_.png';
+images.fountain.src = 'images/photo11.png';
+images.foun.src = 'images/photo14.png';
+images.pavement.src = 'images/photo15.png';
+images.road.src = 'images/photo16.png';
+images.fourroad.src = 'images/photo17.png';
+
+// Define the desired width and height for each item
+const itemSize = {
+    flower: { width: 180, height: 150 },
+    mix: { width: 180, height: 150 },
+    vegetable: { width: 210, height: 200 },
+    fence: { width: 200, height: 50 },
+    whitefence: { width: 200, height: 50 },
+    decor: { width: 200, height: 150 },
+    fountain: { width: 150, height: 180 },
+    foun: { width: 200, height: 150 },
+    fourroad: { width: 180, height: 130 },
+    pavement: { width: 180, height: 130 },
+    road: { width: 150, height: 130 },
+};
+
+// Function to set the selected item
+function selectItem(itemType) {
+    selectedItem = itemType;
+}
+
+// Function to draw all items on the canvas
+function drawItems() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+    items.forEach(item => {
+        const size = itemSize[item.type];
+        ctx.save(); // Save the current state
+        ctx.translate(item.x + size.width / 2, item.y + size.height / 2); // Move to the center of the item
+        ctx.rotate(item.rotation); // Rotate the canvas
+        ctx.drawImage(images[item.type], -size.width / 2, -size.height / 2, size.width, size.height); // Draw the item
+        ctx.restore(); // Restore the previous state
+    });
+}
+
+// Function to place the selected item on the canvas
+function placeItem(x, y) {
+    if (selectedItem && images[selectedItem]) {
+        const size = itemSize[selectedItem];
+        let height = size.height;
+        if ((selectedItem === 'fence' || selectedItem === 'whitefence') && (currItem !== 'fence' || currItem === 'whitefence')) {
+            height = 200;
+        }
+
+        // Check if there is already an item at the position
+        const existingItem = items.find(item => {
+            return x >= item.x + 10 && x <= item.x + size.width &&
+                y >= item.y + 10 && y <= item.y + height;
+        });
+
+        if (!existingItem) {
+            items.push({ type: selectedItem, x: x - size.width / 2, y: y - size.height / 2, rotation: 0 });
+            drawItems();
+        }
+    }
+}
+
+// Function to rotate the selected item by a specified angle
+function rotateItem(item, angle) {
+    item.rotation += angle;
+    drawItems(); // Redraw the items with the updated rotation
+}
+
+// Event listener for canvas clicks to place items
+canvas.addEventListener('click', function(event) {
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    if (!draggedItem) {
+        placeItem(x, y);
+    }
+});
+
+// Event listener for mouse down to start dragging
+canvas.addEventListener('mousedown', function(event) {
+    const rect = canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+
+    draggedItem = items.find(item => {
+        const size = itemSize[item.type];
+        return x >= item.x && x <= item.x + size.width &&
+            y >= item.y && y <= item.y + size.height;
+    });
+
+    if (draggedItem) {
+        currItem = draggedItem;
+        offsetX = x - draggedItem.x;
+        offsetY = y - draggedItem.y;
+    }
+});
+
+// Event listener for mouse move to drag item
+canvas.addEventListener('mousemove', function(event) {
+    if (draggedItem) {
+        const rect = canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        draggedItem.x = x - offsetX;
+        draggedItem.y = y - offsetY;
+        drawItems(); // Redraw all items including the moved one
+    }
+});
+
+// Event listener for mouse up to stop dragging
+canvas.addEventListener('mouseup', function() {
+    draggedItem = null;
+});
+
+// Event listener for rotating the current item with keyboard keys
+document.addEventListener('keydown', function(event) {
+    if (currItem) {
+        if (event.key === 'ArrowRight') { // Rotate right
+            rotateItem(currItem, Math.PI / 16); // Rotate by a smaller angle (22.5 degrees)
+        } else if (event.key === 'ArrowLeft') { // Rotate left
+            rotateItem(currItem, -Math.PI / 16); // Rotate by a smaller angle (-22.5 degrees)
+        }
+    }
+});
diff --git a/Games/Garden-Builder-game/style.css b/Games/Garden-Builder-game/style.css
@@ -0,0 +1,24 @@
+body {
+    text-align: center;
+    background-color: #f0f0f0;
+    font-family: Arial, sans-serif;
+    margin: 0;
+}
+
+#toolbar {
+    margin-bottom: 10px;
+}
+
+canvas {
+    border: 1px solid #000;
+    background-color: #8FBC8F;
+}
+.button-container img {
+    cursor: pointer;
+    width: 77px; 
+    height: 72px; 
+    margin: 5px;
+    border: 2px solid #000;
+    border-radius: 50%;
+    object-fit: contain;
+}
diff --git a/README.md b/README.md
@@ -1675,6 +1675,7 @@ This repository also provides one such platforms where contributers come over an
 
 
 |[Pokemon_Adventure_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Pokemon_Adventure_Game)|
+|[Garden-Builder-game](https://github.com/kunjgit/GameZone/tree/main/Games/Garden-Builder-game)|
 
 | [Airhockey_game](https://github.com/kunjgit/GameZone/tree/main/Games/Airhockey_game)|
 

diff --git a/assets/images/GardenBuilder.png b/assets/images/GardenBuilder.png
Original file line number	Diff line number	Diff line change
Expand Up		@@ -1675,6 +1675,7 @@ This repository also provides one such platforms where contributers come over an


		\|[Pokemon_Adventure_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Pokemon_Adventure_Game)\|
		\|[Garden-Builder-game](https://github.com/kunjgit/GameZone/tree/main/Games/Garden-Builder-game)\|

		\| [Airhockey_game](https://github.com/kunjgit/GameZone/tree/main/Games/Airhockey_game)\|

Expand Down