-
Notifications
You must be signed in to change notification settings - Fork 0
/
melons.html
141 lines (123 loc) · 5.11 KB
/
melons.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width" />
<meta name="Author" content="Michael Tripp">
<meta name="Description" content="Picture gallery for melons.">
<title>Melon Mall</title>
<script>
/*
* Variables
*/
let melonsEaten = 0;
let melonId;
let eatenText;
let eating = false;
// Text options that show up after all the melon has been eaten (clicked)
let eatenTextOptions = [
"Yummmmmm. Delicious melon :)",
"Now THAT was CRUNCHY!",
"Mmmmmmm bring me more!",
"I'm so full...",
"Delicious.. I feel so hydrated!!",
"Oh no you ate them all :(",
"Aw man they are all gone :(",
"Just can't get enough!"
];
let munchSounds = [
new Audio("audio/crunch1.mp3"),
new Audio("audio/crunch2.mp3"),
new Audio("audio/crunch3.mp3"),
new Audio("audio/slurp.mp3"),
new Audio("audio/smack.mp3")
];
let regenSound = new Audio("audio/regenerate.mp3");
/*
* Functions
*/
// Plays a button click sound (#2)
function playClick2() {
new Audio("audio/buttonclick1.mp3").play();
}
// "Regenerates" all the melon images on the page by unhiding them
function regenerate() {
// Play sfx
playClick2();
playRegenSound();
// Erase eaten text and reset melons eaten
document.getElementById("eaten-text").innerHTML = "";
melonsEaten = 0;
// Unhide all melon images and fade them back in
for(let i = 1; i <= 8; i++) {
melonId = `melon${i}`;
document.getElementById(melonId).hidden = false;
document.getElementById(melonId).className = "fade-in-img";
}
}
function playRegenSound() {
regenSound.play();
}
function playMunchSound() {
let munchSound = munchSounds[Math.floor(Math.random() * munchSounds.length)]; // Choose random munch sound
munchSound.play();
eating = true;
setTimeout(() => {
eating = false;
}, 750);
}
// "Eats a melon" by hiding the melon image the user clicks. Also adds text + regenerate button upon eating all melons
function eat(clicked_id) {
if(!eating) {
playMunchSound();
document.getElementById(clicked_id).hidden = true;
melonsEaten += 1;
eatenText = eatenTextOptions[Math.floor(Math.random() * eatenTextOptions.length)]
if (melonsEaten === 8) {
document.getElementById("eaten-text").innerHTML = `${eatenText} <br><br> <button onclick="regenerate()">Regenerate Melons</button>`;
}
}
}
</script>
</head>
<body>
<div id="title" class="header">
<h1>Melon Mall</h1>
</div>
<div class="topnav">
<a class="image" href="spinner.html"><img class="navimg" src="images\watermelon-slice.png" alt="watermelon slice" style="height:1.3em;"></a>
<a class="regular" href="home.html">Home</a>
<a class="regular" href="about.html">About</a>
<a class="regular" href="melons.html">Melons</a>
</div>
<main>
<div class="row">
<div class="leftcolumn">
<div class="contentleft">
<h2>Eat Me!</h2>
<p id="eaten-text"></p>
<section>
<img id="melon2" onclick="eat(this.id)" src="images\melon2.jpg" alt="Watermelon" style="height:12em;">
<img id="melon3" onclick="eat(this.id)" src="images\melon3.jpg" alt="Watermelon" style="height:12em;">
</section>
<section>
<img id="melon4" onclick="eat(this.id)" src="images\melon4.jpg" alt="Canteloupe" style="height:12em;">
<img id="melon5" onclick="eat(this.id)" src="images\melon5.jpg" alt="Canteloupe" style="height:12em;">
</section>
<section>
<img id="melon6" onclick="eat(this.id)" src="images\melon6.jpg" alt="Honeydew" style="height:12em;">
<img id="melon7" onclick="eat(this.id)"src="images\melon7.jpg" alt="Honeydew" style="height:12em;">
</section>
<section>
<img id="melon8" onclick="eat(this.id)" src="images\melon1.jpg" alt="Watermelon" style="height:12em;">
<img id="melon1" onclick="eat(this.id)" src="images\melon1.webp" alt="Watermelon" style="height:12em;">
</section>
</div>
</div>
</div>
</main>
<div class="footer">
<p>©Copyright 2050 by melons. All rights to Melon Lord.</p>
</div>
</body>
</html>