WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Halloween Matching Game
2344
Andev.web
Open In Editor
Publish Your Code
Recommended
16 December 2025
Street Fighter II Turbo HTML5 Game Emulator
19 May 2025
answer game
22 May 2025
Breakout 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 = ""; }); });