html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- Created By: Riya
Created On: 24-Mar-2025 -->
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mystery dish guessing game 🍲🕵️♀️
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Flavor Puzzle: Crack the Yummy Riddle! 🍜🕵️</h2>
<div class="instructions" id="instructions"></div>
<div class="dish-container">
<div id="insideDish"></div>
</div>
<div class="controls">
<button onclick="guessMysteryIngredient()" disabled id="guessMysteryButton" class="disabled">Find the hidden ingredient ❔</button>
<button onclick="guessDish()" disabled id="guessDishButton" class="disabled">Guess the dish 🍽️</button>
<button onclick="restartGame()">🔄 Restart</button>
</div>
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
text-align: center;
font-family: 'Arial', sans-serif;
background: linear-gradient(45deg, #a7a6cb, #8989ba, #6b6bb8, #4f4fa7);
background-size: 300% 300%;
animation: gradientMove 4s ease infinite;
min-height: 100vh;
margin: 15px;
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Luckiest+Guy&display=swap');
h2 {
font-size: 20px;
font-weight:bold;
text-transform: uppercase;
position: relative;
display: inline-block;
font-family: 'Cinzel Decorative', serif;
color:#FDDA0D;
letter-spacing: 2px;
text-shadow:1px 1px 0px #000000,1px 1px 0px #ff4500;
}
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
onload = () => {
const insideDish = document.getElementById("insideDish");
const guessMysteryButton = document.getElementById("guessMysteryButton");
const guessDishButton = document.getElementById("guessDishButton");
const mcqSection = document.getElementById("mcqSection");
const instructions = document.getElementById("instructions");
let ingredientsAdded = 0;
let selectedDish = {};
let mysteryIngredient = null;
swal("🤔 Can you guess the delicious dish? \n", "A dish 🍲 is coming to life—follow the steps carefully and uncover the delicious surprise!🤗🥰", "success");
const music = document.getElementById("music");
music.load();
music.volume = 0.5;
document.addEventListener("click", () => {
music.play();
});
const correctSound = new Audio("https://www.dropbox.com/scl/fi/ym5qedeohdvka0o9uqcrk/Correct-ans.mp3?rlkey=n891f2nyg3p2h4iuvmo5vq44t&st=op5vwxw4&raw=1");
const wrongSound = new Audio("https://www.dropbox.com/scl/fi/bibmx91tpu80tl9js7k4b/Wronganswer.mp3?rlkey=c6kut5u3dhryl4s09kq5cc3pv&st=gexhiqoo&raw=1");
const celebrationSound = new Audio("https://www.dropbox.com/scl/fi/h80yvtauzwskrhrdxowqs/Celebration.mp3?rlkey=zjfsxp5o346suk3vytieo6vjc&st=s208obas&raw=1");
const ingredientNames = {
"🍅": "Tomato",
"🧄": "Garlic",
"🍝": "Pasta",
BROWSER
Console
Uruchom