kunjgit · Anjaliavv51 · Jun 7, 2024 · Jun 7, 2024 · Jun 7, 2024 · Jun 7, 2024
diff --git a/Games/Computer_Bingo/README.md b/Games/Computer_Bingo/README.md
@@ -0,0 +1,16 @@
+# 🏆 Simulador Bingo
+
+Repository of a simulator of the popular Bingo game where you can compete against the PC
+
+## 📝 Detalle
+Game where 15 numbers from 1 to 100 are randomly distributed between 2 cards (player and PC), the numbers can be repeated between player and machine but not in
+oneself. As the ball is drawn, those that came out are marked and below on the screen there is also the history of the numbers drawn. The first to exhaust the 
+Card numbers win. The score is saved in localStorage based on how quickly it was finished, taking into account the balls that remain in the bowl without coming out
+
+# Screenshot
+
+![alt text](image.png)
+
+# Working Video
+
+<video controls src="WhatsApp Video 2024-06-07 at 18.53.41_01758a15.mp4" title="preview"></video>
diff --git a/Games/Computer_Bingo/WhatsApp Video 2024-06-07 at 18.53.41_01758a15.mp4 b/Games/Computer_Bingo/WhatsApp Video 2024-06-07 at 18.53.41_01758a15.mp4
diff --git a/Games/Computer_Bingo/favicon/image.png b/Games/Computer_Bingo/favicon/image.png
diff --git a/Games/Computer_Bingo/image.png b/Games/Computer_Bingo/image.png
diff --git a/Games/Computer_Bingo/index.html b/Games/Computer_Bingo/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="./favicon/image.png" type="image/x-icon">
+    <title>Bingo</title>
+</head>
+
+<body>
+    <section class="score">
+        <p title="Mientras más bolas queden en el bolillero cuando ganas, significa que lograste una win en menos intentos, eso determina tu puntaje">maximum score <span id="score">0</span> points</p>
+    </section>
+    <section class="competidores">
+        <div class="carton">
+            <h2>Player</h2>
+            <div class="carton__numero-contenedor" id="playerBoard"></div>
+        </div>
+        <div class="mezclador">
+            <p id="numberDraw">Start</p>
+        </div>
+        <div class="carton">
+            <h2>CPU</h2>
+            <div class="carton__numero-contenedor" id="cpuBoard"></div>
+        </div>
+    </section>
+
+    <section class="jugada-automatica" id="autoPlay">
+        <button class="aut-btn" id="automatica">Automatic Play</button>
+        <button class="aut-btn hidden" id="stopAutomatica">Stop</button>
+    </section>
+
+    <section class="numeros" id="totalNumbers"></section>
+
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Computer_Bingo/script.js b/Games/Computer_Bingo/script.js
@@ -0,0 +1,122 @@
+const userboard = document.getElementById('playerBoard')
+const cpuBoard = document.getElementById('cpuBoard')
+const totalNumbers = document.getElementById('totalNumbers')
+const numberDraw = document.getElementById('numberDraw')
+const automaticBtn = document.getElementById('automatica')
+const stopAutomatic = document.getElementById('stopAutomatica')
+const scoreSpan = document.getElementById('score')
+
+const maxScore = localStorage.getItem('maxScore') || 0
+scoreSpan.innerText = maxScore
+
+const userNumbers = fifteenRandomNumbers()
+const cpuNumbers = fifteenRandomNumbers()
+
+
+let userAcerts = 0
+let cpuAcerts = 0
+
+// Creo el array con todos los numeros del 1 al 99, ya que son las bolas que pueden salir
+const balls = []
+for (let i = 1; i < 100; i++) {
+    balls.push(i)
+}
+
+for (let i = 0; i < userNumbers.length; i++) {
+    userboard.innerHTML += `<div class="numero-contenedor__child" id='userNum${i}'>${userNumbers[i]}</div>`
+}
+
+for (let i = 0; i < cpuNumbers.length; i++) {
+    cpuBoard.innerHTML += `<div class="numero-contenedor__child" id='cpuNum${i}'>${cpuNumbers[i]}</div>`
+}
+
+
+
+numberDraw.addEventListener('click', randomNumberDraw)
+automaticBtn.addEventListener('click', () => automatic(true))
+stopAutomatic.addEventListener('click', () => automatic(false))
+
+
+
+function automatic(value) {
+
+    if (value) {
+        alert('Automatico activado!')
+        automaticInterval = setInterval(randomNumberDraw, 300)
+    } else {
+        alert('Automatico desactivado!')
+        clearInterval(automaticInterval)
+    }
+
+    automaticBtn.classList.toggle('hidden')
+    stopAutomatic.classList.toggle('hidden')
+}
+
+function randomNumberDraw() {
+    const randomNumber = balls[Math.floor(Math.random() * balls.length)]
+    balls.splice(balls.indexOf(randomNumber), 1)
+    console.log(balls)
+
+    numberDraw.innerText = randomNumber
+
+    totalNumbers.innerHTML += `<div class="numero-obtenido">${randomNumber}</div>`
+
+    if (userNumbers.includes(randomNumber)) {
+        document.getElementById(`userNum${userNumbers.indexOf(randomNumber)}`).style.backgroundColor = 'green'
+        userAcerts++
+    }
+
+    if (cpuNumbers.includes(randomNumber)) {
+        document.getElementById(`cpuNum${cpuNumbers.indexOf(randomNumber)}`).style.backgroundColor = 'red'
+        cpuAcerts++
+    }
+
+    checkWinner()
+
+    if (balls.length === 0) {
+        alert('No quedan mas bolas!')
+        document.getElementById('numberDraw').style.display = 'none'
+    }
+}
+
+function checkWinner() {
+    if (userAcerts === 15) {
+        document.getElementById('numberDraw').style.display = 'none'
+        alert(`You won! They were left in the closet ${balls.length} balls`)
+        clearInterval(automaticInterval)
+        stopAutomatic.classList.toggle('hidden')
+        document.querySelector('.jugada-automatica').style.minHeight = '30px'
+        if (balls.length > maxScore) {
+            localStorage.setItem('maxScore', balls.length)
+            scoreSpan.innerText = balls.length
+        }
+    } else if (cpuAcerts === 15) {
+        document.getElementById('numberDraw').style.display = 'none'
+        alert(`You lost, the winner is the CPU! They were left in the closet ${balls.length} balls`)
+        clearInterval(automaticInterval)
+        stopAutomatic.classList.toggle('hidden')
+        document.querySelector('.jugada-automatica').style.minHeight = '30px'
+    }
+}
+
+function fifteenRandomNumbers() {
+
+    const arr = [];
+
+    for (let i = 0; i < 15; i++) {
+        const randomNumber = Math.floor(Math.random() * 100)
+
+        isInArray = arr.includes(randomNumber)
+
+        if (randomNumber == 100 || randomNumber == 0) {
+            i-- // Si bien no lo agrega al array por el continue, con el i-- "vuelvo" un ciclo, ya que si no lo pierdo y quedo con menos de 15
+            continue
+        } else if (!isInArray) {
+            arr.push(randomNumber)
+        } else {
+            i--
+        }
+    }
+
+    return arr
+}
diff --git a/Games/Computer_Bingo/style.css b/Games/Computer_Bingo/style.css
@@ -0,0 +1,158 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Helvetica, sans-serif, sans-serif;
+}
+
+body {
+    background-color: #2455c0;
+}
+
+.competidores {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin-top: 3em;
+}
+
+.carton {
+    background-color: #9e1c23;
+    color: #fff;
+    width: calc(65px * 5);
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.carton h2 {
+    text-align: center;
+    margin: 1em;
+}
+
+.carton__numero-contenedor {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.numero-contenedor__child {
+    width: 50px;
+    height: 50px;
+    color: #000;
+    background-color: #fff;
+    margin: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    font-weight: bold;
+    border-radius: 5px;
+}
+
+.mezclador {
+    border: 3px solid #000;
+    width: 300px;
+    height: 300px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: radial-gradient(rgb(196, 188, 188), #000);
+}
+
+.mezclador p {
+    background-color: #fff;
+    font-size: 50px;
+    padding: 5px;
+    border: 5px solid #555;
+    min-width: 70px;
+    min-height: 70px;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.mezclador p:hover{
+    background-color: #000;
+    color: #fff;
+    transition: .5s;
+}
+
+.numeros {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 0 2em .7em 2em;
+    border: 2px solid #fff;
+    padding: 10px;
+    min-height: 250px;
+    border-radius: 5px;
+}
+
+.numero-obtenido {
+    width: 50px;
+    height: 50px;
+    background-color: #fff;
+    margin: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    font-weight: bold;
+    border-radius: 5px;
+}
+
+.jugada-automatica{
+    min-height: 25vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.aut-btn{
+    padding: 20px;
+    border: 2px solid #fff;
+    border-radius: 5px;
+    background-color: #fff;
+    color: #000;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.hidden{
+    display: none;
+}
+
+.score p {
+    color: #000;
+    font-size: 20px;
+    font-weight: bold;
+    margin: 1em auto;
+    background-color: rgb(184, 170, 170);
+    display: block;
+    padding: 10px;
+    width: 400px;
+    text-align: center;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+@media screen and (max-width: 970px) {
+    .competidores {
+        flex-direction: column;
+    }
+
+    .mezclador{
+        order: -1;
+    }
+
+    .competidores > *{
+        margin: 1em;
+    }
+
+    .score p{
+        width: 40%;
+    }
+}
diff --git a/assets/images/image.png b/assets/images/image.png