js实现纸牌类扑克游戏单人纸牌游戏
代码语言:html
所属分类:游戏
代码描述:js实现纸牌类扑克游戏单人纸牌游戏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; } body { position: relative; color: #f3f5f7; background: #0e8b44 ; background-size: cover; background-position: center; } .navbar { background: rgba(8,8,8,.75); } .navbar a { color: #fff; } .navbar li[data-active="false"] { opacity: 0.5; pointer-events: none; } .navbar li[data-active="true"] { opacity: 1; pointer-events: auto; } .template { display: none; } #score { position: relative; background: rgba(0,0,0,.15); margin-top: 1.5em; margin-bottom: 0.5em; padding: 1em; line-height: 1; } #score > * { display: inline-block; min-width: 100px; } #score > *:last-child { float: right; text-align: right; } #score label { margin-bottom: 0; } #score .timer button { display: none; position: absolute; -webkit-appearance: none; background: transparent; outline: none; border: 0; padding: 0; top: 0; left: 0; width: 3em; height: 100%; } #score .timer button i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; } #score .timer button i::before { position: absolute; top: 50%; left: 50%; width: 0.75em; height: 1em; margin-left: -0.375em; margin-top: -0.5em; font-size: 1.5rem; content: none; } #score .timer button i#play::before { border-top: 8px solid transparent; border-left: 12px solid #fff; border-bottom: 8px solid transparent; } #score .timer button i#pause::before { border-right: 4px solid #fff; border-left: 4px solid #fff; } [data-gameplay="active"] #score .timer button, [data-gameplay="paused"] #score .timer button { display: inline-block; } [data-gameplay="active"] #score .timer button i#pause::before, [data-gameplay="paused"] #score .timer button i#play::before { content: ''; } [data-gameplay="active"] #score, [data-gameplay="paused"] #score { padding-left: 3em; } #auto-win { display: none; -webkit-appearance: none; outline: none; border: 0; position: absolute; z-index: 1; bottom: 0; width: 100%; background: rgba(0,0,0,.8); padding: 1em; line-height: 1; } #table { opacity: 0; width: 100%; padding: 15px 0; } #table > div { position: relative; margin-bottom: 10px; } #table > div:last-child { margin-bottom: 0; } #table > div::after { content: ''; display: table-cell; clear: both; } #table ul { display: inline-block; padding: 0; } #table > div > ul { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pile { display: block; position: relative; float: left; width: 13%; margin-right: 1.5%; margin-bottom: 10px; padding: 5px; } .pile:last-child { margin-right: 0; } .pile::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px dotted rgba(0,0,0,.25); border-radius: 5px; } .card { display: block; position: absolute; top: 0; left: 0; background-color: #ddd; background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2de23d0663.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_152,/quality,q_90'); background-size: contain; background-repeat: no-repeat; width: 100%; height: 100%; font-family: 'Suit-Regular', sans-serif; font-size: 0.6vw; border-radius: 5px; z-index: -1; } .card * { pointer-events: none; } @media screen and (min-width: 768px) { .card { font-size: 0.325em; } .pile::after, .card { border-radius: 10px; } } @media screen and (min-width: 992px) { .card { font-size: 0.425em; } } @media screen and (min-width: 1200px) { .card { font-size: 0.525em; } } .card > div { display: none; } .card.up { background-image: url('https://bfa.github.io/solitaire-js/img/card_face_bg.png'); background-repeat: repeat; color: #111; } .card.up > div { display: block; } .card::before { content: ''; display: block; position: absolute; width: 100%; height: 100%; border-radius: 5px; } .card[data-selected="true"]::before { box-shadow: 0 0 6px 3px #FCDB1A; } @media screen and (min-width: 768px) { .card::before { border-radius: 10px; } } .card .suit { font-size: 5.8em; font-weight: normal; width: 0.6896551724137931em; height: 0.786206896551724em; line-height: 0.786206896551724em; position: absolute; text-align: center; } @media screen and (max-width: 767px) { .card > div > .suit { display: none; } } .card .heart, .card .diamond { color: #cc0000; } .card .spade .suit::before { content: '♠' } .card .heart .suit::before { content: '♥' } .card .diamond .suit::before { content: '♦' } .card .club .suit::before { content: '♣' } .card .corner { line-height: 1; position: absolute; text-align: center; } .card .corner span { display: block; font-size: 9em; font-weight: bold; width: 1em; text-align: center; } @media screen and (min-width: 768px) { .card .corner span { font-size: 3em; } } .card .corner .suit { margin-top: 0; margin-left: 0; } .card .corner.top { left: 0.64em; top: 0.96em; } .card .corner.bottom { bottom: 0.96em; right: 0.64em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .card .ace span.suit.middle_center { font-size: 10.24em; left: 50%; top: 50%; margin-top: -0.5em; margin-left: -0.35em; } .card .face::before { display: none; content: ''; position: absolute; top: 15.25%; left: 19%; width: 62%; height: 70.5%; background-repeat: no-repeat; background-size: contain; } @media screen and (min-width: 768px) { .card .face::before { display: block; } } .card .spade.king .face::before { background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2def379aa4.png'); } .card .spade.queen .face::before { background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2df11c30f8.png'); } .card .spade.jack .face::before { background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2df4ebe496.png'); } .card .heart.king .face::before { background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2df6abac76.png'); } .card .heart.queen .face::before { background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2df9764cc4.png'); } .card .heart.jack .face::before { background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2e17329e20.png'); } .card .diamond.king .face::before { background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2dfb9bd3eb.png'); } .card .diamond.queen .face::before { background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2dfd6e8186.png'); } .card .diamond.jack .face::before { background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2e011a2856.png'); } .card .club.king .face::before { background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2e20f848c9.png'); } .card .club.queen .face::before { background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2e05a11684.png'); } .card .club.jack .face::before { background-image: url('//repo.bfw.wiki/bfwrepo/image/5fc2e07617fb3.png'); } .card .suit.top_center { left: 50%; top: 0; margin-left: -0.35em; margin-top: 0.65em; } .card .suit.top_left { left: 0; top: 0; margin-left: 0.65em; margin-top: 0.65em; } .card .suit.top_right { right: 0; top: 0; margin-right: 0.65em; margin-top: 0.65em; } .card .suit.middle_center { left: 50%; top: 50%; margin-left: -0.35em; margin-top: -0.5em; } .card .suit.middle_top { left: 50%; top: 0; margin-left: -0.35em; margin-top: 1.25em; } .card .suit.middle_bottom { bottom: 0; left: 50%; margin-bottom: 0.65em; margin-left: -0.35em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .card .suit.middle_left { left: 0; top: 50%; margin-left: 0.65em; margin-top: -0.5em; } .card .suit.middle_right { right: 0; top: 50%; margin-right: 0.65em; margin-top: -0.5em; } .card .suit.middle_top_center { left: 50%; top: 50%; margin-left: -0.35em; margin-top: -1.35em; } .card .suit.middle_top_left { left: 0; top: 50%; margin-left: 0.65em; margin-top: -1em; } .card .suit.middle_top_right { right: 0; top: 50%; margin-right: 0.65em; margin-top: -1em; } .card .suit.middle_bottom_left { bottom: 50%; left: 0; margin-left: 0.65em; margin-bottom: -1em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .card .suit.middle_bottom_right { bottom: 50%; right: 0; margin-bottom: -1em; margin-right: 0.65em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .card .suit.middle_bottom_center { bottom: 50%; left: 50%; margin-bottom: -1.35em; margin-left: -0.35em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .card .suit.bottom_center { bottom: 0; left: 50%; margin-bottom: 0.65em; margin-left: -0.35em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .card .suit.bottom_left { bottom: 0; left: 0; margin-bottom: 0.65em; margin-left: 0.65em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .card .suit.bottom_right { bottom: 0; right: 0; margin-bottom: 0.65em; margin-right: 0.65em; -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .card:nth-child(1), .card:nth-child(2), .card:nth-child(3), .card:nth-child(4), .card:nth-child(5) { box-shadow: 0 0 5px rgba(0,0,0,.25), 0 2px 1px rgba(0,0,0,.5); z-index: 1; } .card:nth-child(1) { top: 0; z-index: 5; } .card:nth-child(2) { top: 2px; z-index: 4; } .card:nth-child(3) { top: 4px; z-index: 3; } .card:nth-child(4) { top: 6px; z-index: 2; } .card:nth-child(5) { top: 8px; z-index: 1; } /* stock */ .stock { z-index: 1; } .stock .reload-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 3vw; font-weight: bold; line-height: 1; opacity: 0.25; z-index: 1; } @media screen and (max-width: 767px) { .stock .reload-icon { font-size: 5vw; } } .stock .reload-icon span { display: block; position: absolute; top: 50%; left: 0; width: 100%; text-align: center; padding: 0.25em; margin-top: -0.75em; pointer-events: none; } .stock .reload-icon span::before, .stock .reload-icon span::after { content: ''; display: inline-block; border-style: solid; } .stock .reload-icon span::before { width: 1.25em; height: 1.25em; border-color: transparent black black black; border-radius: 50%; border-width: .125em; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .stock .reload-icon span::after { position: absolute; top: 0; left: 50%; width: 0; height: 0; border-color: transparent transparent transparent black; border-width: .3125em 0 .3125em .5em; } /* waste */ .waste { z-index: 1; } /* foundation */ .fnd .pile { left: 43.5%; } .fnd .pile::before { content ''; position: absolute; top: 50%; left: 0; width: 100%; color: #000; font-family: 'Suit-Regular', sans-serif; font-size: 10vw; margin-top: -0.6em; line-height: 1; text-align: center; opacity: 0.25; } @media screen and (min-width: 768px) { .fnd .pile::before { font-size: 6em; } } @media screen and (min-width: 992px) { .fnd .pile::before { font-size: 7em; } } @media screen and (min-width: 1200px) { .fnd .pile::before { font-size: 8em; } } .fnd .pile.spades::before { content: '♠' } .fnd .pile.hearts::before { content: '♥' } .fnd .pile.diamonds::before { content: '♦' } .fnd .pile.clubs::before { content: '♣' } /* tableau */ .tab .card { box-shadow: 0 0 5px rgba(0,0,0,.5); z-index: 1; margin-bottom: 10em; } /* face up */ .tab .card:nth-child(2) { top: 6em; left: 0; } .tab .card:nth-child(3) { top: 12em; left: 0; } .tab .card:nth-child(4) { top: 18em; left: 0; } .tab .card:nth-child(5) { top: 24em; left: 0; } .tab .card:nth-child(6) { top: 30em; left: 0; } .tab .card:nth-child(7) { top: 36em; left: 0; } .tab .card:nth-child(8) { top: 42em; left: 0; } .tab .card:nth-child(9) { top: 48em; left: 0; } .tab .card:nth-child(10) { top: 54em; left: 0; } .tab .card:nth-child(11) { top: 60em; left: 0; } .tab .card:nth-child(12) { top: 66em; left: 0; } .tab .card:nth-child(13) { top: 72em; left: 0; } .tab .card:nth-child(14) { top: 78em; left: 0; } .tab .card:nth-child(15) { top: 84em; left: 0; } .tab .card:nth-child(16) { top: 90em; left: 0; } .tab .card:nth-child(17) { top: 96em; left: 0; } .tab .card:nth-child(18) { top: 102em; left: 0; } .tab .card:nth-child(19) { top: 108em; left: 0; } .tab .card:nth-child(20) { top: 114em; left: 0; } .tab .card:nth-child(21) { top: 120em; left: 0; } /* face down */ .tab .pile[data-unplayed='1'] .card:nth-child(2), .tab .pile[data-unplayed='2'] .card:nth-child(2), .tab .pile[data-unplayed='3'] .card:nth-child(2), .tab .pile[data-unplayed='4'] .card:nth-child(2), .tab .pile[data-unplayed='5'] .card:nth-child(2), .tab .pile[data-unplayed='6'] .card:nth-child(2) { top: 3em; } .tab .pile[data-unplayed='2'] .card:nth-child(3), .tab .pile[data-unplayed='3'] .card:nth-child(3), .tab .pile[data-unplayed='4'] .card:nth-child(3), .tab .pile[data-unplayed='5'] .card:nth-child(3), .tab .pile[data-unplayed='6'] .card:nth-child(3) { top: 6em; } .tab .pile[data-unplayed='3'] .card:nth-child(4), .tab .pile[data-unplayed='4'] .card:nth-child(4), .tab .pile[data-unplayed='5'] .card:nth-child(4), .tab .pile[data-unplayed='6'] .card:nth-child(4) { top: 9em; } .tab .pile[data-unplayed='4'] .card:nth-child(5), .tab .pile[data-unplayed='5'] .card:nth-child(5), .tab .pile[data-unplayed='6'] .card:nth-child(5) { top: 12em; } .tab .pile[data-unplayed='5'] .card:nth-child(6), .tab .pile[data-unplayed='6'] .card:nth-child(6) { top: 15em; } .tab .pile[data-unplayed='6'] .card:nth-child(7) { top: 18em; } /* piles with odd # of face down cards */ .tab .pile[data-unplayed='1'] .card:nth-child(3) { top: 9em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(4), .tab .pile[data-unplayed='3'] .card:nth-child(5) { top: 15em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(5), .tab .pile[data-unplayed='3'] .card:nth-child(6), .tab .pile[data-unplayed='5'] .card:nth-child(7) { top: 21em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(6), .tab .pile[data-unplayed='3'] .card:nth-child(7), .tab .pile[data-unplayed='5'] .card:nth-child(8) { top: 27em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(7), .tab .pile[data-unplayed='3'] .card:nth-child(8), .tab .pile[data-unplayed='5'] .card:nth-child(9) { top: 33em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(8), .tab .pile[data-unplayed='3'] .card:nth-child(9), .tab .pile[data-unplayed='5'] .card:nth-child(10) { top: 39em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(9), .tab .pile[data-unplayed='3'] .card:nth-child(10), .tab .pile[data-unplayed='5'] .card:nth-child(11) { top: 45em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(10), .tab .pile[data-unplayed='3'] .card:nth-child(11), .tab .pile[data-unplayed='5'] .card:nth-child(12) { top: 51em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(11), .tab .pile[data-unplayed='3'] .card:nth-child(12), .tab .pile[data-unplayed='5'] .card:nth-child(13) { top: 57em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(12), .tab .pile[data-unplayed='3'] .card:nth-child(13), .tab .pile[data-unplayed='5'] .card:nth-child(14) { top: 63em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(13), .tab .pile[data-unplayed='3'] .card:nth-child(14), .tab .pile[data-unplayed='5'] .card:nth-child(15) { top: 69em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(14), .tab .pile[data-unplayed='3'] .card:nth-child(15), .tab .pile[data-unplayed='5'] .card:nth-child(16) { top: 75em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(15), .tab .pile[data-unplayed='3'] .card:nth-child(16), .tab .pile[data-unplayed='5'] .card:nth-child(17) { top: 81em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(16), .tab .pile[data-unplayed='3'] .card:nth-child(17), .tab .pile[data-unplayed='5'] .card:nth-child(18) { top: 87em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(17), .tab .pile[data-unplayed='3'] .card:nth-child(18), .tab .pile[data-unplayed='5'] .card:nth-child(19) { top: 93em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(18), .tab .pile[data-unplayed='3'] .card:nth-child(19), .tab .pile[data-unplayed='5'] .card:nth-child(20) { top: 99em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(19), .tab .pile[data-unplayed='3'] .card:nth-child(20), .tab .pile[data-unplayed='5'] .card:nth-child(21) { top: 105em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(20), .tab .pile[data-unplayed='3'] .card:nth-child(21) { top: 111em; left: 0; } .tab .pile[data-unplayed='1'] .card:nth-child(21) { top: 117em; left: 0; } /* piles with even # of face down cards */ .tab .pile[data-unplayed='2'] .card:nth-child(4) { top: 12em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(5), .tab .pile[data-unplayed='4'] .card:nth-child(6) { top: 18em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(6), .tab .pile[data-unplayed='4'] .card:nth-child(7), .tab .pile[data-unplayed='6'] .card:nth-child(8) { top: 24em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(7), .tab .pile[data-unplayed='4'] .card:nth-child(8), .tab .pile[data-unplayed='6'] .card:nth-child(9) { top: 30em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(8), .tab .pile[data-unplayed='4'] .card:nth-child(9), .tab .pile[data-unplayed='6'] .card:nth-child(10) { top: 36em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(9), .tab .pile[data-unplayed='4'] .card:nth-child(10), .tab .pile[data-unplayed='6'] .card:nth-child(11) { top: 42em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(10), .tab .pile[data-unplayed='4'] .card:nth-child(11), .tab .pile[data-unplayed='6'] .card:nth-child(12) { top: 48em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(11), .tab .pile[data-unplayed='4'] .card:nth-child(12), .tab .pile[data-unplayed='6'] .card:nth-child(13) { top: 54em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(12), .tab .pile[data-unplayed='4'] .card:nth-child(13), .tab .pile[data-unplayed='6'] .card:nth-child(14) { top: 60em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(13), .tab .pile[data-unplayed='4'] .card:nth-child(14), .tab .pile[data-unplayed='6'] .card:nth-child(15) { top: 66em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(14), .tab .pile[data-unplayed='4'] .card:nth-child(15), .tab .pile[data-unplayed='6'] .card:nth-child(16) { top: 72em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(15), .tab .pile[data-unplayed='4'] .card:nth-child(16), .tab .pile[data-unplayed='6'] .card:nth-child(17) { top: 78em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(16), .tab .pile[data-unplayed='4'] .card:nth-child(17), .tab .pile[data-unplayed='6'] .card:nth-child(18) { top: 84em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(17), .tab .pile[data-unplayed='4'] .card:nth-child(18), .tab .pile[data-unplayed='6'] .card:nth-child(19) { top: 90em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(18), .tab .pile[data-unplayed='4'] .card:nth-child(19), .tab .pile[data-unplayed='6'] .card:nth-child(20) { top: 96em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(19), .tab .pile[data-unplayed='4'] .card:nth-child(20), .tab .pile[data-unplayed='6'] .card:nth-child(21) { top: 102em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(20), .tab .pile[data-unplayed='4'] .card:nth-child(21) { top: 108em; left: 0; } .tab .pile[data-unplayed='2'] .card:nth-child(21) { top: 114em; left: 0; } /* Confetti */ #confetti { position: absolute; top: 0; left: 0; z-index: 10000; pointer-events: none; opacity: 0; } /* Disable Grammarly */ grammarly-card { display: none; } </style> </head> <body translate="no" > <div class="container"> <div id="score"> <div class="timer"> <button id="play-pause"> <i id="play">Play</i> <i id="pause">Pause</i> </button> <label>Timer:</label> <span>00:00</span> </div> <div class="move-count" data-moves="0"> <label>Moves:</label> <span>0</span> </div> <div class="score" data-score="0"> <label>Score:</label> <span>0</span> </div> </div> <div id="table"> <div class="upper-row"> <div id="stock" class="stock pile" data-pile="stock"> <i class="reload-icon" data-action="reload"> <span></span> </i> <ul></ul> </div> <div id="waste" class="waste pile" data-pile="waste"> <ul></ul> </div> <ul id="fnd" class="fnd"> <li id="spades" class="spades pile" data-pile="spades" data-empty="true"><ul></ul></li> <li id="hearts" class="hearts pile" data-pile="hearts" data-empty="true"><ul></ul></li> <li id="diamonds" class="diamonds pile" data-pile="diamonds" data-empty="true"><ul></ul></li> <li id="clubs" class="clubs pile" data-pile="clubs" data-empty="true"><ul></ul></li> </ul> </div> <div class="lower-row"> <ul id="tab" class="tab"> <li class="pile" data-pile="1"><ul></ul></li> <li class="pile" data-pile="2"><ul></ul></li> <li class="pile" data-pile="3"><ul></ul></li> <li class="pile" data-pile="4"><ul></ul></li> <li class="pile" data-pile="5"><ul></ul></li> <li class="pile" data-pile="6"><ul></ul></li> <li class="pile" data-pile="7"><ul></ul></li> </ul> </div> </div> </div><!-- /.container --> <button id="auto-win">Auto Win</button> <canvas id="confetti"></canvas> <ul class="template"> <li data-rank="2"> <div class="two {{suit}}"> <div class="corner top"> <span class="rank">2</span> <span class="suit"></span> </div> <span class="suit top_center"></span> <span class="suit bottom_center"></span> <div class="corner bottom"> <span class="rank">2</span> <span class="suit"></span> </div> </div> </li> <li data-rank="3"> <div class="three {{suit}}"> <div class="corner top"> <span class="rank">3</span> <span class="suit"></span> </div> <span class="suit top_center"></span> <span class="suit middle_center"></span> <span class="suit bottom_center"></span> <div class="corner bottom"> <span class="rank">3</span> <span class="suit"></span> </div> </div> </li> <li data-rank="4"> <div class="four {{suit}}"> <div class="corner top"> <span class="rank">4</span> <span class="suit"></span> </div> <span class="suit top_left"></span> <span class="suit top_right"></span> <span class="suit bottom_left"></span> <span class="suit bottom_right"></span> <div class="corner bottom"> <span class="rank">4</span> <span class="suit"></span> </div> </div> </li> <li data-rank="5"> <div class="five {{suit}}"> <div class="corner top"> <span class="rank">5</span> <span class="suit"></span> </div> <span class="suit top_left"></span> <span class="suit top_right"></span> <span class="suit middle_center"></span> <span class="suit bottom_left"></span> <span class="suit bottom_right"></span> <div class="corner bottom"> <span class="rank">5</span> <span class="suit"></span> </div> </div> </li> <li data-rank="6"> <div class="six {{suit}}"> <div class="corner top"> <span class="rank">6</span> <span class="suit"></span> </div> <span class="suit top_left"></span> <span class="suit top_right"></span> <span class="suit middle_left"></span> <span class="suit middle_right"></span> <span class="suit bottom_left"></span> <span class="suit bottom_right"></span> <div class="corner bottom"> <span class="rank">6</span> <span class="suit"></span> </div> </div> </li> <li data-rank="7"> <div class="seven {{suit}}"> <div class="corner top"> <span class="rank">7</span> <span class="suit"></span> </div> <span class="suit top_left"></span> <span class="suit top_right"></span> <span class="suit middle_left"></span> <span class="suit middle_top"></span> <span class="suit middle_right"></span> <span class="suit bottom_left"></span> <span class="suit bottom_right"></span> <div class="corner bottom"> <span class="rank">7</span> <span class="suit"></span> </div> </div> </li> <li data-rank="8"> <div class="eight {{suit}}"> <div class="corner top"> <span class="rank">8</span> <span class="suit"></span> </div> <span class="suit top_left"></span> <span class="suit top_right"></span> <span class="suit middle_left"></span> <span class="suit middle_top_center"></span> <span class="suit middle_right"></span> <span class="suit middle_bottom_center"></span> <span class="suit bottom_left"></span> <span class="suit bottom_right"></span> <div class="corner bottom"> <span class="rank">8</span> <span class="suit"></span> </div> </div> </li> <li data-rank="9"> <div class="nine {{suit}}"> <div class="corner top"> <span class="rank">9</span> <span class="suit"></span> </div> <span class="suit top_left"></span> <span class="suit top_right"></span> <span class="suit middle_top_left"></span> <span class="suit middle_center"></span> <span class="suit middle_top_right"></span> <span class="suit bottom_left"></span> <span class="suit bottom_right"></span> <span class="suit middle_bottom_left"></span> <span class="suit middle_bottom_right"></span> <div class="corner bottom"> <span class="rank">9</span> <span class="suit"></span> </div> </div> </li> <li data-rank="10"> <div class="ten {{suit}}"> <div class="corner top"> <span class="rank">10</span> <span class="suit"></span> </div> <span class="suit top_left"></span> <span class="suit top_right"></span> <span class="suit middle_top_left"></span> <span class="suit middle_top_center"></span> <span class="suit middle_top_right"></span> <span class="suit bottom_left"></span> <span class="suit bottom_right"></span> <span class="suit middle_bottom_center"></span> <span class="suit middle_bottom_left"></span> <span class="suit middle_bottom_right"></span> <div class="corner bottom"> <span class="rank">10</span> <span class="suit"></span> </div> </div> </li> <li data-rank="J"> <div class="jack {{suit}}"> <div class="corner top"> <span class="rank">J</span> <span class="suit"></span> </div> <span class="face middle_center"></span> <div class="corner bottom"> <span class="rank">J</span> <span class="suit"></span> </div> </div> </li> <li data-rank="Q"> <div class="queen {{suit}}"> <div class="corner top"> <span class="rank">Q</span> <span class="suit"></span> </div> <span class="face middle_center"></span> <div class="corner bottom"> <span class="rank">Q</span> <span class="suit"></span> </div> </div> </li> <li data-rank="K"> <div class="king {{suit}}"> <div class="corner top"> <span class="rank">K</span> <span class="suit"></span> </div> <span class="face middle_center"></span> <div class="corner bottom"> <span class="rank">K</span> <span class="suit"></span> </div> </div> </li> <li data-rank="A"> <div class="ace {{suit}}"> <div class="corner top"> <span class="rank">A</span> <span class="suit"></span> </div> <span class="suit middle_center"></span> <div class="corner bottom"> <span class="rank">A</span> <span class="suit"></span> </div> </div> </li> </ul><!-- /.templates --> <script> /* ### TODO ### - Refactor code :) Always Optional Features: - HTML Drag & Drop API - Limit How Many Times Stock Can Be Reloaded (3x) - 3 Card Draw - High score - Options panel for user - Sound Fx */ // 0. DECLARE VARS // document var d = document; // build deck var deck = []; // build suits var suits = []; suits['spades'] = [ // spades ['A', 'spade'], ['2', 'spade'], ['3', 'spade'], ['4', 'spade'], ['5', 'spade'], ['6', 'spade'], ['7', 'spade'], ['8', 'spade'], ['9', 'spade'], ['10', 'spade'], ['J', 'spade'], ['Q', 'spade'], ['K', 'spade']]; suits['hearts'] = [ // hearts ['A', 'heart'], ['2', 'heart'], ['3', 'heart'], ['4', 'heart'], ['5', 'heart'], ['6', 'heart'], ['7', 'heart'], ['8', 'heart'], ['9', 'heart'], ['10', 'heart'], ['J', 'heart'], ['Q', 'heart'], ['K', 'heart']]; suits['diamonds'] = [ // diamonds ['A', 'diamond'], ['2', 'diamond'], ['3', 'diamond'], ['4', 'diamond'], ['5', 'diamond'], ['6', 'diamond'], ['7', 'diamond'], ['8', 'diamond'], ['9', 'diamond'], ['10', 'diamond'], ['J', 'diamond'], ['Q', 'diamond'], ['K', 'diamond']]; suits['clubs'] = [ // clubs ['A', 'club'], ['2', 'club'], ['3', 'club'], ['4', 'club'], ['5', 'club'], ['6', 'club'], ['7.........完整代码请登录后点击上方下载按钮下载查看
网友评论0