feat(TP3): add HTML and JavaScript files for a number guessing game application

- Create TP3.html to provide the game interface with two game modes. - Implement TP3.js to handle game logic, including number generation and user interactions.
2025-01-22 11:43:52 +01:00 · 2025-01-22 11:43:52 +01:00 · e4d6f39880
commit e4d6f39880
parent 9754be5c96
2 changed files with 127 additions and 0 deletions
--- a/TP3.html
+++ b/TP3.html
@ -0,0 +1,33 @@
+<head>
+  <meta name="Acceuil">
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="static/style.css"> 
+</head>
+<body>
+  <div id="main">
+    <div id="game_selection">
+      <button type="" onclick="setup_game_one()">Game 1 : You guess</button>
+      <button type="" onclick="setup_game_two()">Game 2 : The computer guesses</button>
+    </div>
+    <div id="game_one" class="hidden">
+      <h3> Which number am i thinking about ? :)</h3>
+      <p id="message1"></p>
+      <input type="text" id="player_input" placeholder="type here">
+      <button type="button" onclick="process_guess()" >Try guess</button>
+      <button type="button" onclick="setup_game_one()">Retry game</button>
+      <button type="button" onclick="back()">Back to game selection</button>
+    </div>
+    <div id="game_two" class="hidden">
+      <h3> Which number are you thinking about ? :)</h3>
+      <p id="message2">is it big placeholder</p>
+      <button type="button" onclick="lower()">Lower</button>
+      <button type="button" onclick="greater()">Greater</button>
+      <button type="button" onclick="found()">Found</button>
+      <button type="button" onclick="setup_game_two()">Retry game</button>
+      <button type="button" onclick="back()">Back to game selection</button>
+    </div>
+  </div>
+</body>
+
+
+<script src="static/js/TP3.js" defer></script> 
--- a/static/js/TP3.js
+++ b/static/js/TP3.js
@ -0,0 +1,94 @@
+// bool if player/computer found the number
+var found;
+var numberToGuess;
+var guessedNumber;
+var minimum;
+var maximum;
+
+
+function hide(element){
+  element.classList.add("hidden")
+}
+function unhide(element){
+  element.classList.remove("hidden")
+}
+
+
+function showText(element, text){
+  console.log(element);
+  console.log(text);
+  element.textContent = text;
+}
+
+/**
+ * Represents a book.
+ * @constructor
+ * @param {string} title - The title of the book.
+ * @param {string} author - The author of the book.
+ */
+function randint(min,max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+function back(){
+  unhide(document.getElementById("game_selection"));
+  hide(document.getElementById("game_one"));
+  hide(document.getElementById("game_two"));
+}
+
+
+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 = "";
+}
+
+function process_guess(){
+  console.log("processing");
+  let guessedNumber = parseInt(document.getElementById("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, Too high, try again");
+  }
+  if (guessedNumber < numberToGuess) {
+    showText(message_box,"Nop, Too low, try again");
+  }
+  if (guessedNumber === numberToGuess) {
+    showText(message_box,"You found it well played");  
+  }
+  console.log("done processing");
+}
+///
+function pick_number(smart=false){
+  if(smart) return Math.floor((minimum+maximum)/2);
+  return randint(minimum,maximum);
+}
+
+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+" ?")
+}
+
+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") 
+}