Draggable Cards
Credit: JJ
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
SS Clarent Rex
Logic PuzzleCredit: mtirimie
Drag & Drop dictaphoneCredit: BasedGoat and 13 characters (this is so horse coded)
const dictaphone = document.getElementById("dictaphone"); const cylinder = document.getElementById("cylinder"); const container = document.getElementById("container"); const audio = document.getElementById("audiodictaphone"); let dropped = false; cylinder.addEventListener("dragstart", (event) => { event.target.classList.add("dragging"); }); cylinder.addEventListener("dragend", (event) => { event.target.classList.remove("dragging"); }); dictaphone.addEventListener("dragover", (event) => { event.preventDefault(); }); dictaphone.addEventListener("drop", (event) => { event.preventDefault(); if (!dropped) { dropped = true; cylinder.style.display = "none"; dictaphone.classList.add("dropped"); container.classList.add("dropped"); audiodictaphone.play(); } }); const dictaphone2 = document.getElementById("dictaphone2"); const cylinder = document.getElementById("cylinder2"); const container = document.getElementById("container2"); const audio = document.getElementById("audio"); let dropped = false; cylinder2.addEventListener("dragstart", (event) => { event.target.classList.add("dragging"); }); cylinder2.addEventListener("dragend", (event) => { event.target.classList.remove("dragging"); }); dictaphone2.addEventListener("dragover", (event) => { event.preventDefault(); }); dictaphone2.addEventListener("drop", (event) => { event.preventDefault(); if (!dropped) { dropped = true; cylinder2.style.display = "none"; dictaphone2.classList.add("dropped"); container2.classList.add("dropped"); audio2.play(); } }); Win state demoCredit: 13Characters_
function winCondition() { let audio = document.getElementById('win-audio'); audio.play(); let message = document.getElementById('win-message-box') message.style.display = 'block'; setTimeout(function() { message.style.display = 'none'; }, 1500); } function playMusic() { const music = document.getElementById("bg1"); music.play(); } function toggleMusic() { const music = document.getElementById("bg1"); mutebutton = document.getElementById("toggle1"); music.muted = !(music.muted); if (music.muted) { mutebutton.style.backgroundImage = "url('https://file.garden/Zvj5PIl7agkhF1yK/music_off_red.png')"; } else { mutebutton.style.backgroundImage = "url('https://file.garden/Zvj5PIl7agkhF1yK/music_on.png')"; } } document.addEventListener("DOMContentLoaded", (event) => {playMusic()}); /*All the logic is set up, just need to replace image, redirect page, and sounds*/ const hands = [document.getElementById("minutehand"), document.getElementById("hourhand")]; let currentHand = null; let mouseDown = false; const click = document.getElementById("click"); const win = document.getElementById("win"); const redirect = "https://ih1.redbubble.net/image.542385583.7227/flat,800x800,075,f.u2.jpg"; /*<-- change redirect page here*/ const whirlLoop = 0.1; /*<-- change this for when the audio loops*/ /*angles an element towards a coordinate. rotation will be offset by adjust radians*/ function lookAt(element, lookX, lookY, adjust = 0){ rect = element.getBoundingClientRect(); centerX = rect.x + (rect.width / 2); centerY = rect.y + (rect.width / 2); a = centerX - lookX; b = centerY - lookY; angle = Math.atan(b / a); if(a > 0){ angle += Math.PI; } angle += adjust; element.style.transform = "rotate(" + angle + "rad)"; } function calculateAngle(x1, y1, x2, y2){ const a = x2 - x1; const b = y2 - y1; let angle = Math.atan(b / a); if (a > 0){ angle += Math.PI; } return angle; } function PWO_onHover(){ if(currentHand != null){ /*point hand towards mouse*/ const mouseX = event.clientX; const mouseY = event.clientY; lookAt(currentHand, mouseX, mouseY, Math.PI / 2 + (Math.PI * currentHand.dataset.rotationoffset)); /*play click sound*/ if(click.currentTime > 0.1){ click.currentTime = 0; } click.play(); } } function PWO_onClick(){ mouseDown = true; let i = 0; while(i < hands.length){ const hand = hands[i]; i += 1; const mouseX = event.clientX; const mouseY = event.clientY; const rect = hand.getBoundingClientRect(); const centerX = rect.x + (rect.width / 2); const centerY = rect.y + (rect.width / 2); const mouseAngle = calculateAngle(mouseX, mouseY, centerX, centerY); const handAngle = hand.style.transform.substring(7, hand.style.transform.length - 4) - (Math.PI / 2); if(mouseDown && (((handAngle - ((Math.PI / 6) + (Math.PI * hand.dataset.rotationoffset))) < mouseAngle)) && (handAngle + ((Math.PI / 6) - (Math.PI * hand.dataset.rotationoffset)) > mouseAngle)){ currentHand = hand; break; } } } function PWO_onRelease(){ mouseDown = false; currentHand = null; let allCorrect = true; if(checkRotation(hands[0], Math.PI * 0.67, Math.PI / 12)){ hands[0].style.transform = "rotate(" + (Math.PI * 0.67) + "rad)"; } else{allCorrect = false;} if(checkRotation(hands[1], Math.PI * 1.5, Math.PI / 12)){ hands[1].style.transform = "rotate(" + (Math.PI * 1.5) + "rad)"; } else{allCorrect = false;} if(allCorrect){ win.play(); location.href = redirect; } } function PWC_onClick(){ document.getElementById("pocketWatchClosed").style.display = "none"; document.getElementById("pocketWatchOpened").style.display = "grid"; } /*check if the rotation of an object within threshold of goal, goal and threshold are in radians*/ function checkRotation(element, goal, threshold){ const rotation = element.style.transform.substring(7, element.style.transform.length - 4); if(goal - threshold <= rotation && rotation <= goal + threshold){ return true; } else{ return false; } } 
