WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Halloween Matching Game
1481
Andev.web
Open In Editor
Publish Your Code
Recommended
27 February 2025
STACK GAME by TONY
19 May 2025
answer game
21 May 2024
Snake game
HTML
Copy
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Andev Web</title> <link rel="stylesheet" href="./style.css"> </head> <body> <p>Click each layer to stop.<br> Double-click to reset. </p> <div id="box"> <div class='layer'> <div class='piece one'></div> <div class='piece two'></div> <div class='piece three'></div> <div class='piece four'></div> </div> <div class='layer'> <div class='piece one'></div> <div class='piece two'></div> <div class='piece three'></div> <div class='piece four'></div> </div> <div class='layer'> <div class='piece one'></div> <div class='piece two'></div> <div class='piece three'></div> <div class='piece four'></div> </div> </div> <script src="./script.js"></script> </body> </html>
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 = ""; }); });
