diff --git a/Games/Computer_Bingo/README.md b/Games/Computer_Bingo/README.md new file mode 100644 index 0000000000..2f89ca6c79 --- /dev/null +++ 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 + + \ No newline at end of file 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 new file mode 100644 index 0000000000..99f90d472e Binary files /dev/null and b/Games/Computer_Bingo/WhatsApp Video 2024-06-07 at 18.53.41_01758a15.mp4 differ diff --git a/Games/Computer_Bingo/favicon/image.png b/Games/Computer_Bingo/favicon/image.png new file mode 100644 index 0000000000..3bfaa3daae Binary files /dev/null and b/Games/Computer_Bingo/favicon/image.png differ diff --git a/Games/Computer_Bingo/image.png b/Games/Computer_Bingo/image.png new file mode 100644 index 0000000000..f10c385f06 Binary files /dev/null and b/Games/Computer_Bingo/image.png differ diff --git a/Games/Computer_Bingo/index.html b/Games/Computer_Bingo/index.html new file mode 100644 index 0000000000..bbb13c6190 --- /dev/null +++ b/Games/Computer_Bingo/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + Bingo + + + +
+

maximum score 0 points

+
+
+
+

Player

+
+
+
+

Start

+
+
+

CPU

+
+
+
+ +
+ + +
+ +
+ + + + + \ No newline at end of file diff --git a/Games/Computer_Bingo/script.js b/Games/Computer_Bingo/script.js new file mode 100644 index 0000000000..de894531a4 --- /dev/null +++ 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 += `
${userNumbers[i]}
` +} + +for (let i = 0; i < cpuNumbers.length; i++) { + cpuBoard.innerHTML += `
${cpuNumbers[i]}
` +} + + + +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 += `
${randomNumber}
` + + 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 +} \ No newline at end of file diff --git a/Games/Computer_Bingo/style.css b/Games/Computer_Bingo/style.css new file mode 100644 index 0000000000..6c7a20014d --- /dev/null +++ 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%; + } +} \ No newline at end of file diff --git a/README.md b/README.md index a2501fa3fc..6a7e5490b7 100644 --- a/README.md +++ b/README.md @@ -309,9 +309,7 @@ This repository also provides one such platforms where contributers come over an | [Guess_The_Song](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Song) | [Reverse Memory](https://github.com/MuraliDharan7/GameZone/tree/reverse-memory-game/Games/Reverse%20Memory) | [NewsJunction](https://github.com/kunjgit/GameZone/tree/main/Games/NewsJunction) | | [Recognizing_Figures](https://github.com/kunjgit/GameZone/tree/main/Games/Recognizing_Figures) | - | [WordScramble](https://github.com/kunjgit/GameZone/tree/main/Games/wordScramble) - [Roll_The_Dice](https://github.com/kunjgit/GameZone/tree/main/Games/Roll_The_Dice) | | [Black_jackk](https://github.com/kunjgit/GameZone/tree/main/Games/Black_jackk) | | [Recognizing_Figures](https://github.com/kunjgit/GameZone/tree/main/Games/Recognizing_Figures) | [Screen Pet Game](https://github.com/kunjgit/GameZone/tree/main/Games/Screen-Pet-Game) | @@ -342,6 +340,7 @@ This repository also provides one such platforms where contributers come over an | [Taash_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Taash_Game) | | [Number_Guessing_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Guessing_Game) | + | [Number_Guessing_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Computer_Bingo) |
diff --git a/assets/images/image.png b/assets/images/image.png index 27158628e7..f10c385f06 100644 Binary files a/assets/images/image.png and b/assets/images/image.png differ