A unique interactive game inspired by Jeopardy is in the works. By clicking on a specific element within the game board, players can reveal questions fetched from the Jeopardy API. These questions are then presented elegantly within a dynamically created div element, ready to captivate the player’s attention. Upon triggering this interaction, the div smoothly expands and engulfs the entire screen, enhancing the immersive experience.
Here's a peek into how it all comes together:
handleClick(e) {
let targetID = e.target.id;
if (this.lockboard) return;
for (let x = 0; x < this.width; x++) {
for (let y = 0; y < this.height - 1; y++) {
if (targetID.includes(`${y}-${x}`) && targetID) {
this.lockboard = true;
let newDiv = document.createElement('DIV');
let clickedTD = document.getElementById(`${y}-${x}`);
console.log(clickedTD);
newDiv.innerText = this.clues[x][y].question;
newDiv.classList.add('zoom-in');
console.log(this.clues[x][y].question);
console.log(this.clues[x][y].answer);
}
this.lockboard = false;
}
}
}
For seamless execution, handleClick acts as the pivotal function tied to an event listener on each dynamic td element.
The enchanting animation of the expanding div is powered by the .zoom-in CSS class sporting the following properties:
.zoom-in {
color: white;
position: absolute;
transform: scale(1) translate(100%, 100%);
transition: transform 3s;
}
In essence, the ultimate goal remains achieving a visually stunning transformation of the div to occupy the entire screen dimension upon selecting the specific TD element.