diff --git a/Games/Garden-Builder-game/README.md b/Games/Garden-Builder-game/README.md new file mode 100644 index 0000000000..bb47b18e90 --- /dev/null +++ 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 new file mode 100644 index 0000000000..a0c27b70b1 Binary files /dev/null and b/Games/Garden-Builder-game/images/photo10.png differ diff --git a/Games/Garden-Builder-game/images/photo11.png b/Games/Garden-Builder-game/images/photo11.png new file mode 100644 index 0000000000..92f2b93e3a Binary files /dev/null and b/Games/Garden-Builder-game/images/photo11.png differ diff --git a/Games/Garden-Builder-game/images/photo14.png b/Games/Garden-Builder-game/images/photo14.png new file mode 100644 index 0000000000..cce5942366 Binary files /dev/null and b/Games/Garden-Builder-game/images/photo14.png differ diff --git a/Games/Garden-Builder-game/images/photo15.png b/Games/Garden-Builder-game/images/photo15.png new file mode 100644 index 0000000000..a0ab2104a9 Binary files /dev/null and b/Games/Garden-Builder-game/images/photo15.png differ diff --git a/Games/Garden-Builder-game/images/photo16.png b/Games/Garden-Builder-game/images/photo16.png new file mode 100644 index 0000000000..b341187570 Binary files /dev/null and b/Games/Garden-Builder-game/images/photo16.png differ diff --git a/Games/Garden-Builder-game/images/photo17.png b/Games/Garden-Builder-game/images/photo17.png new file mode 100644 index 0000000000..7775d4dc78 Binary files /dev/null and b/Games/Garden-Builder-game/images/photo17.png differ diff --git a/Games/Garden-Builder-game/images/photo1_.png b/Games/Garden-Builder-game/images/photo1_.png new file mode 100644 index 0000000000..17764ffa33 Binary files /dev/null and b/Games/Garden-Builder-game/images/photo1_.png differ diff --git a/Games/Garden-Builder-game/images/photo2_.png b/Games/Garden-Builder-game/images/photo2_.png new file mode 100644 index 0000000000..a2604d71fd Binary files /dev/null and b/Games/Garden-Builder-game/images/photo2_.png differ diff --git a/Games/Garden-Builder-game/images/photo3_.png b/Games/Garden-Builder-game/images/photo3_.png new file mode 100644 index 0000000000..923c0efa58 Binary files /dev/null and b/Games/Garden-Builder-game/images/photo3_.png differ diff --git a/Games/Garden-Builder-game/images/photo4_.png b/Games/Garden-Builder-game/images/photo4_.png new file mode 100644 index 0000000000..d45450aa18 Binary files /dev/null and b/Games/Garden-Builder-game/images/photo4_.png differ diff --git a/Games/Garden-Builder-game/images/photo6.png b/Games/Garden-Builder-game/images/photo6.png new file mode 100644 index 0000000000..a8b11017b6 Binary files /dev/null and b/Games/Garden-Builder-game/images/photo6.png differ diff --git a/Games/Garden-Builder-game/index.html b/Games/Garden-Builder-game/index.html new file mode 100644 index 0000000000..32396f15e0 --- /dev/null +++ b/Games/Garden-Builder-game/index.html @@ -0,0 +1,26 @@ + + + + + + Garden Builder + + + +
+ Add Flower + Add Chair + Add Vegetable + Add Fence2 + Add Decor + Add Fence + Add Fountain + Add Decor + Add Fence + Add Fountain + Add Fountain +
+ + + + diff --git a/Games/Garden-Builder-game/script.js b/Games/Garden-Builder-game/script.js new file mode 100644 index 0000000000..88a62ed222 --- /dev/null +++ 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) + } + } +}); \ No newline at end of file diff --git a/Games/Garden-Builder-game/style.css b/Games/Garden-Builder-game/style.css new file mode 100644 index 0000000000..8c9840ca67 --- /dev/null +++ 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 index 024e9661c4..200f2735aa 100644 --- 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 new file mode 100644 index 0000000000..6439fe33b2 Binary files /dev/null and b/assets/images/GardenBuilder.png differ