WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Halloween Matching Game
1475
Andev.web
Open In Editor
Publish Your Code
Recommended
15 December 2023
JavaScript Stack Game
19 May 2025
PACK MAN GAME
15 August 2024
Guessing Game
HTML
Copy
Andev Web
Click each layer to stop.
Double-click to reset.
CSS
Copy
html { min-height: 100vh; display: grid; place-items: center; background: #222; } * { box-sizing: border-box; } p { font-family: system-ui; text-align: center; color: orange; } #box { width: 250px; height: 750px; border-radius: 125px; overflow: hidden; transform: scale(0.6); box-shadow: 0px 0px 50px orange; } .layer { width: 1000px; height: 250px; float: left; outline: 1px solid #222; --speed: 1s; } .layer:nth-child(odd) { animation: spin var(--speed) linear infinite; } .layer:nth-child(even) { animation: spin var(--speed) linear reverse infinite; } .piece { width: 250px; aspect-ratio: 1/1; float: left; background: url("https://img.freepik.com/free-vector/happy-halloween-character-collection_23-2148636622.jpg?size=626&ext=jpg&ga=GA1.1.2008272138.1721779200&semt=ais_user"); background-size: 1000px 800px; } @keyframes spin { 100% { transform: translateX(-750px); } } .piece:nth-child(1), .piece:last-child { /* background: red; */ } .piece:nth-child(2) { /* background: green; */ } .piece:nth-child(3) { /* background: blue; */ } .lastpiece { /* background: red; */ } .layer:nth-child(1) .piece:nth-child(1), .layer:nth-child(1) .piece:nth-child(4) { background-position: -10px -50px; } .layer:nth-child(2) .piece:nth-child(1), .layer:nth-child(2) .piece:nth-child(4) { background-position: -10px -300px; } .layer:nth-child(3) .piece:nth-child(1), .layer:nth-child(3) .piece:nth-child(4) { background-position: -10px -550px; } .layer:nth-child(1) .piece:nth-child(2) { background-position: -250px -50px; } .layer:nth-child(2) .piece:nth-child(2) { background-position: -250px -300px; } .layer:nth-child(3) .piece:nth-child(2) { background-position: -250px -550px; } .layer:nth-child(1) .piece:nth-child(3) { background-position: -500px -50px; } .layer:nth-child(2) .piece:nth-child(3) { background-position: -500px -300px; } .layer:nth-child(3) .piece:nth-child(3) { background-position: -500px -550px; }
JS
Copy
let layers = document.querySelectorAll(".layer"); layers.forEach(function (elm) { elm.addEventListener("click", function (e) { let p = document.elementFromPoint(e.clientX, e.clientY); elm.style.animation = "none"; if (p.classList.contains("one") || p.classList.contains("four")) { elm.style.transform = "translateX(0px)"; } if (p.classList.contains("two")) { elm.style.transform = "translateX(-250px)"; } if (p.classList.contains("three")) { elm.style.transform = "translateX(-500px)"; } }); elm.addEventListener("dblclick", function (e) { let p = document.elementFromPoint(e.clientX, e.clientY); elm.style.animation = ""; elm.style.transform = ""; }); });