Certainly! Let's create a simple cooking game where you combine ingredients to make a dish. Cooking Game

Make Vegetable Soup!

Ingredients

Water

Carrot

Potato

Onion

Tomato

Pot

Drag ingredients here!

body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; margin-top: 20px; background-color: #f4f4f4; } h1, h2 { color: #333; } .game-container { display: flex; gap: 40px; margin-bottom: 20px; } #ingredients, #pot { border: 2px solid #ccc; padding: 20px; border-radius: 8px; background-color: #fff; min-width: 200px; } #ingredients { display: flex; flex-direction: column; gap: 10px; } .ingredient { padding: 10px; border: 1px solid #ddd; border-radius: 4px; background-color: #e9e9e9; cursor: grab; text-align: center; } .ingredient:active { cursor: grabbing; } #pot { min-height: 250px; position: relative; } #pot p { text-align: center; color: #666; } #added-ingredients { list-style: none; padding: 0; margin-top: 10px; } #added-ingredients li { background-color: #d4edda; border: 1px solid #c3e6cb; padding: 8px; margin-bottom: 5px; border-radius: 4px; } .drop-target { border: 2px dashed #007bff; } #message { margin-top: 20px; font-size: 1.2em; font-weight: bold; min-height: 1.5em; /* Reserve space */ } button { padding: 10px 15px; margin: 5px; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; } #check-recipe { background-color: #28a745; color: white; } #check-recipe:hover { background-color: #218838; } #reset-game { background-color: #dc3545; color: white; } #reset-game:hover { background-color: #c82333; } const ingredientsList = document.getElementById('ingredients'); const pot = document.getElementById('pot'); const addedIngredientsList = document.getElementById('added-ingredients'); const messageDiv = document.getElementById('message'); const checkRecipeButton = document.getElementById('check-recipe'); const resetButton = document.getElementById('reset-game'); let addedIngredients = []; const recipe = ['water', 'carrot', 'potato']; // Recipe for Vegetable Soup // Make ingredients draggable ingredientsList.querySelectorAll('.ingredient').forEach(ingredient => { ingredient.addEventListener('dragstart', (event) => { event.dataTransfer.setData('text/plain', event.target.dataset.ingredient); // Add a class for visual feedback if needed // event.target.classList.add('dragging'); }); // Optional: remove dragging class on dragend // ingredient.addEventListener('dragend', (event) => { // event.target.classList.remove('dragging'); // }); }); // Allow dropping on the pot pot.addEventListener('dragover', (event) => { event.preventDefault(); // Necessary to allow dropping pot.classList.add('drop-target'); // Visual feedback }); pot.addEventListener('dragleave', () => { pot.classList.remove('drop-target'); // Remove visual feedback }); pot.addEventListener('drop', (event) => { event.preventDefault(); pot.classList.remove('drop-target'); // Remove visual feedback const ingredientName = event.dataTransfer.getData('text/plain'); // Prevent adding duplicates for this simple game if (!addedIngredients.includes(ingredientName)) { addedIngredients.push(ingredientName); const listItem = document.createElement('li'); listItem.textContent = ingredientName.charAt(0).toUpperCase() + ingredientName.slice(1); // Capitalize addedIngredientsList.appendChild(listItem); messageDiv.textContent = `${ingredientName.charAt(0).toUpperCase() + ingredientName.slice(1)} added!`; } else { messageDiv.textContent = `${ingredientName.charAt(0).toUpperCase() + ingredientName.slice(1)} is already in the pot!`; } }); // Check the recipe checkRecipeButton.addEventListener('click', () => { // Sort both arrays to compare easily const sortedAdded = [...addedIngredients].sort(); const sortedRecipe = [...recipe].sort(); // Check if all required ingredients are present and only those if (sortedAdded.length === sortedRecipe.length && sortedAdded.every((value, index) => value === sortedRecipe[index])) { messageDiv.textContent = 'Success! You made Vegetable Soup!'; messageDiv.style.color = 'green'; } else { messageDiv.textContent = 'That\'s not the right recipe for Vegetable Soup!'; messageDiv.style.color = 'red'; } }); // Reset the game resetButton.addEventListener('click', () => { addedIngredients = []; addedIngredientsList.innerHTML = ''; // Clear the list messageDiv.textContent = ''; messageDiv.style.color = ''; // Reset color }); We set up a simple cooking game. Drag the ingredients from the left into the pot on the right. Once you think you have the right ingredients for Vegetable Soup (Water, Carrot, Potato), click "Check Recipe". You can click "Reset" to start over.