jquery实现纸牌翻牌消消乐游戏代码
代码语言:html
所属分类:游戏
代码描述:jquery实现纸牌翻牌消消乐游戏代码,翻出两张相同的牌即可消掉。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&family=Roboto:wght@300&display=swap"); * { --colour-back: darkred; --colour-back-b: #fffff0; --colour-front: #fffff0; --colour-red: red; --colour-black: black; --colour-edgefade: #964b0077; } html { -webkit-text-size-adjust: none; font-size: 10px; font-size: 0.75vw; overflow-x: hidden; } body { height: 100vh; margin: 0; display: grid; place-items: center; font-family: "Roboto Condensed", monospace; background: #62cd39; background: radial-gradient(circle, #295225 0%, black 100%); } p { position: fixed; font-family: "Roboto", sans-serif; font-size: 2rem; line-height: 2rem; color: gold; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 10000000000; text-shadow: 0 0 5px black; } p.span { display: inline-block; vertical-align: top; margin-bottom: 10px; } p span.jump { animation: jump 0.5 linear forwards; } @keyframes jump { 0%, 100% { transform: scale(1); } 50% { transform: scale(2); } } .deck { perspective: 1000px; } .card { transform-origin: center; cursor: pointer; transition: all 0.5s ease-in-out; transform-style: preserve-3d; position: absolute; transform: rotateY(180deg); } .card:nth-child(1) { top: -25rem; left: -59rem; } .card:nth-child(2) { top: -25rem; left: -47rem; } .card:nth-child(3) { top: -25rem; left: -35rem; } .card:nth-child(4) { top: -25rem; left: -23rem; } .card:nth-child(5) { top: -25rem; left: -11rem; } .card:nth-child(6) { top: -25rem; left: 1rem; } .card:nth-child(7) { top: -25rem; left: 13rem; } .card:nth-child(8) { top: -25rem; left: 25rem; } .card:nth-child(9) { top: -25rem; left: 37rem; } .card:nth-child(10) { top: -25rem; left: 49rem; } .card:nth-child(11) { top: -25rem; left: 61rem; } .card:nth-child(11) { top: -8rem; left: -59rem; } .card:nth-child(12) { top: -8rem; left: -47rem; } .card:nth-child(13) { top: -8rem; left: -35rem; } .card:nth-child(14) { top: -8rem; left: -23rem; } .card:nth-child(15) { top: -8rem; left: -11rem; } .card:nth-child(16) { top: -8rem; left: 1rem; } .card:nth-child(17) { top: -8rem; left: 13rem; } .card:nth-child(18) { top: -8rem; left: 25rem; } .card:nth-child(19) { top: -8rem; left: 37rem; } .card:nth-child(20) { top: -8rem; left: 49rem; } .card:nth-child(21) { top: -8rem; left: 61rem; } .card:nth-child(21) { top: 9rem; left: -59rem; } .card:nth-child(22) { top: 9rem; left: -47rem; } .card:nth-child(23) { top: 9rem; left: -35rem; } .card:nth-child(24) { top: 9rem; left: -23rem; } .card:nth-child(25) { top: 9rem; left: -11rem; } .card:nth-child(26) { top: 9rem; left: 1rem; } .card:nth-child(27) { top: 9rem; left: 13rem; } .card:nth-child(28) { top: 9rem; left: 25rem; } .card:nth-child(29) { top: 9rem; left: 37rem; } .card:nth-child(30) { top: 9rem; left: 49rem; } .card:nth-child(31) { top: 9rem; left: 61rem; } .card:nth-child(31) { top: 26rem; left: -59rem; } .card:nth-child(32) { top: 26rem; left: -47rem; } .card:nth-child(33) { top: 26rem; left: -35rem; } .card:nth-child(34) { top: 26rem; left: -23rem; } .card:nth-child(35) { top: 26rem; left: -11rem; } .card:nth-child(36) { top: 26rem; left: 1rem; } .card:nth-child(37) { top: 26rem; left: 13rem; } .card:nth-child(38) { top: 26rem; left: 25rem; } .card:nth-child(39) { top: 26rem; left: 37rem; } .card:nth-child(40) { top: 26rem; left: 49rem; } .card:nth-child(41) { top: 26rem; left: 61rem; } .side { display: grid; place-items: center; width: 10rem; height: 15rem; background: var(--colour-front); border-radius: 0.4rem; position: relative; font-size: 2.2rem; line-height: 2.2rem; box-shadow: inset 0 0 12px var(--colour-edgefade); -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } .side:after, .side:before { font-size: 2rem; line-height: 2rem; letter-spacing: -2px; text-align: center; position: absolute; } .side:after { top: 0.6rem; left: 0.6rem; } .side:before { bottom: 0.6rem; right: 0.6rem; } .side hr { border: none; margin: 0; padding: 0; overflow: visible; } .side.diamonds hr:after { content: "♦"; } .side.spades hr:after { content: "♠"; } .side.hearts hr:after { content: "♥"; } .side.clubs hr:after { content: "♣"; } .side.ace:after, .side.ace:before { content: "A"; } .side.two:after, .side.two:before { content: "2"; } .side.three:after, .side.three:before { content: "3"; } .side.four:after, .side.four:before { content: "4"; } .side.five:after, .side.five:before { content: "5"; } .side.six:after, .side.six:before { content: "6"; } .side.seven:after, .side.seven:before { content: "7"; } .side.eight:after, .side.eight:before { content: "8"; } .side.nine:after, .side.nine:before { content: "9"; } .side.ten:after, .side.ten:before { content: "10"; } .side.jack:after, .side.jack:before { content: "J"; } .side.queen:after, .side.queen:before { content: "Q"; } .side.king:after, .side.king:before { content: "K"; } .side.ace hr { font-size: 4rem; line-height: 4rem; } .side.jack hr, .side.queen hr, .side.king hr { font-size: 5rem; line-height: 5rem; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0