|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Kids Connect The Dots Game</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif; |
|
|
background-color: #f0f9ff; |
|
|
} |
|
|
|
|
|
.game-container { |
|
|
perspective: 1000px; |
|
|
background-color: white; |
|
|
border-radius: 20px; |
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.dot { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-weight: bold; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
font-size: 24px; |
|
|
border: 4px solid transparent; |
|
|
} |
|
|
|
|
|
.dot.active { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 0 20px rgba(0, 119, 181, 0.5); |
|
|
border-color: white; |
|
|
animation: bounce 0.5s infinite alternate; |
|
|
} |
|
|
|
|
|
.dot.completed { |
|
|
background-color: #10b981 !important; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.line { |
|
|
position: absolute; |
|
|
background-color: #3b82f6; |
|
|
height: 8px; |
|
|
transform-origin: 0 0; |
|
|
z-index: 0; |
|
|
transition: all 0.3s ease; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.confetti { |
|
|
position: absolute; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
background-color: #f00; |
|
|
border-radius: 50%; |
|
|
animation: fall 3s linear forwards; |
|
|
} |
|
|
|
|
|
@keyframes fall { |
|
|
to { |
|
|
transform: translateY(100vh) rotate(720deg); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
from { transform: scale(1.1); } |
|
|
to { transform: scale(1.2); } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0.7); } |
|
|
50% { transform: scale(1.2); box-shadow: 0 0 20px rgba(255, 215, 0, 0.7); } |
|
|
100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0.7); } |
|
|
} |
|
|
|
|
|
.pattern-btn { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.pattern-btn.active { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); |
|
|
border-color: #3b82f6; |
|
|
} |
|
|
|
|
|
.celebration { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
pointer-events: none; |
|
|
z-index: 100; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
font-size: 5rem; |
|
|
color: gold; |
|
|
text-shadow: 0 0 10px rgba(0,0,0,0.5); |
|
|
animation: zoomIn 1s forwards; |
|
|
} |
|
|
|
|
|
@keyframes zoomIn { |
|
|
from { transform: scale(0); opacity: 0; } |
|
|
to { transform: scale(1); opacity: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex flex-col items-center justify-start p-4 pt-8"> |
|
|
<div class="text-center mb-6"> |
|
|
<h1 class="text-4xl font-bold text-blue-600 mb-2">Kids Connect The Dots</h1> |
|
|
<p class="text-xl text-gray-600">Learn sequences by connecting the dots!</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap justify-center gap-4 mb-8 w-full max-w-4xl"> |
|
|
<button data-pattern="numbers" class="pattern-btn active px-6 py-3 bg-blue-100 text-blue-800 rounded-xl border-2 border-blue-200 font-bold"> |
|
|
<i class="fas fa-sort-numeric-up-alt mr-2"></i>Numbers |
|
|
</button> |
|
|
<button data-pattern="letters" class="pattern-btn px-6 py-3 bg-purple-100 text-purple-800 rounded-xl border-2 border-purple-200 font-bold"> |
|
|
<i class="fas fa-font mr-2"></i>Letters |
|
|
</button> |
|
|
<button id="new-pattern-btn" class="px-6 py-3 bg-green-100 text-green-800 rounded-xl border-2 border-green-200 font-bold"> |
|
|
<i class="fas fa-sync-alt mr-2"></i>New Pattern |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="game-container relative w-full max-w-2xl h-96 mb-8 p-4"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col items-center w-full max-w-md"> |
|
|
<div class="mb-6 grid grid-cols-3 gap-4 w-full"> |
|
|
<div class="flex items-center justify-center bg-blue-50 p-3 rounded-lg"> |
|
|
<div class="dot bg-blue-500 text-white mr-2"></div> |
|
|
<span class="font-bold">Next</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-center bg-gray-50 p-3 rounded-lg"> |
|
|
<div class="dot bg-gray-300 text-gray-700 mr-2"></div> |
|
|
<span class="font-bold">Available</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-center bg-green-50 p-3 rounded-lg"> |
|
|
<div class="dot bg-green-500 text-white mr-2"></div> |
|
|
<span class="font-bold">Completed</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-4 mb-6"> |
|
|
<button id="reset-btn" class="px-6 py-3 bg-red-100 text-red-800 rounded-xl border-2 border-red-200 font-bold hover:bg-red-200 transition flex items-center"> |
|
|
<i class="fas fa-redo mr-2"></i> Reset |
|
|
</button> |
|
|
<button id="hint-btn" class="px-6 py-3 bg-yellow-100 text-yellow-800 rounded-xl border-2 border-yellow-200 font-bold hover:bg-yellow-200 transition flex items-center"> |
|
|
<i class="fas fa-lightbulb mr-2"></i> Hint |
|
|
</button> |
|
|
<button id="sound-btn" class="px-6 py-3 bg-indigo-100 text-indigo-800 rounded-xl border-2 border-indigo-200 font-bold hover:bg-indigo-200 transition flex items-center"> |
|
|
<i class="fas fa-volume-up mr-2"></i> Sound On |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="timer" class="text-2xl font-mono bg-blue-100 px-6 py-3 rounded-xl mb-4 font-bold text-blue-800"> |
|
|
<i class="fas fa-clock mr-2"></i> 00:00 |
|
|
</div> |
|
|
|
|
|
<div id="message" class="text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<audio id="correct-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-correct-answer-tone-2870.mp3" preload="auto"></audio> |
|
|
<audio id="wrong-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-wrong-answer-fail-notification-946.mp3" preload="auto"></audio> |
|
|
<audio id="celebration-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3" preload="auto"></audio> |
|
|
<audio id="click-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-select-click-1109.mp3" preload="auto"></audio> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const gameContainer = document.querySelector('.game-container'); |
|
|
const resetBtn = document.getElementById('reset-btn'); |
|
|
const hintBtn = document.getElementById('hint-btn'); |
|
|
const soundBtn = document.getElementById('sound-btn'); |
|
|
const newPatternBtn = document.getElementById('new-pattern-btn'); |
|
|
const timerElement = document.getElementById('timer'); |
|
|
const messageElement = document.getElementById('message'); |
|
|
const patternButtons = document.querySelectorAll('.pattern-btn'); |
|
|
|
|
|
|
|
|
const correctSound = document.getElementById('correct-sound'); |
|
|
const wrongSound = document.getElementById('wrong-sound'); |
|
|
const celebrationSound = document.getElementById('celebration-sound'); |
|
|
const clickSound = document.getElementById('click-sound'); |
|
|
|
|
|
let dots = []; |
|
|
let lines = []; |
|
|
let currentNumber = 1; |
|
|
let gameStarted = false; |
|
|
let startTime; |
|
|
let timerInterval; |
|
|
let completedDots = []; |
|
|
let currentPattern = 'numbers'; |
|
|
let soundEnabled = true; |
|
|
let currentPatternIndex = 0; |
|
|
|
|
|
|
|
|
const numberPatterns = [ |
|
|
{ |
|
|
name: "Numbers 1-9 (Square)", |
|
|
items: [1, 2, 3, 4, 5, 6, 7, 8, 9], |
|
|
positions: [ |
|
|
{x: 15, y: 15}, |
|
|
{x: 50, y: 15}, |
|
|
{x: 85, y: 15}, |
|
|
{x: 85, y: 50}, |
|
|
{x: 85, y: 85}, |
|
|
{x: 50, y: 85}, |
|
|
{x: 15, y: 85}, |
|
|
{x: 15, y: 50}, |
|
|
{x: 50, y: 50} |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Numbers 1-9 (Zigzag)", |
|
|
items: [1, 2, 3, 4, 5, 6, 7, 8, 9], |
|
|
positions: [ |
|
|
{x: 15, y: 15}, |
|
|
{x: 85, y: 15}, |
|
|
{x: 15, y: 30}, |
|
|
{x: 85, y: 30}, |
|
|
{x: 15, y: 45}, |
|
|
{x: 85, y: 45}, |
|
|
{x: 15, y: 60}, |
|
|
{x: 85, y: 60}, |
|
|
{x: 50, y: 85} |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Numbers 1-9 (Spiral)", |
|
|
items: [1, 2, 3, 4, 5, 6, 7, 8, 9], |
|
|
positions: [ |
|
|
{x: 50, y: 15}, |
|
|
{x: 70, y: 15}, |
|
|
{x: 70, y: 35}, |
|
|
{x: 50, y: 35}, |
|
|
{x: 50, y: 55}, |
|
|
{x: 70, y: 55}, |
|
|
{x: 70, y: 75}, |
|
|
{x: 50, y: 75}, |
|
|
{x: 30, y: 75} |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Numbers 1-9 (Diamond)", |
|
|
items: [1, 2, 3, 4, 5, 6, 7, 8, 9], |
|
|
positions: [ |
|
|
{x: 50, y: 15}, |
|
|
{x: 65, y: 30}, |
|
|
{x: 80, y: 45}, |
|
|
{x: 65, y: 60}, |
|
|
{x: 50, y: 75}, |
|
|
{x: 35, y: 60}, |
|
|
{x: 20, y: 45}, |
|
|
{x: 35, y: 30}, |
|
|
{x: 50, y: 45} |
|
|
] |
|
|
} |
|
|
]; |
|
|
|
|
|
const letterPatterns = [ |
|
|
{ |
|
|
name: "Letters A-I (Circle)", |
|
|
items: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'], |
|
|
positions: [ |
|
|
{x: 50, y: 15}, |
|
|
{x: 75, y: 25}, |
|
|
{x: 85, y: 50}, |
|
|
{x: 75, y: 75}, |
|
|
{x: 50, y: 85}, |
|
|
{x: 25, y: 75}, |
|
|
{x: 15, y: 50}, |
|
|
{x: 25, y: 25}, |
|
|
{x: 50, y: 50} |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Letters A-I (Star)", |
|
|
items: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'], |
|
|
positions: [ |
|
|
{x: 50, y: 15}, |
|
|
{x: 65, y: 35}, |
|
|
{x: 85, y: 35}, |
|
|
{x: 70, y: 55}, |
|
|
{x: 85, y: 75}, |
|
|
{x: 50, y: 65}, |
|
|
{x: 15, y: 75}, |
|
|
{x: 30, y: 55}, |
|
|
{x: 15, y: 35} |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Letters A-I (House)", |
|
|
items: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'], |
|
|
positions: [ |
|
|
{x: 50, y: 15}, |
|
|
{x: 25, y: 35}, |
|
|
{x: 75, y: 35}, |
|
|
{x: 25, y: 75}, |
|
|
{x: 75, y: 75}, |
|
|
{x: 50, y: 75}, |
|
|
{x: 25, y: 55}, |
|
|
{x: 75, y: 55}, |
|
|
{x: 50, y: 55} |
|
|
] |
|
|
}, |
|
|
{ |
|
|
name: "Letters A-I (Tree)", |
|
|
items: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'], |
|
|
positions: [ |
|
|
{x: 50, y: 15}, |
|
|
{x: 40, y: 30}, |
|
|
{x: 60, y: 30}, |
|
|
{x: 30, y: 45}, |
|
|
{x: 70, y: 45}, |
|
|
{x: 50, y: 45}, |
|
|
{x: 40, y: 60}, |
|
|
{x: 60, y: 60}, |
|
|
{x: 50, y: 75} |
|
|
] |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
initGame(); |
|
|
|
|
|
function initGame() { |
|
|
gameContainer.innerHTML = ''; |
|
|
dots = []; |
|
|
lines = []; |
|
|
currentNumber = 1; |
|
|
gameStarted = false; |
|
|
completedDots = []; |
|
|
clearInterval(timerInterval); |
|
|
timerElement.innerHTML = '<i class="fas fa-clock mr-2"></i> 00:00'; |
|
|
messageElement.textContent = ''; |
|
|
messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full'; |
|
|
|
|
|
|
|
|
let pattern; |
|
|
if (currentPattern === 'numbers') { |
|
|
pattern = numberPatterns[currentPatternIndex % numberPatterns.length]; |
|
|
} else { |
|
|
pattern = letterPatterns[currentPatternIndex % letterPatterns.length]; |
|
|
} |
|
|
|
|
|
|
|
|
const containerWidth = gameContainer.clientWidth; |
|
|
const containerHeight = gameContainer.clientHeight; |
|
|
|
|
|
|
|
|
for (let i = 0; i < pattern.items.length; i++) { |
|
|
const pos = pattern.positions[i]; |
|
|
const x = (pos.x / 100) * containerWidth; |
|
|
const y = (pos.y / 100) * containerHeight; |
|
|
|
|
|
const dot = document.createElement('div'); |
|
|
dot.className = 'dot absolute bg-gray-300 text-gray-700'; |
|
|
dot.textContent = pattern.items[i]; |
|
|
dot.style.left = `${x - 30}px`; |
|
|
dot.style.top = `${y - 30}px`; |
|
|
dot.dataset.number = i + 1; |
|
|
|
|
|
dot.addEventListener('click', () => handleDotClick(dot)); |
|
|
|
|
|
gameContainer.appendChild(dot); |
|
|
dots.push({ |
|
|
element: dot, |
|
|
x: x, |
|
|
y: y, |
|
|
number: i + 1, |
|
|
value: pattern.items[i] |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
updateDotStates(); |
|
|
|
|
|
|
|
|
messageElement.textContent = `Connect the dots to make: ${pattern.name}`; |
|
|
messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-blue-100 text-blue-800'; |
|
|
} |
|
|
|
|
|
function handleDotClick(dot) { |
|
|
if (soundEnabled) clickSound.play(); |
|
|
|
|
|
const dotNumber = parseInt(dot.dataset.number); |
|
|
|
|
|
if (dotNumber === currentNumber) { |
|
|
if (!gameStarted) { |
|
|
gameStarted = true; |
|
|
startTime = new Date(); |
|
|
timerInterval = setInterval(updateTimer, 1000); |
|
|
} |
|
|
|
|
|
|
|
|
completedDots.push(dotNumber); |
|
|
dot.classList.remove('bg-gray-300', 'text-gray-700'); |
|
|
dot.classList.add('bg-green-500', 'text-white', 'completed'); |
|
|
|
|
|
|
|
|
if (soundEnabled) correctSound.play(); |
|
|
|
|
|
|
|
|
if (completedDots.length > 1) { |
|
|
const prevDot = dots.find(d => d.number === completedDots[completedDots.length - 2]); |
|
|
const currentDot = dots.find(d => d.number === dotNumber); |
|
|
|
|
|
drawLine(prevDot, currentDot); |
|
|
} |
|
|
|
|
|
|
|
|
currentNumber++; |
|
|
|
|
|
|
|
|
if (currentNumber > dots.length) { |
|
|
clearInterval(timerInterval); |
|
|
messageElement.textContent = `Great job! You completed the pattern!`; |
|
|
messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-green-100 text-green-800'; |
|
|
|
|
|
if (soundEnabled) { |
|
|
celebrationSound.currentTime = 0; |
|
|
celebrationSound.play(); |
|
|
} |
|
|
createConfetti(); |
|
|
showCelebration(); |
|
|
} |
|
|
|
|
|
updateDotStates(); |
|
|
} else if (dotNumber < currentNumber) { |
|
|
|
|
|
messageElement.textContent = `You already connected ${dots.find(d => d.number === dotNumber).value}`; |
|
|
messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-blue-100 text-blue-800'; |
|
|
|
|
|
setTimeout(() => { |
|
|
if (currentNumber <= dots.length) { |
|
|
messageElement.textContent = `Next is: ${dots.find(d => d.number === currentNumber).value}`; |
|
|
messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-blue-100 text-blue-800'; |
|
|
} else { |
|
|
messageElement.textContent = ''; |
|
|
} |
|
|
}, 1500); |
|
|
} else { |
|
|
|
|
|
const nextDotValue = dots.find(d => d.number === currentNumber).value; |
|
|
messageElement.textContent = `Oops! Try connecting ${nextDotValue} next`; |
|
|
messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-red-100 text-red-800'; |
|
|
|
|
|
if (soundEnabled) wrongSound.play(); |
|
|
|
|
|
setTimeout(() => { |
|
|
if (currentNumber <= dots.length) { |
|
|
messageElement.textContent = `Next is: ${nextDotValue}`; |
|
|
messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-blue-100 text-blue-800'; |
|
|
} else { |
|
|
messageElement.textContent = ''; |
|
|
} |
|
|
}, 1500); |
|
|
} |
|
|
} |
|
|
|
|
|
function updateDotStates() { |
|
|
dots.forEach(dot => { |
|
|
const dotElement = dot.element; |
|
|
const dotNumber = dot.number; |
|
|
|
|
|
|
|
|
dotElement.classList.remove('bg-blue-500', 'text-white', 'active'); |
|
|
|
|
|
if (completedDots.includes(dotNumber)) { |
|
|
dotElement.classList.add('completed'); |
|
|
} else if (dotNumber === currentNumber) { |
|
|
dotElement.classList.add('bg-blue-500', 'text-white', 'active'); |
|
|
} else { |
|
|
dotElement.classList.add('bg-gray-300', 'text-gray-700'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function drawLine(startDot, endDot) { |
|
|
const line = document.createElement('div'); |
|
|
line.className = 'line'; |
|
|
|
|
|
|
|
|
const x1 = startDot.x; |
|
|
const y1 = startDot.y; |
|
|
const x2 = endDot.x; |
|
|
const y2 = endDot.y; |
|
|
|
|
|
const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); |
|
|
const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI; |
|
|
|
|
|
line.style.width = `${length}px`; |
|
|
line.style.left = `${x1}px`; |
|
|
line.style.top = `${y1}px`; |
|
|
line.style.transform = `rotate(${angle}deg)`; |
|
|
|
|
|
gameContainer.appendChild(line); |
|
|
lines.push(line); |
|
|
} |
|
|
|
|
|
function updateTimer() { |
|
|
const currentTime = new Date(); |
|
|
const elapsedTime = Math.floor((currentTime - startTime) / 1000); |
|
|
|
|
|
const minutes = Math.floor(elapsedTime / 60).toString().padStart(2, '0'); |
|
|
const seconds = (elapsedTime % 60).toString().padStart(2, '0'); |
|
|
|
|
|
timerElement.innerHTML = `<i class="fas fa-clock mr-2"></i> ${minutes}:${seconds}`; |
|
|
} |
|
|
|
|
|
function createConfetti() { |
|
|
for (let i = 0; i < 150; i++) { |
|
|
const confetti = document.createElement('div'); |
|
|
confetti.className = 'confetti'; |
|
|
|
|
|
|
|
|
const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff', '#f90', '#09f', '#90f']; |
|
|
const randomColor = colors[Math.floor(Math.random() * colors.length)]; |
|
|
confetti.style.backgroundColor = randomColor; |
|
|
|
|
|
|
|
|
const shapes = ['circle', 'square', 'triangle']; |
|
|
const randomShape = shapes[Math.floor(Math.random() * shapes.length)]; |
|
|
|
|
|
if (randomShape === 'square') { |
|
|
confetti.style.borderRadius = '0'; |
|
|
} else if (randomShape === 'triangle') { |
|
|
confetti.style.width = '0'; |
|
|
confetti.style.height = '0'; |
|
|
confetti.style.backgroundColor = 'transparent'; |
|
|
confetti.style.borderLeft = '8px solid transparent'; |
|
|
confetti.style.borderRight = '8px solid transparent'; |
|
|
confetti.style.borderBottom = `16px solid ${randomColor}`; |
|
|
} |
|
|
|
|
|
|
|
|
const gameRect = gameContainer.getBoundingClientRect(); |
|
|
const x = Math.random() * gameRect.width; |
|
|
confetti.style.left = `${x}px`; |
|
|
confetti.style.top = `-20px`; |
|
|
|
|
|
|
|
|
const size = Math.random() * 15 + 5; |
|
|
if (randomShape !== 'triangle') { |
|
|
confetti.style.width = `${size}px`; |
|
|
confetti.style.height = `${size}px`; |
|
|
} |
|
|
confetti.style.animationDuration = `${Math.random() * 2 + 2}s`; |
|
|
|
|
|
document.body.appendChild(confetti); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
confetti.remove(); |
|
|
}, 3000); |
|
|
} |
|
|
} |
|
|
|
|
|
function showCelebration() { |
|
|
const celebration = document.createElement('div'); |
|
|
celebration.className = 'celebration'; |
|
|
celebration.innerHTML = '<div class="text-center"><div>🎉</div><div class="text-3xl mt-4">Well Done!</div></div>'; |
|
|
|
|
|
document.body.appendChild(celebration); |
|
|
|
|
|
setTimeout(() => { |
|
|
celebration.remove(); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
function showHint() { |
|
|
if (currentNumber > dots.length) return; |
|
|
|
|
|
const nextDot = dots.find(d => d.number === currentNumber); |
|
|
if (nextDot) { |
|
|
nextDot.element.classList.add('pulse'); |
|
|
|
|
|
if (soundEnabled) clickSound.play(); |
|
|
|
|
|
setTimeout(() => { |
|
|
nextDot.element.classList.remove('pulse'); |
|
|
}, 2000); |
|
|
|
|
|
messageElement.textContent = `Hint: Next is ${nextDot.value}`; |
|
|
messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-yellow-100 text-yellow-800'; |
|
|
setTimeout(() => { |
|
|
if (currentNumber <= dots.length) { |
|
|
messageElement.textContent = `Next is: ${nextDot.value}`; |
|
|
messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-blue-100 text-blue-800'; |
|
|
} else { |
|
|
messageElement.textContent = ''; |
|
|
} |
|
|
}, 2000); |
|
|
} |
|
|
} |
|
|
|
|
|
function toggleSound() { |
|
|
soundEnabled = !soundEnabled; |
|
|
if (soundEnabled) { |
|
|
soundBtn.innerHTML = '<i class="fas fa-volume-up mr-2"></i> Sound On'; |
|
|
soundBtn.className = 'px-6 py-3 bg-indigo-100 text-indigo-800 rounded-xl border-2 border-indigo-200 font-bold hover:bg-indigo-200 transition flex items-center'; |
|
|
} else { |
|
|
soundBtn.innerHTML = '<i class="fas fa-volume-mute mr-2"></i> Sound Off'; |
|
|
soundBtn.className = 'px-6 py-3 bg-gray-200 text-gray-800 rounded-xl border-2 border-gray-300 font-bold hover:bg-gray-300 transition flex items-center'; |
|
|
} |
|
|
} |
|
|
|
|
|
function changePattern(pattern) { |
|
|
currentPattern = pattern; |
|
|
currentPatternIndex = Math.floor(Math.random() * (pattern === 'numbers' ? numberPatterns.length : letterPatterns.length)); |
|
|
patternButtons.forEach(btn => { |
|
|
if (btn.dataset.pattern === pattern) { |
|
|
btn.classList.add('active'); |
|
|
} else { |
|
|
btn.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
if (soundEnabled) clickSound.play(); |
|
|
initGame(); |
|
|
} |
|
|
|
|
|
function getNewPattern() { |
|
|
currentPatternIndex++; |
|
|
if (soundEnabled) clickSound.play(); |
|
|
initGame(); |
|
|
} |
|
|
|
|
|
|
|
|
resetBtn.addEventListener('click', () => { |
|
|
if (soundEnabled) clickSound.play(); |
|
|
initGame(); |
|
|
}); |
|
|
|
|
|
hintBtn.addEventListener('click', showHint); |
|
|
soundBtn.addEventListener('click', toggleSound); |
|
|
newPatternBtn.addEventListener('click', getNewPattern); |
|
|
|
|
|
patternButtons.forEach(btn => { |
|
|
btn.addEventListener('click', () => changePattern(btn.dataset.pattern)); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', initGame); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=madansa7/rajagame" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
