Welcome to CODEBOX! (Branch 1652)
✨ นายศุภชัย ชื่นสุขศรี
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>24 Game</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Itim&family=Sigmar+One&display=swap'); body{ font-family: 'Itim', cursive; background-color: pink; background-size: contain; background-image: url(https://media.discordapp.net/attachments/806442579485917204/807601427518062602/myU7u7UKroOg.gif?width=1025&height=308); } :root { --card-height: 62vh; -webkit-tap-highlight-color: transparent; } .button::selection{ color: none; } .check-box::selection { cursor: none; } .template{ width:800px; margin:auto; display: flex; flex-wrap: wrap; padding: 10px; justify-content:center; } .top-part{ display: flex; flex: 0 0 100%; background: linear-gradient(#fcb6d0,#F48FB1); margin: 4px; width: 100px; border-radius: 30px; box-shadow: 5px 5px #c9c9c9; justify-content: center; } .score, .time{ min-width: 10rem; max-height: 5rem; font-size: 40px; text-align: center; border-radius: 20px; margin:20px; padding: 10px 0px; background: white; } .line{ height: 1px; border: solid 5px; color: white; flex: 1 100%; margin: 2px; } .bottom-part{ flex: 0 1 100%; display: flex; flex-wrap: wrap; background: #c1e2ff; margin: 4px; border-radius: 20px; justify-content: center; } .display{ height: 80px; flex: 0 1 100%; display: flex; background: white; border-radius: 20px; margin: 20px; box-shadow: 8px 8px #a2bdd6; font-size: 40px; align-items: center; padding-left: 20px; } .remove{ flex: 0 0 10%; color: #ff8184; background: #e3e3e3; margin: 11px; margin-left: 665px; border-radius: 10px; } .number-block{ flex-wrap: wrap; background:#c1e2ff; margin: 4px; display: flex; flex: 0 0 47%; justify-content:center; padding-bottom: 1.8rem; } .number{ background: linear-gradient(#AED6F1,#5DADE2); flex: 0 0 45%; margin: 7px; text-align: center; cursor: pointer; line-height: calc(var(--card-height) / 3);; width: calc(var(--card-height) / 3); height: calc(var(--card-height) / 3); border-radius: 50%; border-radius: 20px; box-shadow: 4px 4px #f2f2f2; /*transition: 1000ms;*/ } .number.selected { color: pink; text-shadow: 0 0 5px black; background: linear-gradient(hsl(110, 59%, 44%), hsl(110, 59%, 30%)); } .number.selected:hover { background: linear-gradient(hsl(110, 59%, 35%), hsl(110, 59%, 25%)) !important; } .number:hover{ background: linear-gradient(hsl(204, 71%, 75%), hsl(204, 71%, 55%)); /*background: #339cff;*/ } .number:active{ transform: translateY(2px); background: #339cff; } .operator{ --card-height: 45vh; height: 33%; background: linear-gradient(hsl(50, 100%, 71%), hsl(28, 80%, 71%)); font-size: 50px; text-align: center; cursor: pointer; line-height: calc(var(--card-height) / 3);; width: calc(var(--card-height) / 3); height: calc(var(--card-height) / 3); flex: 0 0 45%; margin: 6px; border-radius: 20px; box-shadow: 4px 4px #a2bdd6; } .operator.selected { color: pink; text-shadow: 0 0 5px black; background: linear-gradient(hsl(41, 100%, 62%), hsl(41, 100%, 50%)); } .operator.selected:hover { background: linear-gradient(hsl(41, 100%, 62%), hsl(41, 100%, 40%)) !important; } .operator:hover{ background: linear-gradient(hsl(50, 100%, 70%), hsl(28, 80%, 60%)); } .operator:active{ transform: translateY(2px); background: #FFB74D ; } .control{ height: 20%; background: linear-gradient(#ff696c 20%,#CB4335 80%); flex: 0 0 46%; display: flex; border-radius: 20px; box-shadow: 4px 4px #a2bdd6; margin: 7px; justify-content: center; font-size: 36px; align-items: center; cursor: pointer; } .control:hover{ background: #EF9A9A ; } .control:active{ transform: translateY(2px); background: #EF9A9A ; } .overlay-text { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; z-index: 100; color: #FF6B6B; font-family: 'Sigmar One', cursive; text-align: center; } .overlay-text-small { font-size: .3em; } .overlay-text.visible { display: flex; flex-direction: column; animation: overlay-grow 500ms forwards; } @keyframes overlay-grow { from { background-color: rgba(0, 0, 0, 0); font-size: 0; } to { background-color: rgba(0, 0, 0, .8); font-size: 10em; } } .game-name { font-family: "Sigmar one", sans-serif; align-items: center; font-variant-caps: petite-caps; font-size: 120px; font-weight: bold; margin-top: -1.2em; margin-bottom: -0.9em; color:#8cd1ff; -webkit-text-stroke-width: 2.5px; -webkit-text-stroke-color: #4ba8ff; text-shadow: 0 0.1em 20px rgba(84, 194, 238, 0.11), 0.05em -0.03em 0 rgba(84, 194, 238, 0.11), 0.05em 0.005em 0 rgba(84, 194, 238, 0.11), 0em 0.08em 0 rgba(84, 194, 238, 0.11), 0.05em 0.08em 0 rgba(84, 194, 238, 0.11), 0px -0.03em 0 rgba(84, 194, 238, 0.11), -0.03em -0.03em 0 rgba(84, 194, 238, 0.11), -0.03em 0.08em 0 rgba(84, 194, 238, 0.11), -0.03em 0 0 rgba(84, 194, 238, 0.11); } .game-name:nth-child(1) { animation: shaking 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate; } .game-name:nth-child(2) { animation: shakingB 1s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite alternate; } @keyframes shaking { 0% { transform: scale(0.9); } 50%,100% { transform: scale(1) rotateZ(2deg); } } @keyframes shakingB { 0% { transform: scale(0.9); } 80%,100% { transform: scale(1) rotateZ(-3deg); } } </style> </head> <body> <div class="overlay-text visible" overlayStart><p start>Click to Start</p></div> <div id="game-over-text" class="overlay-text" overlayRestart> <p style="font-size: 5rem" messageGameover></p> <p style="font-size: 2.5rem">Score is: <span gameOverScore>0</span></p> <span class="overlay-text-small" restart>Click to Restart</span></div> <div class="template"> <!-- paste this in line 16, under <div class="template"> --> <div class="game-name"><p>24</p></div><div class="game-name"><p>game</p></div> <div class="top-part"> <div class="score" scoreBox>0</div> <div class="time" timerBox>00:00</div> </div> <div class="bottom-part"> <div class="display" textBox> </div> <div class="number-block"> <div class="number button" numberButton></div> <div class="number button" numberButton></div> <div class="number button" numberButton></div> <div class="number button" numberButton></div> <div class="dummy" dummy></div> </div> <div class="number-block"> <div class="operator button" operationButton></div> <div class="operator button" operationButton></div> <div class="operator button" operationButton></div> <div class="operator button" operationButton></div> <div class="control button" resetButton></div> <div class="control check" newBox></div> <div class="dummy" dummy></div> </div> </div> </div> <script type="text/javascript"> class AudioController { constructor() { this.bgMusic = new Audio('https://multijabond.web.app/kahootbg.mp3'); this.clickSound = new Audio('https://multijabond.web.app/click.wav'); this.matchSound = new Audio('https://raw.githubusercontent.com/WebDevSimplified/Mix-Or-Match/master/Assets/Audio/match.wav'); this.gameOverSound = new Audio('https://multijabond.web.app/hawaiio.mp3'); this.bgMusic.volume = 0.5; this.gameOverSound.volume = 0.25; this.bgMusic.loop = true; } startMusic() { this.bgMusic.play(); this.stopGameOver(); } stopMusic() { this.bgMusic.pause(); this.bgMusic.currentTime = 0; } match() { this.matchSound.play(); } gameOver() { this.stopMusic(); this.gameOverSound.play(); } stopGameOver() { this.gameOverSound.pause(); this.gameOverSound.currentTime = 0; } click() { this.clickSound.play(); } } const sound = new AudioController class twentyFourGame { constructor() { this.dummyOperand = document.querySelector('[dummy]') this.dummyOperation = document.querySelector('[dummy]') this.newNumbers() } clear() { this.firstOperand = this.dummyOperand this.secondOperand = this.dummyOperand this.activeOperation = this.dummyOperation } newNumbers() { textBoxElement.innerText = '' this.clear() this.randomizeNumbers() this.populateNumbers() } randomizeNumbers() { let base = 24 answerArray.splice(0, answerArray.length) for (let i = 0; i < 3; i++) { let operation = Math.floor((Math.random() * 6)) % 4 let nextNumber = Math.floor((Math.random() * 10)) + 2 if (operation === 3) { if ((base + nextNumber) > 24) { i-- continue } answerArray.push(nextNumber) answerArray.push(' - ') base = base + nextNumber } else if (operation === 2) { if ((base - nextNumber) < 1) { i-- continue } answerArray.push(nextNumber) answerArray.push(' + ') base = base - nextNumber } else if (operation === 1) { if ((base * nextNumber) > 32) { i-- continue } answerArray.push(nextNumber) answerArray.push(' / ') base = base * nextNumber } else { if (base % nextNumber !== 0) { i-- continue } answerArray.push(nextNumber) answerArray.push(' * ') base = base / nextNumber } operationsArray[i] = operationLib[operation] } if (base > 16) { this.randomizeNumbers() } else { answerArray.push(base) answerArray.reverse() } } populateNumbers() { let randomOrder = Math.floor(Math.random() * 4) numberButtonElements.forEach((number, index) => { number.innerText = `${answerArray[2*((randomOrder + index) % 4)]}` number.classList.remove('empty') number.classList.remove('selected') number.style.fontSize = `calc(var(--card-height) / (${answerArray[2*((randomOrder + index) % 4)].toString().length} + 3.5)` }) } chooseOperation(operation) { if(this.firstOperand !== this.dummyOperation) { if (this.activeOperation === operation) { this.activeOperation.classList.remove('selected') this.activeOperation = this.dummyOperation let text = textBoxElement.innerText textBoxElement.innerText = text.substring(0, text.length - 1); return } else { this.activeOperation.classList.remove('selected') this.activeOperation = operation this.activeOperation.classList.add('selected') textBoxElement.innerText += operation.textContent } } } chooseNumber(number) { if (number.textContent !== '') { if (this.firstOperand === number) { this.firstOperand.classList.remove('selected') this.firstOperand = this.dummyOperand this.activeOperation.classList.remove('selected') this.activeOperation = this.dummyOperation textBoxElement.innerText = '' return } else if (this.secondOperand === number) { this.secondOperand.classList.remove('selected') this.secondOperand = this.dummyOperand let text = textBoxElement.innerText textBoxElement.innerText = text.substring(0, text.length - 1); return } else if (this.firstOperand !== this.dummyOperation && this.activeOperation !== this.dummyOperation) { this.secondOperand.classList.remove('selected') this.secondOperand = number this.secondOperand.classList.add('selected') textBoxElement.innerText += number.textContent } else if (number.textContent !== '') { this.firstOperand.classList.remove('selected') this.firstOperand = number this.firstOperand.classList.add('selected') textBoxElement.innerText = number.textContent } } } compute() { if (this.firstOperand === this.dummyOperand || this.secondOperand === this.dummyOperand || this.activeOperation === this.dummyOperation){ return } let computation const first = parseInt(this.firstOperand.innerText) const second = parseInt(this.secondOperand.innerText) // textBoxElement.classList.add('hidden') switch (this.activeOperation.innerText) { case '+': computation = first + second break case '-': computation = Math.abs(first - second) break case '*': computation = first * second break case '/': if (first % second === 0) { computation = first / second } else if (second % first === 0) { computation = second / first } else { this.firstOperand.classList.remove('selected') this.secondOperand.classList.remove('selected') this.activeOperation.classList.remove('selected') alert('The quotient is not a whole number') textBoxElement.innerText = '' this.clear() return } break default: this.clear() return } textBoxElement.innerText += ' = '+`${computation}` this.firstOperand.innerText = '' this.firstOperand.classList.remove('selected') this.secondOperand.innerText = `${computation}` this.secondOperand.style.fontSize = `calc(var(--card-height) / (${computation.toString().length} + 3.5)` this.secondOperand.classList.remove('selected') this.activeOperation.classList.remove('selected') this.clear() this.victory() } victory() { let victoryCount = 0 numberButtonElements.forEach(number => { if (number.innerText === '' || number.innerText === '24') victoryCount++ }) if (victoryCount === 4) { // To do, add screen victory sound.match() scoreCount++; scoreBoxElement.innerText = scoreCount; gameOverScore.innerText = scoreCount; newGame.newNumbers() } } } const messageGameover = document.querySelector('[messageGameover]') const start = document.querySelector('[start]') const restart = document.querySelector('[restart]') const overlayStart = document.querySelector('[overlayStart]') const overlayRestart = document.querySelector('[overlayRestart]') const gameOverScore = document.querySelector('[gameOverScore]') const scoreBoxElement = document.querySelector('[scoreBox]') const operationButtonElements = document.querySelectorAll('[operationButton]') const numberButtonElements = document.querySelectorAll('[numberButton]') const resetButtonElement = document.querySelector('[resetButton]') const textBoxElement = document.querySelector('[textBox]') const newBoxElement = document.querySelector('[newBox]') const timerBox = document.querySelector('[timerBox]') const operationLib = ['Multiplication', 'Division', 'Addition', 'Subtraction'] const operationsArray = [], answerArray = [] var firsttime = true var scoreCount = 0 var message const newGame = new twentyFourGame() let operationSymbols = '+-*/'; operationButtonElements.forEach((operation,index) => { operation.innerText = operationSymbols[index] operation.addEventListener('click', () => { sound.click() newGame.chooseOperation(operation) newGame.compute() }) }) numberButtonElements.forEach(number => { number.addEventListener('click', () => { sound.click() newGame.chooseNumber(number) newGame.compute() }) }) resetButtonElement.innerText = 'Reset'; resetButtonElement.addEventListener('click', () => { sound.click() textBoxElement.innerText = ''; newGame.activeOperation.classList.remove('selected') newGame.clear() newGame.populateNumbers() }) newBoxElement.innerText = 'Next'; newBoxElement.addEventListener('click', () => { sound.click() newGame.newNumbers() }) function startTimer(duration, display) { var timer = duration, minutes, seconds; var loop = setInterval(function () { minutes = parseInt(timer / 60, 10); seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer < 0) { if (scoreCount >= 12) { message = 'Please don\'t use F12 function' } else if (scoreCount >= 8) { message = 'Fuck you, nerd' } else if (scoreCount >= 5) { message = 'Great!' } else if (scoreCount >= 3) { message = 'Try harder' } else if (scoreCount < 3) { message = 'NOOB' } messageGameover.innerText = message; timer = duration; sound.gameOver() document.getElementById('game-over-text').classList.add('visible'); gameOverScore.innerText = scoreCount; scoreCount = 0 scoreBoxElement.innerText = scoreCount; newGame.newNumbers() clearInterval(loop); } }, 1000); } window.onload = function () { let overlays = Array.from(document.getElementsByClassName('overlay-text')); setDisplayTime = '02:00' timerBox.innerText = setDisplayTime start.addEventListener('click', () => { sound.startMusic() overlayStart.classList.remove('visible'); var fiveMinutes = (60 * 2)-1, display = timerBox; timerBox.innerText = setDisplayTime startTimer(fiveMinutes, display); }); restart.addEventListener('click', () => { sound.startMusic() overlayRestart.classList.remove('visible'); var fiveMinutes = (60 * 2)-1, display = timerBox; timerBox.innerText = setDisplayTime startTimer(fiveMinutes, display); }); }; </script> </body> </html>