jquery实现随机拼图小游戏代码
代码语言:html
所属分类:游戏
代码描述:jquery实现随机拼图小游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Creepster&family=Poppins:wght@600&display=swap"); body, html { height: 100%; } body { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; background: #222; background: radial-gradient(#000, #333); font-family: "Creepster", sans-serif; } #grid { width: 400px; min-height: 400px; background: #1a1a1a; box-shadow: inset 0 0 10px #000, 0 0 10px #000; position: relative; overflow: hidden; border-radius: 6px; } #grid div { width: 80px; height: 80px; background-image: url("//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png"); background-repeat: no-repeat; background-size: 400px auto; position: absolute; transition: top 0.2s ease-in-out, left 0.2s ease-in-out, opacity 0.5s ease-in-out 0.2s; cursor: pointer; } #grid.alt div { background-image: url("//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png"); } #grid div:nth-child(1) { top: 0px; left: 0px; background-position: 0px 0px; } #grid div:nth-child(2) { top: 0px; left: 80px; background-position: -80px 0px; } #grid div:nth-child(3) { top: 0px; left: 160px; background-position: -160px 0px; } #grid div:nth-child(4) { top: 0px; left: 240px; background-position: -240px 0px; } #grid div:nth-child(5) { top: 0px; left: 320px; background-position: -320px 0px; } #grid div:nth-child(6) { top: 80px; left: 0px; background-position: 0px -80px; } #grid div:nth-child(7) { top: 80px; left: 80px; background-position: -80px -80px; } #grid div:nth-child(8) { top: 80px; left: 160px; background-position: -160px -80px; } #grid div:nth-child(9) { top: 80px; left: 240px; background-position: -240px -80px; } #grid div:nth-child(10) { top: 80px; left: 320px; background-position: -320px -80px; } #grid div:nth-child(11) { top: 160px; left: 0px; background-position: 0px -160px; } #grid div:nth-child(12) { top: 160px; left: 80px; background-position: -80px -160px; } #grid div:nth-child(13) { top: 160px; left: 160px; background-position: -160px -160px; } #grid div:nth-child(14) { top: 160px; left: 240px; background-position: -240px -160px; } #grid div:nth-child(15) { top: 160px; left: 320px; background-position: -320px -160px; } #grid div:nth-child(16) { top: 240px; left: 0px; background-position: 0px -240px; } #grid div:nth-child(17) { top: 240px; left: 80px; background-position: -80px -240px; } #grid div:nth-child(18) { top: 240px; left: 160px; background-position: -160px -240px; } #grid div:nth-child(19) { top: 240px; left: 240px; background-position: -240px -240px; } #grid div:nth-child(20) { top: 240px; left: 320px; background-position: -320px -240px; } #grid div:nth-child(21) { top: 320px; left: 0px; background-position: 0px -320px; } #grid div:nth-child(22) { top: 320px; left: 80px; background-position: -80px -320px; } #grid div:nth-child(23) { top: 320px; left: 160px; background-position: -160px -320px; } #grid div:nth-child(24) { top: 320px; left: 240px; background-position: -240px -320px; } #grid div:nth-child(25) { top: 320px; left: 320px; background-position: -320px -320px; } #tile_5_5.hidden { opacity: 0; pointer-events: none; transition: opacity 0s; } .buttons { height: 40px; } button { background: red; /* #4CAF50 Green */ background: linear-gradient(red, darkred); border: none; color: white; padding: 10px 32px; min-width: 100px; border-radius: 6px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; line-height: 20px; letter-spacing: 1px; font-family: "Poppins", sans-serif; text-shadow: 0 -1px #0009; transition: scale 0.1s ease-in-out; cursor: pointer; } button:hover { scale: 1.02; } button:active { scale: 0.95; } #game-text { position: absolute; pointer-events: none; font-size: 64px; color: red; transform: translateY(-30px); background: linear-gradient(darkred, red); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0px 3px 1px #000); scale: 0.4; opacity: 0; } #game-text.animate { animation: 2s zoomin; } @keyframes zoomin { 0% { scale: 0.4; opacity: 0; } 30% { opacity: 1; } 60% { opacity: 1; } 100% { scale: 1.4; opacity: 0; } } </style> </head> <body > <div id="grid"> <div id=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0