Welcome to CODEBOX! (Branch 1613)
✨ นายพิสิฐพงศ์ ปาละวิสุทธิ์
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> body { background: #E69A8DFF; margin: 2em; font-family: sans-serif; } .container { margin: 20px; position: relative; height: 480px; width: 480px; border: 2px solid #fff; z-index: -1; } .square { --h: 120px; height: var(--h); width: var(--h); position: absolute; transition: left 0.5s, top 0.5s; box-sizing: border-box; font-size: 30px; display: flex; justify-content: center; align-items: center; z-index: 1; cursor: pointer; margin: auto; } .square-back1 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543839531368448/1.jpg"); background-size: contain; } .square-back2 { background: url("https://media.discordapp.net/attachments/755789590240952371/806543843096920064/2.jpg"); background-size: contain; } .square-back3 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543850867916870/3.jpg"); background-size: contain; } .square-back4 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543853887946782/4.jpg"); background-size: contain; } .square-back5 { background: url("https://media.discordapp.net/attachments/755789590240952371/806543858598019102/5.jpg"); background-size: contain; } .square-back6 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543863502078044/6.jpg"); background-size: contain; } .square-back7 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543872263847966/7.jpg"); background-size: contain; } .square-back8 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543876583718912/8.jpg"); background-size: contain; } .square-back9 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543876588044289/9.jpg"); background-size: contain; } .square-back10 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543892585119785/10.jpg"); background-size: contain; } .square-back11 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543896829624370/11.jpg"); background-size: contain; } .square-back12 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543892412628992/12.jpg"); background-size: contain; } .square-back13 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543905997979668/13.jpg"); background-size: contain; } .square-back14 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543914709286912/14.jpg"); background-size: contain; } .square-back15 { background: url("https://cdn.discordapp.com/attachments/755789590240952371/806543914386849842/15.jpg"); background-size: contain; } .empty { z-index: 1; } [data-pos="0"] { left: 0; top: 0; } [data-pos="1"] { left: calc(1*var(--h)); top: 0; } [data-pos="2"] { left: calc(2*var(--h)); top: 0; } [data-pos="3"] { left: calc(3*var(--h)); top: 0; } [data-pos="4"] { left: 0; top: calc(1*var(--h)); } [data-pos="5"] { left: calc(1*var(--h)); top: calc(1*var(--h)); } [data-pos="6"] { left: calc(2*var(--h)); top: calc(1*var(--h)); } [data-pos="7"] { left: calc(3*var(--h)); top: calc(1*var(--h)); } [data-pos="8"] { left: 0; top: calc(2*var(--h)); } [data-pos="9"] { left: calc(1*var(--h)); top: calc(2*var(--h)); } [data-pos="10"] { left: calc(2*var(--h)); top: calc(2*var(--h)); } [data-pos="11"] { left: calc(3*var(--h)); top: calc(2*var(--h)); } [data-pos="12"] { left: 0; top: calc(3*var(--h)); } [data-pos="13"] { left: calc(1*var(--h)); top: calc(3*var(--h)); } [data-pos="14"] { left: calc(2*var(--h)); top: calc(3*var(--h)); } [data-pos="15"] { left: calc(3*var(--h)); top: calc(3*var(--h)); } .header { background-color: rgb(110, 95, 143); display: grid; grid-template-columns: 30% 1fr; border-radius: 20px; } #logo { color: hsl(0, 100%, 100%); text-align: center; align-self: center; font-size: 1.9em; position: relative; display: inline-block; } .credit { text-align: right; align-self: center; margin-right: 20px; } .credit a { text-decoration: none; color: #fff; font-size: 1.3em; padding: 10px; } .credit a:hover { background-color: #6b8e23; border-radius: 10px; } .all-content { display: grid; box-sizing: border-box; grid-template-rows: 10% 1fr; } .bubble, .bubbles { width: 400px; height: 400px; background: hsl(60, 90%, 70%); border-radius: 100%; position: fixed; bottom: -100px; left: -200px; opacity: .3; z-index: -1; } .bubbles { background: hsl(90, 100%, 90%); bottom: -250px; left: -50px; } .dropdown { position: fixed; bottom: 10px; right: 10px; background-color: #fff; border: 2px solid #fff; } .dropdown-content { display: none; position: fixed; background-color: #fff; border: 2px solid #fff; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown:hover .dropdown-content { display: block; bottom: 190px; right: 20px; } </style> </head> <body> <div class="dropdown"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/798857969986830336/image0.jpg" width="100" ;height="100"> <div class="dropdown-content"> <img src="https://cdn.discordapp.com/attachments/798205933716635681/798857969986830336/image0.jpg" width="480" ;height="480"> </div> </div> <div class="bubble"></div> <div class="bubbles"></div> <div class="all-content"> <div class="header"> <div id="logo"><b>Arin Puzzle</b></div> <div class="credit"><a href="https://codepen.io/ngirard/pen/MJELze">Reference</a></div> </div> <center> <div class="container"> <div class="square square-back1" data-pos="0"></div> <div class="square square-back14" data-pos="1"></div> <div class="square square-back9" data-pos="2"></div> <div class="square square-back3" data-pos="3"></div> <div class="square square-back12" data-pos="4"></div> <div class="square empty" data-pos="5"></div> <div class="square square-back2" data-pos="6"></div> <div class="square square-back6" data-pos="7"></div> <div class="square square-back7" data-pos="8"></div> <div class="square square-back10" data-pos="9"></div> <div class="square square-back11" data-pos="10"></div> <div class="square square-back4" data-pos="11"></div> <div class="square square-back15" data-pos="12"></div> <div class="square square-back5" data-pos="13"></div> <div class="square square-back13" data-pos="14"></div> <div class="square square-back8" data-pos="15"></div> </div> </center> </div> <script> var squares = document.querySelectorAll('.square'); squares.forEach(square => { square.addEventListener('click', e => { e.preventDefault(); var firstPos = parseInt(e.target.dataset.pos); var empty = document.querySelectorAll('.empty')[0]; var secondPos = parseInt(empty.dataset.pos); var top = secondPos - 4; var bottom = secondPos + 4; var left = secondPos - 1; var right = secondPos + 1; if (secondPos % 4 - left % 4 < 1) { left = -1; } if (right % 4 - secondPos % 4 < 1) { right = -1; } var posibilities = [left, right, top, bottom]; if (posibilities.includes(firstPos)) { empty.dataset.pos = firstPos; e.target.dataset.pos = secondPos; } }) }); </script> </body> </html>