let cnv; let imgShellsJpg; let shells = []; let selectedShells = []; let matchSound; let gameStartTime; const gameDuration = 5 * 60 * 1000; // 5 minutes in milliseconds let gameActive = true; let draggingShell = null; let offsetX, offsetY; // Shell types with specific drawing functions and colors const SHELL_TYPES = [ { color: '#D4C6B1', name: 'conch', drawFunc: 'drawConch' }, // Light sandy color { color: '#B0C4DE', name: 'scallop', drawFunc: 'drawScallop' }, // Light steel blue { color: '#A9A9A9', name: 'spiral', drawFunc: 'drawSpiral' }, // Dark grey { color: '#5F9EA0', name: 'mussel', drawFunc: 'drawMussel' } // Cadet blue ]; function preload() { imgShellsJpg = loadImage('https://dae.transientusercontent.xyz/uploads/734aede2-40a1-4fde-b6e7-f2e970aab695'); // Using a simple placeholder sound. Please replace with your actual sound file! // You can upload an audio file in the Library tab and use its URL. matchSound = loadSound('https://www.soundjay.com/buttons/sounds/button-29.mp3'); } function setup() { cnv = createCanvas(windowWidth, windowHeight); imageMode(CENTER); // detect touch-capable devices once window.isMobile = (('ontouchstart' in window) || navigator.maxTouchPoints > 0) && width < 767; cnv.elt.style.touchAction = 'none'; cnv.elt.addEventListener('touchmove', e => { e.preventDefault(); }, { passive: false }); // Create pairs of shells let shellCount = 20; // 10 pairs, total of 20 shells let shellPositions = []; // Generate random positions without overlap for shells while (shellPositions.length < shellCount) { let newX = random(width * 0.15, width * 0.85); let newY = random(height * 0.2, height * 0.8); let newSize = random(width * 0.08, width * 0.12); let overlap = false; for (let pos of shellPositions) { let d = dist(newX, newY, pos.x, pos.y); if (d < (newSize / 2 + pos.size / 2 + 20)) { // Add padding overlap = true; break; } } if (!overlap) { shellPositions.push({ x: newX, y: newY, size: newSize }); } } // Assign types and create shell objects let typesAssigned = []; for (let i = 0; i < shellCount / 2; i++) { // Cycle through available shell types for pairs typesAssigned.push(i % SHELL_TYPES.length, i % SHELL_TYPES.length); } typesAssigned = shuffle(typesAssigned); for (let i = 0; i < shellCount; i++) { let pos = shellPositions[i]; shells.push(new Shell(pos.x, pos.y, pos.size, typesAssigned[i])); } gameStartTime = millis(); } function draw() { // Draw background image scaled to fit image( imgShellsJpg, width / 2, height / 2, imgShellsJpg.width * min(width / imgShellsJpg.width, height / imgShellsJpg.height, 1), imgShellsJpg.height * min(width / imgShellsJpg.width, height / imgShellsJpg.height, 1) ); for (let shell of shells) { shell.display(); } // Game logic only if active if (gameActive) { let elapsedTime = millis() - gameStartTime; let remainingTime = max(0, gameDuration - elapsedTime); // Check if time is up if (remainingTime <= 0) { gameActive = false; } // Display timer let minutes = floor(remainingTime / 60000); let seconds = floor((remainingTime % 60000) / 1000); let timeString = nf(minutes, 2) + ':' + nf(seconds, 2); fill(255); stroke(0); strokeWeight(3); textSize(width * 0.04); textAlign(RIGHT, TOP); text(timeString, width - 20, 20); // Check if all shells matched if (shells.every(s => s.isMatched)) { gameActive = false; // End game if all matched before time runs out } } // End game screen / credits if (!gameActive) { fill(0, 150); rect(0, 0, width, height); fill(255); textSize(width * 0.05); textAlign(CENTER, CENTER); text('Game Over!', width / 2, height * 0.4); if (shells.every(s => s.isMatched)) { text('All shells matched! Great job!', width / 2, height * 0.5); } else { text('Time is up!', width / 2, height * 0.5); } textSize(width * 0.02); text('Designed by and created by', width / 2, height * 0.65); textSize(width * 0.03); text('SURABHI SINGHI', width / 2, height * 0.7); } } // --- Interaction Handlers --- // Unified click/touch end logic for selecting shells function handleSelectClick() { if (!gameActive || draggingShell) return; // Don't select if dragging or game over for (let i = shells.length - 1; i >= 0; i--) { let shell = shells[i]; if (!shell.isMatched && shell.contains(mouseX, mouseY)) { // If this shell is already selected, deselect it if (selectedShells.includes(shell)) { shell.isSelected = false; selectedShells = selectedShells.filter(s => s !== shell); return; // Only deselect one at a time } // If less than two shells are selected, select this one if (selectedShells.length < 2) { shell.isSelected = true; selectedShells.push(shell); if (selectedShells.length === 2) { // Check for a match if (selectedShells[0].type === selectedShells[1].type) { // Match found! matchSound.play(); // Play sound effect for (let s of selectedShells) { s.isMatched = true; s.isSelected = false; // Deselect after matching } selectedShells = []; // Clear selected shells } else { // No match, deselect after a short delay setTimeout(() => { for (let s of selectedShells) { s.isSelected = false; } selectedShells = []; }, 700); // Wait a bit before deselecting } } return; // Only interact with one shell per click } } } } function mousePressed() { if (!gameActive) return; // Don't allow interaction if game is over // Check if a shell is clicked for dragging for (let i = shells.length - 1; i >= 0; i--) { let shell = shells[i]; if (!shell.isMatched && shell.contains(mouseX, mouseY)) { draggingShell = shell; offsetX = mouseX - shell.x; offsetY = mouseY - shell.y; // Bring the dragged shell to the front of the array to draw on top shells.splice(i, 1); shells.push(shell); return; // Only start dragging one shell } } } function mouseDragged() { if (!gameActive || !draggingShell) return; draggingShell.x = mouseX - offsetX; draggingShell.y = mouseY - offsetY; } function mouseReleased() { if (!gameActive) return; if (draggingShell) { draggingShell = null; } else { // If no shell was being dragged, then it was a click for selection handleSelectClick(); } } function touchStarted(event) { if (!gameActive) return; // Check if a shell is touched for dragging for (let i = shells.length - 1; i >= 0; i--) { let shell = shells[i]; if (!shell.isMatched && shell.contains(mouseX, mouseY)) { draggingShell = shell; offsetX = mouseX - shell.x; offsetY = mouseY - shell.y; // Bring the dragged shell to the front of the array to draw on top shells.splice(i, 1); shells.push(shell); return; // Only start dragging one shell } } } function touchMoved(event) { if (!gameActive || !draggingShell) return; draggingShell.x = mouseX - offsetX; draggingShell.y = mouseY - offsetY; return false; // Prevent default touch scroll on mobile } function touchEnded(event) { if (!gameActive) return; if (draggingShell) { draggingShell = null; } else { // If no shell was being dragged, then it was a tap for selection handleSelectClick(); } return false; // prevent default scrolling } function windowResized() { resizeCanvas(windowWidth, windowHeight); // Re-position shells if needed, or just let them scale with the canvas } class Shell { constructor(x, y, size, type) { this.x = x; this.y = y; this.size = size; this.type = type; this.isMatched = false; this.isSelected = false; this.color = SHELL_TYPES[this.type].color; this.drawFunc = SHELL_TYPES[this.type].drawFunc; } display() { if (this.isMatched) return; // Don't draw matched shells push(); translate(this.x, this.y); // Base shell color fill(this.color); stroke(0); strokeWeight(2); // Highlight if selected or being dragged if (this.isSelected || this === draggingShell) { stroke(255, 255, 0); // Yellow highlight strokeWeight(4); } // Call the specific drawing function for the shell type this[this.drawFunc](this.size); pop(); } // Drawing functions for different shell types drawConch(size) { let s = size * 0.5; // A more abstract conch-like spiral beginShape(); vertex(s * 0.2, -s * 0.8); bezierVertex(s * 0.8, -s * 0.8, s * 0.9, -s * 0.2, s * 0.5, 0); bezierVertex(s * 0.3, s * 0.4, -s * 0.3, s * 0.5, -s * 0.5, s * 0.2); bezierVertex(-s * 0.8, -s * 0.3, -s * 0.6, -s * 0.9, s * 0.2, -s * 0.8); endShape(CLOSE); } drawScallop(size) { let s = size * 0.5; ellipse(0, 0, s * 1.2, s * 1.1); for (let i = 0; i < 7; i++) { let angle = map(i, 0, 6, -PI / 2 + PI / 8, PI / 2 - PI / 8); let x1 = s * 0.7 * cos(angle); let y1 = s * 0.7 * sin(angle); let x2 = s * 1.1 * cos(angle); let y2 = s * 1.1 * sin(angle); line(x1, y1, x2, y2); } } drawSpiral(size) { let s = size * 0.5; beginShape(); for (let i = 0; i < 360; i += 5) { let angle = radians(i); let r = map(i, 0, 360, s * 0.1, s * 0.7); let x = r * cos(angle); let y = r * sin(angle); vertex(x, y); } endShape(); ellipse(0, 0, s * 0.2, s * 0.2); } drawMussel(size) { let s = size * 0.5; beginShape(); curveVertex(0, -s * 0.9); curveVertex(0, -s * 0.9); curveVertex(s * 0.4, -s * 0.7); curveVertex(s * 0.6, 0); curveVertex(s * 0.4, s * 0.7); curveVertex(0, s * 0.9); curveVertex(0, s * 0.9); curveVertex(-s * 0.4, s * 0.7); curveVertex(-s * 0.6, 0); curveVertex(-s * 0.4, -s * 0.7); curveVertex(0, -s * 0.9); endShape(CLOSE); } contains(px, py) { // Simple circular hit test for now, can be refined for complex shapes let d = dist(px, py, this.x, this.y); return d < this.size / 2; } }

visualviibrance

Shell Catch Match

Shell Catch Match