Added Movie Guessing Game · Rupa-Rd/30DaysOfJavaScript@311fcb6 · GitHub
Skip to content

Commit 311fcb6

Browse files
codewithganeshhhcodewithganeshhh
committed
Added Movie Guessing Game
1 parent 7eb1044 commit 311fcb6

6 files changed

Lines changed: 308 additions & 0 deletions

File tree

‎114 - Movie Guessing Game/index.html‎

Lines changed: 44 additions & 0 deletions

‎114 - Movie Guessing Game/readme.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# **Movie_Guessing_Game**
2+
3+
---
4+
5+
<br>
6+
7+
## **Description 📃**
8+
This is a game based on guessing. A user will have to guess the movie name by carefully observing the emojis which
9+
corresponds to a particular movie.
10+
-
11+
12+
## **functionalities 🎮**
13+
The user will have different letters by which he can guess the movie's name.
14+
Fully responsive.
15+
16+
-
17+
<br>
18+
19+
## **How to play? 🕹️**
20+
The user has to simply press the letters which forms a movie's name and if he guesses it correctly then he will win the game and if not so then he will lose the game.
21+
-
22+
23+
<br>
24+
25+
## **Screenshots 📸**
26+
27+
<br>
28+
29+
![image](../../assets/images/Movie_Guessing_Game.png)
30+
31+
<br>
32+
33+
## **Working video 📹**
34+
<!-- add your working video over here -->

‎114 - Movie Guessing Game/script.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
const moviesObject = {
2+
"🕷️🚶‍♂️🏠💦": "Spiderman Homecoming",
3+
"👩‍❤️‍👨🚢🥶": "Titanic",
4+
"👸👹🌹": "Beauty And The Beast",
5+
"🐜👨 ": "Antman",
6+
"🧙👓⚡": "Harry Potter",
7+
"🖊️📓👩‍❤️‍👨": "The notebook",
8+
"🦇🃏 ": "Joker",
9+
"👻👻🔫": "Ghostbusters",
10+
"😈👗👠": "Devil Wears Prada",
11+
"🎉🍺🎊❎": "This Is the End",
12+
"🔍🐟 ": "Finding Nemo",
13+
"👸📔 ": "Princess Diaries",
14+
"🐔🏃 ": "Chicken Run",
15+
};
16+
const container = document.querySelector(".container");
17+
const controls = document.querySelector(".controls-container");
18+
const startButton = document.getElementById("start");
19+
const letterContainer = document.getElementById("letter-container");
20+
const userInputSection = document.getElementById("userInputSection");
21+
const resultText = document.getElementById("result");
22+
const hints = Object.keys(moviesObject);
23+
let randomHint = "",
24+
randomWord = "";
25+
let winCount = 0,
26+
lossCount = 5;
27+
const generateRandomValue = (array) => Math.floor(Math.random() * array.length);
28+
//Blocker
29+
const blocker = () => {
30+
let letterButtons = document.querySelectorAll(".letters");
31+
letterButtons.forEach((button) => {
32+
button.disabled = true;
33+
});
34+
stopGame();
35+
};
36+
//Start game
37+
startButton.addEventListener("click", () => {
38+
//Controls and buttons visibility
39+
controls.classList.add("hide");
40+
init();
41+
});
42+
//Stop Game
43+
const stopGame = () => {
44+
controls.classList.remove("hide");
45+
};
46+
//Generate Word
47+
const generateWord = () => {
48+
letterContainer.classList.remove("hide");
49+
userInputSection.innerText = "";
50+
randomHint = hints[generateRandomValue(hints)];
51+
randomWord = moviesObject[randomHint];
52+
container.innerHTML = `<div id="movieHint">${randomHint}</div>`;
53+
let displayItem = "";
54+
randomWord.split("").forEach((value) => {
55+
if (value == " ") {
56+
winCount += 1;
57+
displayItem += `<span class="inputSpace">&nbsp;</span>`;
58+
} else {
59+
displayItem += `<span class="inputSpace">_</span>`;
60+
}
61+
});
62+
userInputSection.innerHTML = displayItem;
63+
};
64+
//Initial Function
65+
const init = () => {
66+
winCount = 0;
67+
lossCount = 5;
68+
document.getElementById(
69+
"chanceCount"
70+
).innerHTML = `<span>Tries Left:</span>${lossCount}`;
71+
randomHint = null;
72+
randomWord = "";
73+
userInputSection.innerHTML = "";
74+
letterContainer.classList.add("hide");
75+
letterContainer.innerHTML = "";
76+
generateWord();
77+
for (let i = 65; i < 91; i++) {
78+
let button = document.createElement("button");
79+
button.classList.add("letters");
80+
//Number to ASCII [A - Z]
81+
button.innerText = String.fromCharCode(i);
82+
//Character button click
83+
button.addEventListener("click", () => {
84+
let charArray = randomWord.toUpperCase().split("");
85+
let inputSpace = document.getElementsByClassName("inputSpace");
86+
if (charArray.includes(button.innerText)) {
87+
charArray.forEach((char, index) => {
88+
if (char === button.innerText) {
89+
button.classList.add("used");
90+
inputSpace[index].innerText = char;
91+
winCount += 1;
92+
if (winCount == charArray.length) {
93+
resultText.innerHTML = " Congratulations!! You Won";
94+
blocker();
95+
}
96+
}
97+
});
98+
} else {
99+
lossCount -= 1;
100+
document.getElementById(
101+
"chanceCount"
102+
).innerHTML = `<span>Tries Left:</span> ${lossCount}`;
103+
button.classList.add("used");
104+
if (lossCount == 0) {
105+
resultText.innerHTML = "Sorry! You lost the game";
106+
blocker();
107+
}
108+
}
109+
button.disabled = true;
110+
});
111+
letterContainer.appendChild(button);
112+
}
113+
};
114+
window.onload = () => {
115+
init();
116+
};

‎114 - Movie Guessing Game/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Open Sans', sans-serif;
6+
}
7+
8+
body {
9+
margin: 0;
10+
padding: 0;
11+
height: 100vh;
12+
background: linear-gradient(135deg, #5af3f5ac, rgba(65, 127, 220, 0.801));
13+
overflow: hidden;
14+
}
15+
16+
.wrapper {
17+
width: 90%;
18+
max-width: 500px;
19+
position: absolute;
20+
transform: translate(-50%, -50%);
21+
left: 50%;
22+
top: 50%;
23+
background-color: #ffffff;
24+
padding: 5em 3em;
25+
border-radius: 0.8em;
26+
}
27+
28+
.num-of-tries-left {
29+
text-align: right;
30+
margin-bottom: 2em;
31+
}
32+
33+
.num-of-chances-left span {
34+
font-weight: 600;
35+
}
36+
37+
.container {
38+
font-size: 1.87em;
39+
display: flex;
40+
justify-content: space-around;
41+
}
42+
43+
#letter-container {
44+
margin: 2em 0 3em 0;
45+
display: flex;
46+
flex-wrap: wrap;
47+
justify-content: center;
48+
gap: 10px;
49+
}
50+
51+
.letters {
52+
width: 2em;
53+
height: 2em;
54+
font-size: 20px;
55+
background-color: #cad496;
56+
border: 2px solid #8254fd;
57+
border-radius: 3em;
58+
color: #080a0c;
59+
cursor: pointer;
60+
}
61+
62+
#userInputSection {
63+
display: flex;
64+
justify-content: center;
65+
gap: 0.5em;
66+
}
67+
68+
.controls-container {
69+
position: absolute;
70+
display: flex;
71+
align-items: center;
72+
justify-content: center;
73+
flex-direction: column;
74+
background: linear-gradient(#705da8, #aaa0c5);
75+
height: 100vh;
76+
width: 100vw;
77+
top: 0;
78+
left: 0;
79+
}
80+
81+
#start {
82+
background-color: #ffffffb0;
83+
font-size: 1.4em;
84+
padding: 0.8em 2em;
85+
border-radius: 3em;
86+
cursor: pointer;
87+
transition: 0.1s;
88+
}
89+
90+
#start:hover {
91+
background-color: rgb(137, 230, 119);
92+
border: 2px solid rgba(121, 40, 235, 0.829);
93+
}
94+
95+
.hide {
96+
display: none;
97+
}
98+
99+
.used {
100+
background-color: #f5f5f5;
101+
border-color: #9e9ea6;
102+
color: #9e9ea6;
103+
}

‎30DaysOfJavaScript/assets/114 - Movie guessing game.png‎

396 KB
Loading

‎index.html‎

Lines changed: 11 additions & 0 deletions

0 commit comments

Comments
 (0)