.img-mask {
background: url(https://alexandrevacassin.fr/codepen/puzzle/fond.png) no-repeat
center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100vw;
height: 100vh;
position: fixed;
pointer-events: none;
z-index: 5;
}
.img-mask-win {
background: url(https://alexandrevacassin.fr/codepen/puzzle/fond-win.jpg)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100vw;
height: 100vh;
position: fixed;
pointer-events: none;
z-index: 0;
}
.img-mask-loose {
background: url(https://alexandrevacassin.fr/codepen/puzzle/fond-loose.jpg)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100vw;
height: 100vh;
position: fixed;
pointer-events: none;
z-index: 0;
}
body {
font-family: "Source Code Pro", monospace;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
height: 100vh;
}
.magic-word {
vertical-align: middle;
border-style: none;
margin-left: auto;
margin-right: auto;
display: none;
margin-top: 10%;
}
#canvas {
display: none;
}
#timer {
font-size: 3rem;
font-family: "Source Code Pro", monospace;
text-align: center;
color: red;
text-shadow: 0 0 5px red, 0 0 10px red;
}
#question1 {
}
h1 {
font-size: 1.5rem;
}
.title {
text-align: center;
font-size: 2.3em;
width: 75%;
}
.usedLetters {
right: 0;
display: none;
}
.usedLetter {
display: none;
width: 50px;
height: 50px;
margin-bottom: 10px;
margin-right: 10px;
padding: 2px 2px;
font-size: 30px;
color: #fff;
text-align: center;
background: red;
border-radius: 50px;
}
.letters {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border-radius: 24px;
padding: 30px;
background: rgba(0, 0, 0, 0.5);
width: 100%;
max-width: 560px;
}
.hint {
text-align: center;
}
.letter {
padding: 5px;
margin-bottom: 10px;
margin-right: 10px;
text-align: center;
background: rgb(45, 45, 45);
width: 40px;
height: 40px;
font-size: 20px;
cursor: pointer;
border-radius: 10px;
color: white;
font-family: "Roboto", sans-serif;
text-transform: uppercase;
}
.letter:hover {
background: rgb(75, 75, 75);
}
.board {
width: 100%;
height: 20vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.secretWord {
margin-top: 24px;
margin-bottom: 24px;
}
.password {
margin-top: 50px;
}
.char {
font-size: 2rem;
}
.finishText {
font-size: 1.3em;
text-align: center;
margin-bottom: 24px;
width: 100%;
}
#start {
height: 100vh;
}
.restartBtn {
border: 2px solid #6cacc5;
background: rgba(42, 50, 113, 0.28);
padding: 2% 2%;
width: 300px;
text-align: center;
position: absolute;
margin: 0 auto;
margin-top: 0px;
left: 0;
right: 0;
cursor: pointer;
font-size: 2em;
margin-top: 300px;
}
.restartBtn:hover {
background: rgba(42, 50, 113, 0.5);
}
.intro {
position: fixed;
background: rgba(0, 0, 0, 1);
height: 100vh;
width: 100vw;
z-index: 1;
}
.questionsContainer {
position: fixed;
height: 100vh;
width: 100vw;
}
/* merge with above css */
.video-darken {
position: fixed;
background: rgba(0, 0, 0, 0.6);
height: 100vh;
width: 100vw;
}
iframe {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
.console-container {
width: 75%;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 16px;
text-align: center;
margin-top: 24px;
margin-bottom: 32px;
}
.btn-default {
background: white;
border: none;
cursor: pointer;
color: #000 !important;
font-weight: 500;
transition: 0.3s;
text-transform: uppercase;
font-size: 1.3em;
overflow: hidden;
outline: none;
}
#fiveSec {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 2em;
margin-top: -20px;
color: red;
}
.correct-quote {
color: black;
width: 100%;
text-align: center;
margin-bottom: 24px;
}
@media (min-width: 1200px) {
.container {
max-width: 100vw;
}
}
var initial = 60000; // Initial time in milliseconds (1 minute)
var count = initial;
var counter;
var initialMillis;
function timer() {
if (count <= 0) {
gameOver();
clearInterval(counter);
return;
}
var current = Date.now();
count -= current - initialMillis;
initialMillis = current;
displayCount(count);
}
function gameOver() {
var finishText = document.querySelector(".finishText");
if (!finishText) return;
finishText.innerHTML = "You lose";
$("#question1").hide();
$(".magic-word").show();
gameFinish.style.display = "flex";
$(".board, #timer, .letters").hide();
$(".img-mask-loose").show();
// Show the correct quote
var correctQuoteElement = document.querySelector(".correct-quote");
if (correctQuoteElement) {
correctQuoteElement.innerHTML = `The correct quote was: "${randomQuote}"`;
correctQuoteElement.style.display = "block";
}
}
function displayCount(count) {
var res = count / 1000;
document.getElementById("timer").innerHTML = res.toFixed(2);
}
$("#startBtn, #restartBtn").on("click", function () {
clearInterval(counter);
initialMillis = Date.now();
counter = setInterval(timer, 1);
$(".intro").hide();
startGame();
});
$("#stop").on("click", function () {
clearInterval(counter);
});
$("#reset").on("click", function () {
clearInterval(counter);
count = initial;
displayCount(count);
initialMillis = Date.now();
counter = setInterval(timer, 1);
});
displayCount(initial);
// Quotes with corresponding films
var quotesAndFilms = [
{ quote: "May the Force be with you", film: "Star Wars" },
{ quote: "Stupid is as stupid does", film: "Forrest Gump" },
{
quote: "The first rule of Fight Club is you do not talk about Fight Club",
film: "Fight Club"
},
{ quote: "I love the smell of Napalm in the morning", film: "Apocalypse Now" },
{ quote: "Hasta la vista baby", film: "Terminator 2: Judgment Day" },
{ quote: "To infinity and beyond", film: "Toy Story" },
{
quote: "Keep your friends close but your enemies closer",
film: "The Godfather Part II"
},
{ quote: "I drink your milkshake", film: "There Will Be Blood" },
{ quote: "Say hello to my little friend", film: "Scarface" },
{
quote: "I ate his liver with some fava beans and a nice Chianti",
film: "The Silence of the Lambs"
},
{ quote: "My Precious", film: "The Lord of the Rings: The Two Towers" },
{
quote: "Even the smallest person can change the course of the future",
film: "The Lord of the Rings: The Fellowship of the Ring"
},
{ quote: "They call it Royale with Cheese", film: "Pulp Fiction" }
];
// Alphabet & letters
var alphabet = "qwertyuiopasdfghjklzxcvbnm";
var letters = document.querySelector(".letters");
var usedLetters = [];
var displayUsedLetters = document.querySelector(".usedLetters");
// Word
var secretWord = document.querySelector(".secretWord");
let randomQuote;
let randomFilm;
let wordLength;
// Progress
let correctGuesses;
let incorrectGuesses;
var gameFinish = document.querySelector(".gameFinish");
function getRandomQuote() {
var randomIndex = Math.floor(Math.random() * quotesAndFilms.length);
randomQuote = quotesAndFilms[randomIndex].quote;
randomFilm = quotesAndFilms[randomIndex].film;
document.querySelector(
".hint"
).innerHTML = `Enter the Password - Hint: ${randomFilm}`;
hideWord(randomQuote);
}
function startGame() {
// Reset variables
correctGuesses = 0;
incorrectGuesses = 0;
usedLetters = [];
wordLength = 0;
count = initial; // Reset timer
// Reset HTML Content
gameFinish.style.display = "none";
secretWord.innerHTML = "";
letters.innerHTML = "";
displayUsedLetters.innerHTML = "";
displayCount(count); // Reset displayed count
// Create letter divs with alphabet
for (var i = 0; i < alphabet.length; i++) {
let letterDiv = document.createElement("div");
letterDiv.className = "letter";
letterDiv.innerHTML = alphabet[i];
letters.append(letterDiv);
}
getRandomQuote();
// Show necessary elements
$("#timer, .letters").show();
$(".img-mask-win, .img-mask-loose").hide();
$(".correct-quote").hide(); // Hide the correct quote element when starting a new game
}
function hideWord(randomQuote) {
for (var i = 0; i < randomQuote.length; i++) {
let char = document.createElement("span");
char.className = "char";
char.innerHTML = randomQuote[i] === " " ? " " : "_";
if (randomQuote[i] !== " ") wordLength++;
secretWord.append(char);
}
}
function checkChar(char) {
if (usedLetters.includes(char.toLowerCase())) {
console.log("You already used this letter");
return;
}
usedLetters.push(char.toLowerCase());
var usedLetter = document.createElement("div");
usedLetter.className = "usedLetter";
usedLetter.innerHTML = char;
displayUsedLetters.append(usedLetter);
if (!randomQuote.toLowerCase().includes(char.toLowerCase())) {
incorrectGuesses++;
drawPenalty();
checkWin();
} else {
for (var i = 0; i < randomQuote.length; i++) {
if (randomQuote[i].toLowerCase() === char.toLowerCase()) {
correctGuesses++;
checkWin();
document.querySelectorAll(".char")[i].innerHTML = randomQuote[i];
}
}
}
}
function checkWin() {
var finishText = document.querySelector(".finishText");
if (correctGuesses === wordLength) {
finishText.innerHTML = "Congratulations! Your computer is safe.";
gameFinish.style.display = "flex";
$("#timer, .letters").hide();
$(".magic-word").hide();
$(".img-mask-win").show();
$("#question1").hide();
clearInterval(counter);
}
}
function drawPenalty() {
const penaltyTime = 5000;
count -= penaltyTime;
initialMillis = Date.now();
counter = setInterval(timer, 1);
$("#fiveSec").fadeIn().delay(100).fadeOut();
}
$(letters).on("click", function (e) {
if (alphabet.includes(e.target.innerHTML)) {
checkChar(e.target.innerHTML);
e.target.style.opacity = "0.3";
}
});
$(document).ready(function () {
$(".letter").on("click", function () {
$(this).css("opacity", "0.3");
});
$("#startBtn, #restartBtn").on("click", function () {
$(".intro").hide();
$("#question1").show();
});
$(".img-mask-win, .img-mask-loose, #fiveSec").hide();
});
startGame();
