-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- add new game "Visual Estimation" where you have to rapidly count or…
… guess the number of objects on the screen
- Loading branch information
1 parent
ff454fc
commit 5a7cdae
Showing
3 changed files
with
160 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <div id="visual-estimation" class="test-screen tab-content lg:container m-auto"> | ||
| <h2 class="text-3xl font-bold mb-4">Visual Estimation</h2> | ||
| <div class="estimation-container flex flex-col items-center mt-12"> | ||
| <p id="instructions" class="text-3xl mb-2 hidden">Count the <span id="target-emoji"></span>!</p> | ||
| <div id="timer" class="mt-4 text-2xl">Time left: 60s</div> | ||
| <button id="start-estimation" | ||
| class="text-2xl waves-effect waves-light mt-2 font-bold bg-green-500 hover:bg-green-700 text-white rounded px-8 py-4"> | ||
| Start | ||
| </button> | ||
| </div> | ||
| <div id="emoji-display" class="mt-4 w-full h-64 bg-gray-100 relative hidden" style="text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;"></div> | ||
| <div id="guess-input" class="mt-4 hidden"> | ||
| <input type="number" id="user-guess" class="text-2xl p-2 border rounded" placeholder="Your guess"> | ||
| <button id="submit-guess" | ||
| class="text-2xl waves-effect waves-light ml-4 font-bold bg-blue-500 hover:bg-blue-700 text-white rounded px-8 py-2"> | ||
| Submit | ||
| </button> | ||
| </div> | ||
| <div id="score" class="mt-4 text-2xl"></div> | ||
| <div id="result" class="mt-4 text-xl"></div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| // VISUAL ESTIMATION | ||
| $(function () { | ||
| const allEmojis = ['😀', '😎', '🚀', '🌈', '🍕', '🎸', '🌺', '🦄', '🍔', '🎈', '🐶', '🐱', '🐼', '🦁', '🐘', '🦋', '🌻', '🍎', '🍌', '🍊', '🍓', '🥑', '🍉', '🍇', '🥕', '🏀', '⚽️', '🎾', '🏈', '🎃', '🌙', '⭐️', '🌞']; | ||
| let currentEmojis, targetEmoji, currentCount, score, timer, timeLeft; | ||
|
|
||
| $("#start-estimation").click(startGame); | ||
|
|
||
| $("#submit-guess").click(submitGuess); | ||
|
|
||
| $("#user-guess").keypress(function(e) { | ||
| if(e.which == 13) { // Enter key | ||
| submitGuess(); | ||
| } | ||
| }); | ||
|
|
||
| function startGame() { | ||
| $("#start-estimation").hide(); | ||
| $("#instructions").removeClass('hidden'); | ||
| score = 0; | ||
| timeLeft = 60; | ||
| $("#score").text(`Score: ${score}`); | ||
| timer = setInterval(updateTimer, 1000); | ||
| showEmojis(); | ||
| } | ||
|
|
||
| function submitGuess() { | ||
| const userGuess = parseInt($("#user-guess").val()); | ||
|
|
||
| if (isNaN(userGuess)) { | ||
| $("#result").text("Please enter a valid number").removeClass("text-green-500").addClass("text-red-500"); | ||
| return; | ||
| } | ||
|
|
||
| if (userGuess === currentCount) { | ||
| score++; | ||
| $("#result").text("Correct! +1 point").removeClass("text-red-500").addClass("text-green-500"); | ||
| } else { | ||
| $("#result").text(`Incorrect. Actual count: ${currentCount}`).removeClass("text-green-500").addClass("text-red-500"); | ||
| } | ||
|
|
||
| $("#score").text(`Score: ${score}`); | ||
| $("#user-guess").val(''); | ||
|
|
||
| if (timeLeft > 0) { | ||
| showEmojis(); | ||
| } | ||
| } | ||
|
|
||
| function showEmojis() { | ||
| const $display = $("#emoji-display").empty().show(); | ||
| const displayWidth = $display.width(); | ||
| const displayHeight = $display.height(); | ||
|
|
||
| currentEmojis = getRandomEmojis(allEmojis, 3); | ||
| targetEmoji = currentEmojis[Math.floor(Math.random() * 3)]; | ||
| $("#target-emoji").text(targetEmoji); | ||
|
|
||
| currentCount = Math.floor(Math.random() * 16) + 5; // Random count between 5 and 20 | ||
| let placedCount = 0; | ||
|
|
||
| for (let i = 0; i < 40 && placedCount < currentCount; i++) { | ||
| const emoji = currentEmojis[Math.floor(Math.random() * 3)]; | ||
| const size = Math.random() * 20 + 20; // Random size between 20px and 40px | ||
| const left = Math.random() * (displayWidth - size); | ||
| const top = Math.random() * (displayHeight - size); | ||
|
|
||
| // Check for overlap | ||
| let overlapping = false; | ||
| $("#emoji-display span").each(function() { | ||
| const $existing = $(this); | ||
| const existingLeft = parseFloat($existing.css('left')); | ||
| const existingTop = parseFloat($existing.css('top')); | ||
| const existingSize = parseFloat($existing.css('font-size')); | ||
|
|
||
| if (left < existingLeft + existingSize && | ||
| left + size > existingLeft && | ||
| top < existingTop + existingSize && | ||
| top + size > existingTop) { | ||
| overlapping = true; | ||
| return false; // Break the loop | ||
| } | ||
| }); | ||
|
|
||
| if (!overlapping) { | ||
| $('<span>').text(emoji).css({ | ||
| position: 'absolute', | ||
| fontSize: `${size}px`, | ||
| left: `${left}px`, | ||
| top: `${top}px` | ||
| }).appendTo($display); | ||
|
|
||
| if (emoji === targetEmoji) { | ||
| placedCount++; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| $("#guess-input").show(); | ||
| $("#user-guess").focus(); | ||
| } | ||
|
|
||
| function getRandomEmojis(emojiList, count) { | ||
| return emojiList.sort(() => 0.5 - Math.random()).slice(0, count); | ||
| } | ||
|
|
||
| function updateTimer() { | ||
| timeLeft--; | ||
| $("#timer").text(`Time left: ${timeLeft}s`); | ||
| if (timeLeft <= 0) { | ||
| clearInterval(timer); | ||
| endGame(); | ||
| } | ||
| } | ||
|
|
||
| function endGame() { | ||
| $("#emoji-display, #guess-input").hide(); | ||
| $("#result").text(`Game over! Final score: ${score}`).removeClass("text-red-500 text-green-500"); | ||
| $("#start-estimation").show(); | ||
| saveScore('Visual Estimation', score); | ||
| } | ||
| }); |