js记忆卡片游戏
代码语言:html
所属分类:游戏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <link rel='stylesheet' href='http://repo.bfw.wiki/bfwrepo/css/luda-default.min.css'> <style> html, body{ height: 100%; } .memory-card-game{ position: relative; display: flex; flex-wrap: wrap; height: 100%; background: #383838; } .timeline{ position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 0.8rem; pointer-events: none; } .timeline > div{ height: 100%; background: #d12626; opacity: 0.9; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); transform: translate3d(-100%, 0, 0); transition: transform 0.2s ease; } .card{ position: relative; flex: 0 0 25%; overflow: hidden; background: #fa73a0; border: solid 2px #383838; cursor: pointer; } .card::before{ content: ''; position: absolute; left: 0; top: 0; width: 101%; height: 101%; background: #383838; opacity: 0; transform: translate3d(0, 0, 0); transition: opacity 0.3s ease; } .card.active::before, .card.hidden::before{ opacity: 1; } .card img{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; max-width: 100%; max-height: 100%; padding: 0.5rem; margin: auto; transition: opacity, transform 0.3s ease; } .card.active img{ opacity: 1; transform: scale(1) translate3d(0, 0, 0); } .card img, .card.hidden img{ opacity: 0; transform: scale(0) translate3d(0, 0, 0); } #pannel[data-succeed=true] .introduction, #pannel[data-succeed=true] .failed{ display: none; } #pannel[data-succeed=true] .succeed{ display: block; } #pannel[data-succeed=false] .introduction, #pannel[data-succeed=false] .succeed{ display: none; } #pannel[data-succeed=false] .failed{ display: block; } #pannel:not([data-succeed]) .introduction{ display: block; } #pannel:not([data-succeed]) .succeed, #pannel:not([data-succeed]) .failed{ display: none; } </style> </head> <body translate="no"> <div id="game" class="memory-card-game" data-round-seconds="60" data-counts="16" data-images='[ "http://repo.bfw.wiki/bfwrepo/icon/5d83505e72b9f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_64,h_64,/quality,q_90", "http://repo.bfw.wiki/bfwrepo/icon/5d83506f34374.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_64,h_64,/quality,q_90", "http://repo.bfw.wiki/bfwrepo/icon/5d835085bc42d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_64,h_64,/quality,q_90", "http://repo.bfw.wiki/bfwrepo/icon/5d8350bd58e98.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_64,h_64,/quality,q_90", "http://repo.bfw.wiki/bfwrepo/icon/5d8350d0c9542.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_64,h_64,/quality,q_90", "http://repo.bfw.wiki/bfwrepo/icon/5d8350e9834fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_64,h_64,/quality,q_90", "http://repo.bfw.wiki/bfwrepo/icon/5d8351180ff07.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_64,h_64,/quality,q_90", "http://repo.bfw.wiki/bfwrepo/icon/5d835147aa4b2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_64,h_64,/quality,q_90", "http://repo.bfw.wiki/bfwrepo/icon/5d83517d696b2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_64,h_64,/quality,q_90", "http://repo.bfw.wiki/bfwrepo/icon/5d8351b19ac2b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_64,h_64,/quality,q_90" ]'></div> <div id="pannel" data-toggle-target class="overlay toggle-active"> <div class="overlay-body"> <div data-toggleable="false" class="article px-medium pb-medium bc-dark c-light rounded sd-high"> <div class="introduction px-small"> <h1 class="fw-bold">记忆卡片游戏</h1> <p class="p7 mb-small p-none fs-italic fw-bold c-muted"> </p> <p> 在<span id="round-seconds">60</span>秒内找出所有相匹配的卡片 <br class="d-none d-block-m"> 看看你能走多远.<br> 祝你好运! </p> </div> <div class="succeed px-small"> <h1 class="fw-bold c-primary">你太棒了~</h1> <p> 你可以选择难度更高的来挑战自己!<br> 加油 </p> </div> <div class="failed px-small"> <h1 class="fw-bold">游戏结束...</h1> <p> 别沮丧,再试一次!<br> 你能做的更好 </p> </div> <div class="grid"> <div class="col-auto"> <div class="fm fm-select"> <select id="game-level"> <option value="16" selected>初级</option> <option value="24">中级</option> <option value="32">高级</option> <option value="40">噩梦级</option> </select> </div> </div> <div class="col-auto"> <button id="start" data-toggleable class="btn btn-fluid btn-primary fw-bold"> 开始吧 </button> </div> </div> </div> </div> </div> <script src='http://repo.bfw.wiki/bfwrepo/js/luda-degradation.min.js'></script> <script src='http://repo.bfw.wiki/bfwrepo/js/luda.min.js'></script> <script> // Define the card child component // https://oatw.github.io/luda/0.3.x/advanced/component#define-component-classes luda.component('card') // Define self maintained css classes as private properties. // https://oatw.github.io/luda/0.3.x/advanced/component#private-property .protect('cls', { active: 'active', hidden: 'hidden' }) // Define image src passed in from parent component as a public property. // https://oatw.github.io/luda/0.3.x/advanced/component#public-property .include('src', function(){ // Get the value of data-src of this component's root element. // https://oatw.github.io/luda/0.3.x/advanced/api#root // https://oatw.github.io/luda/0.3.x/advanced/api#data-name-value return this.root.data('src') }) // Define a private method of this component. // https://oatw.github.io/luda/0.3.x/advanced/component#private-property .protect('insertImage', function(){ // Set the innerHTML of this component's root element. // https://oatw.github.io/luda/0.3.x/advanced/api#html-html this.root.html(`<img src="${this.src()}"/>`) }) // Define public methods of this component. // https://oatw.github.io/luda/0.3.x/advanced/component#public-property .include({ isHidden(){ // Check if the component's root element has the .hidden class. // https://oatw.github.io/luda/0.3.x/advanced/api#hasclass-name return this.root.hasClass(this.cls.hidden) }, transitionDuration(){ // Get the transition duration in milliseconds. // https://oatw.github.io/luda/0.3.x/advanced/api#transitionduration- return this.img.transitionDuration() }, activate(){ // Add the .active class to this component's root element. // https://oatw.github.io/luda/0.3.x/advanced/api#addclass-name this.root.addClass(this.cls.active) }, deactivate(){ // Remove the .active class from this component's root element. // https://oatw.github.io/luda/0.3.x/advanced/api#removeclass-n.........完整代码请登录后点击上方下载按钮下载查看
网友评论0