九宫格拼图小游戏-圣诞资源-CSDN下载

共9个文件

js：3个

xml：2个

jpg：2个

需积分: 5 64 浏览量 2023-12-25 14:36:50 上传评论收藏 121KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

christmasPuzzle.zip （9个子文件）

christmasPuzzle

main.js 36KB

17sucai2.js 4KB

17sucai.js 5KB

.idea

vcs.xml 191B

workspace.xml 3KB

img

2.jpg 71KB

1.jpg 30KB

css

normalize.min.css 3KB

index.html 11KB

<!DOCTYPE html>  <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="apple-mobile-web-app-title" content="17sucai"> <title>CodePen - Sliding Puzzle Game - Animated CSS Grid</title> <link rel="stylesheet" href="./css/normalize.min.css"> <style> /* latin */ @font-face { font-family: 'Fontdiner Swanky'; font-style: normal; font-weight: 400; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } * { box-sizing: border-box; } body { display: grid; place-items: center; height: 100vh; background: #111; color: #fefefe; font-family: 'Fontdiner Swanky', cursive; -webkit-font-smoothing: antialiased; } p { font-family: Helvetica, Arial, sans-serif; } .puzzle { background: linear-gradient(hsl(360, 98%, 36%), hsl(360, 92%, 42%)), url(img/1.jpg); background-blend-mode: multiply; width: 90vw; max-width: 400px; box-shadow: 0 .25em 1em 0 rgba(0, 0, 0, 0.30), inset .25em .25em 1em 0 hsl(360, 88%, 72%), inset .15em .15em .2em 0 hsl(360, 88%, 72%), inset -.25em -.25em 1em 0 hsl(360, 88%, 22%), inset -.15em -.15em .2em 0 hsl(360, 88%, 2%); border-radius: 1.2em; padding: 1.4em; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: .5em; position: relative; overflow: hidden; } .puzzle::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; transform: rotate(-15deg) scale(2); background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.12)); } .puzzle > * { z-index: 1; } .grid { border: 2px solid hsl(360, 98%, 12%); grid-column-end: span 3; display: grid; grid-gap: 2px; grid-template-areas: "A B C" "D E F" "G H I"; background: hsl(360, 98%, 12%); box-shadow: inset 0 0 2em 0 hsl(360, 98%, 2%); } .tile, .answer { height: 0; padding-bottom: 100%; grid-area: var(--area, auto); border: none; background: url(img/2.jpg); background-size: 300%; } .tile { cursor: pointer; } .tile--empty { cursor: auto; } .tile:focus { outline: 2px solid hsl(360, 98%, 42%); } .tile[disabled] { cursor: not-allowed; } .answer { grid-column-end: span 1; width: 100%; justify-self: flex-end; background-size: 100%; box-shadow: inset 0 0 0 .2em hsl(360, 90%, 26%); } .tile--empty { background: transparent; } .tile--1 { background-position: top left; } .tile--2 { background-position: top center; } .tile--3 { background-position: top right; } .tile--4 { background-position: center left; } .tile--5 { background-position: center; } .tile--6 { background-position: center right; } .tile--7 { background-position: bottom left; } .tile--8 { background-position: bottom center; } h2 { margin: 0; font-size: 1.8em; } .heading span { font-size: 1em; line-height: 2.4em; } .heading { align-self: center; grid-column-end: span 2; text-align: center; text-shadow: 0 -1px 0 hsl(360, 90%, 26%); transform: skew(-10deg) rotate(-6deg); } @-webkit-keyframes popIn { from { opacity: 0; pointer-events: none; visibility: hidden; transform: scale(0.6); transition: opacity, scale, 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } } @keyframes popIn { from { opacity: 0; pointer-events: none; visibility: hidden; transform: scale(0.6); transition: opacity, scale, 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } } p { padding: 0 1em; text-align: center; } a { color: white; } </style> <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script> </head> <body translate="no" oncontextmenu="self.event.returnValue=false"> <div class="puzzle"> <div class="heading"> <span> <sub>★</sub> <sup>☆</sup> <sub>★</sub> <sup>☆</sup> <sub>★</sub> <sup>☆</sup> <sub>★</sub> </span> <h2>圣诞节拼图</h2> <span> <sup>★</sup> <sub>☆</sub> <sup>★</sup> <sub>☆</sub> <sup>★</sup> <sub>☆</sub> <sup>★</sup> </span> </div> <div class="answer"></div> <div class="grid"> <button class="tile tile--1" style="--area: E; transform-origin: 0px 0px;" data-animate-grid-id="0.02689115105555806"></button> <button class="tile tile--2" style="--area: H; transform-origin: 0px 0px;" data-animate-grid-id="0.4610317397369097" disabled=""></button> <button class="tile tile--3" style="--area: D; transform-origin: 0px 0px;" data-animate-grid-id="0.3947694403684632" disabled=""></button> <button class="tile tile--4" style="--area: I; transform-origin: 0px 0px;" data-animate-grid-id="0.852802251160989"></button> <button class="tile tile--5" style="--area: A; transform-origin: 0px 0px;" data-animate-grid-id="0.14361257646890424" disabled=""></button> <button class="tile tile--6" style="--area: C; transform-origin: 0px 0px;" data-animate-grid-id="0.0751759920607371"></button> <button class="tile tile--7" style="--area: B; transform-origin: 0px 0px;" data-animate-grid-id="0.33901970144613225" disabled=""></button> <button class="tile tile--8" style="--area: G; transform-origin: 0px 0px;" data-animate-grid-id="0.25481796488139685" disabled=""></button> <div class="tile tile--empty" style="--area: F; transform-origin: 0px 0px;" data-animate-grid-id="0.7806010023473569"></div> </div> </div> <script src="./js/17sucai.js"></script> <script src="./js/main.js"></script> <script id="rendered-js"> const grid = document.querySelector(".grid"); const {forceGridAnimation} = animateCSSGrid.wrapGrid(grid); const tiles = Array.from(document.querySelectorAll(".tile")); const emptyTile = document.querySelector(".tile--empty"); const heading = document.querySelector(".heading"); const areaKeys = { A: ["B", "D"], B: ["A", "C", "E"], C: ["B", "F"], D: ["A", "E", "G"], E: ["B", "D", "F", "H"], F: ["C", "E", "I"], G: ["D", "H"], H: ["E", "G", "I"], I: ["F", "H"] }; // Add click listener to all tiles tiles.map(tile => { tile.addEventListen

评论收藏

内容反馈