Today I will share with you a color discrimination game based on CSS3 and JavaScript. It is known that there are 3 squares in a group. The first 2 squares are painted with two similar colors. You can guess the third one based on the decreasing sequence of these two colors. What is the color of the square, and choose the color that you think is the closest from the squares below to test your color discrimination ability.
Advertisement
<div id="points"> <span id="guessed">0</span> / <span id="total">0<span> </div> <div class="center"> <h1>Color Sequence Scheme</h1> <div class="boxes"> <div class="color-box" id="box-1"></div> <div class="color-box" id="box-2"></div> <div class="color-box" id="box-3"> <div id="correct-color"></div> <div id="picked-color"></div> </div> </div> <h2>Which color comes next?</h2> <div class="boxes mini"> <div class="color-box" id="color-0" role="button" data-value="0"></div> <div class="color-box" id="color-1" role="button" data-value="1"></div> <div class="color-box" id="color-2" role="button" data-value="2"></div> <div class="color-box" id="color-3" role="button" data-value="3"></div> </div> </div> <div id="scrim"> <div class="center"> <h2 id="correct">You picked the right color!</h2> <h2 id="incorrect">Oh no! That was not the right color!</h2> <button>Click here to play again</button> </div> </div>
h1, h2 { text-align: center; color: white; font-size: 5vmin; text-shadow: 0 1px 3px rgba(0,0,0,0.25); font-family: Pacifico, arial, serif; font-weight: normal; } h2 { font-size: 3.5vmin; margin-top: 5vmin; } #points { font-family: Pacifico, Verdana, sans-serif; color: white; font-size: 5vmin; text-shadow: 0 1px 3px rgba(0,0,0,0.25); position: absolute; top: 1vmin; right: 2vmin; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .boxes { margin: auto auto; text-align: center; white-space: nowrap; }
initialize: function() { const boxes = document.querySelectorAll(".boxes.mini .color-box"); for (let x = 0; x < boxes.length; x++) { boxes[x].addEventListener("click", function() { if (this.dataset.value == game.correct) { document.querySelector("#scrim").classList.add("correct"); this.classList.add("right"); game.right++; } else { document.querySelector("#scrim").classList.add("incorrect"); this.classList.add("wrong"); document.querySelector(`[data-value='${game.correct}']`).classList.add("right"); } game.total++; document.querySelector("#total").textContent = game.total; document.querySelector("#guessed").textContent = game.right; document.querySelector("#correct-color").style.backgroundColor = document.querySelector(`[data-value='${game.correct}']`).style.backgroundColor; document.querySelector("#picked-color").style.backgroundColor = this.style.backgroundColor; }); } document.querySelector("#scrim button").addEventListener("click", function() { const scrim = document.querySelector("#scrim"); scrim.classList.remove("correct"); scrim.classList.remove("incorrect"); game.generateGame(); }); this.generateGame(); },
Advertisement