Hello, I am learning to build simple games. Thanks for stopping by!
{ btnPizza.classList.add('active'); btnSkater.classList.remove('active'); pizzaDiv.classList.add('active'); skateDiv.classList.remove('active'); }); btnSkater.addEventListener('click', ()=>{ btnSkater.classList.add('active'); btnPizza.classList.remove('active'); skateDiv.classList.add('active'); pizzaDiv.classList.remove('active'); }); // ─── Pizza Game Logic ─── let currentSize = 'small'; const sizeBtns = document.querySelectorAll('#pizzaWrapper #sizeSelector button'); const pizzaSmall = document.getElementById('pizza-small'); const pizzaLarge = document.getElementById('pizza-large'); const spinner = document.getElementById('spinner'); const trash = document.getElementById('trashBin'); const freshMap = { heart: "https://cutegamezone.carrd.co/assets/images/gallery01/2c3e6a70_original.png?v=8ebd92ac", star: "https://cutegamezone.carrd.co/assets/images/gallery01/109e6afa_original.png?v=8ebd92ac", flower: "https://cutegamezone.carrd.co/assets/images/gallery01/bea8e411_original.png?v=8ebd92ac", olive: "https://cutegamezone.carrd.co/assets/images/gallery01/b337bfea_original.png?v=8ebd92ac" }; let dragData = null; // Switch size sizeBtns.forEach(btn=>{ btn.addEventListener('click', ()=>{ currentSize = btn.dataset.size; document.querySelector('#pizzaWrapper #sizeSelector button.active') .classList.remove('active'); btn.classList.add('active'); pizzaSmall.classList.toggle('active', currentSize==='small'); pizzaLarge.classList.toggle('active', currentSize==='large'); }); }); // Drag start/end document.querySelectorAll('#pizzaWrapper .topping').forEach(t=>{ t.addEventListener('dragstart', e=>{ dragData = { shape: t.dataset.shape, spoiled: t.dataset.spoiled==='true', elem: t }; if (!dragData.spoiled) { const slotEl = document.querySelector( `#pizzaWrapper .pizza-container.${currentSize} .slot[data-shape="${dragData.shape}"][data-filled="false"]` ); if (slotEl) { const r = slotEl.getBoundingClientRect(); const p = slotEl.parentElement.getBoundingClientRect(); spinner.style.left = (r.left - p.left + r.width/2)+'px'; spinner.style.top = (r.top - p.top + r.height/2)+'px'; spinner.style.display='block'; } } }); t.addEventListener('dragend', ()=>{ spinner.style.display='none'; }); }); // Slot drop document.querySelectorAll('#pizzaWrapper .slot').forEach(s=>{ s.addEventListener('dragover', e=> e.preventDefault()); s.addEventListener('drop', e=>{ e.preventDefault(); spinner.style.display='none'; if (!dragData) return; if (!dragData.spoiled && dragData.shape===s.dataset.shape && s.dataset.filled==='false') { s.src = freshMap[dragData.shape]; s.dataset.filled = 'true'; dragData.elem.remove(); checkPizzaWin(); } else { alert("That doesn’t fit there!"); } dragData = null; }); }); function checkPizzaWin(){ const slots = document.querySelectorAll( `#pizzaWrapper .pizza-container.${currentSize} .slot` ); const allFilled = [...slots].every(s=>s.dataset.filled==='true'); const remains = document.querySelectorAll('#pizzaWrapper .topping').length; if (allFilled && remains===0) { setTimeout(()=>alert("🎉 You matched the pizza!"),200); } } </script></body></html>' >
Codepen
Codepen
Instagram
Instagram
Email
Email
Created by Studio Midnight with the help Cy the gpt assistant!
