feat(js): implement utility functions for hiding and showing elements, and add event listeners for better interactivity feat(js): create a new roulette game in TP6 with random number generation and qualifying number logic fix(css): update styles for consistency and responsiveness across different screen sizes
140 lines
3.6 KiB
JavaScript
140 lines
3.6 KiB
JavaScript
// bool if player/computer found the number
|
|
var found;
|
|
var numberToGuess;
|
|
var guessedNumber;
|
|
var minimum;
|
|
var maximum;
|
|
|
|
function showText(element, text) {
|
|
element.textContent = text;
|
|
}
|
|
|
|
/**
|
|
* Return a randon between min and max.
|
|
* @param {number} min - The minimum value of the random number.
|
|
* @param {number} max - The maximum value of the random number.
|
|
* @return {number}
|
|
*/
|
|
function randint(min, max) {
|
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
|
}
|
|
|
|
/**
|
|
* Returns to the previous state
|
|
* @return {void}
|
|
*/
|
|
function back() {
|
|
unhide(document.getElementById("game_selection"));
|
|
hide(document.getElementById("game_one"));
|
|
hide(document.getElementById("game_two"));
|
|
document.removeEventListener("keydown", process_keydown);
|
|
}
|
|
|
|
/**
|
|
* This function shows the first game
|
|
* @return {void}
|
|
*/
|
|
function setup_game_one() {
|
|
hide(document.getElementById("game_selection"));
|
|
unhide(document.getElementById("game_one"));
|
|
numberToGuess = randint(1, 100);
|
|
console.log(numberToGuess);
|
|
showText(document.getElementById("message1"), "");
|
|
document.getElementById("player_input").value = "";
|
|
}
|
|
|
|
/**
|
|
* This function is responsible for processing the player's guess in game one.
|
|
* It retrieves the player's input, validates it, and compares it to the number to guess.
|
|
* It also provides feedback to the player based on their guess
|
|
* @return {void}
|
|
*/
|
|
function process_guess() {
|
|
let player_input = document.getElementById("player_input");
|
|
let guessedNumber = parseInt(player_input.value);
|
|
player_input.value = "";
|
|
let message_box = document.getElementById("message1");
|
|
if (isNaN(guessedNumber)) {
|
|
showText(message_box, "Not a valid number, Try again");
|
|
}
|
|
if (guessedNumber > numberToGuess) {
|
|
showText(message_box, "Nop, " + guessedNumber + " is too high, try again");
|
|
}
|
|
if (guessedNumber < numberToGuess) {
|
|
showText(message_box, "Nop, " + guessedNumber + " is too low, try again");
|
|
}
|
|
if (guessedNumber === numberToGuess) {
|
|
showText(message_box, "You found it well played");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* This function tries to predict the player's number
|
|
* @param {bool} smart - use dichotomic search for guessing
|
|
* @returns {number} - the predicted number
|
|
*/
|
|
function pick_number(smart = false) {
|
|
if (smart) return Math.floor((minimum + maximum) / 2);
|
|
return randint(minimum, maximum);
|
|
}
|
|
|
|
/**
|
|
* Processes the keydown events for game two to handle player input (lower, greater, found, retry).
|
|
* @param {KeyboardEvent} event - The keyboard event object.
|
|
* @return {void}
|
|
*/
|
|
function process_keydown(event) {
|
|
switch (event.key) {
|
|
case "L":
|
|
case "l":
|
|
lower();
|
|
break;
|
|
case "G":
|
|
case "g":
|
|
greater();
|
|
break;
|
|
case "F":
|
|
case "f":
|
|
found();
|
|
break;
|
|
case "R":
|
|
case "r":
|
|
document.removeEventListener("keydown", process_keydown);
|
|
setup_game_two();
|
|
break;
|
|
}
|
|
}
|
|
|
|
function setup_game_two() {
|
|
hide(document.getElementById("game_selection"));
|
|
unhide(document.getElementById("game_two"));
|
|
minimum = 1;
|
|
maximum = 100;
|
|
guessedNumber = pick_number();
|
|
showText(
|
|
document.getElementById("message2"),
|
|
"is it " + guessedNumber + " ?",
|
|
);
|
|
document.addEventListener("keydown", process_keydown);
|
|
}
|
|
|
|
function lower() {
|
|
maximum = guessedNumber - 1;
|
|
guessedNumber = pick_number();
|
|
showText(
|
|
document.getElementById("message2"),
|
|
"is it " + guessedNumber + " ?",
|
|
);
|
|
}
|
|
function greater() {
|
|
minimum = guessedNumber + 1;
|
|
guessedNumber = pick_number();
|
|
showText(
|
|
document.getElementById("message2"),
|
|
"is it " + guessedNumber + " ?",
|
|
);
|
|
}
|
|
function found() {
|
|
showText(document.getElementById("message2"), "yay i found it");
|
|
}
|