Welcome to CODEBOX! (Copy 1423) (Copy 1429)
✨ Tawan Thirawee
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> </head> <body> <style> @font-face { font-family: "PixelSplitter"; src: url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.eot"); src: url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.woff") format("woff"), url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.svg#PixelSplitter") format("svg"); } *, *:before, *:after { box-sizing: border-box; } body { padding: 1rem; margin-bottom: 0px; max-height: 100%; border: 0.5rem dashed; background-image: url(https://wallpaperaccess.com/full/2825710.gif); background-size: auto; color: #FFF; text-align: center; font-family: "PixelSplitter", -apple-system, BlinkMacSystemFont, "PixelSplitter", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "PixelSplitter", Helvetica, Arial, sans-serif; } h1 { margin: 0; font-weight: 400; font-family: "PixelSplitter", sans-serif; } p { font-family: "PixelSplitter", sans-serif; font-weight: 300; margin: 0 0 1.5rem; } .t svg { display: block; } .t use { transition: 0.5s; } .t:not(.revealed) use { fill: #FFF; } use { stroke: #020C6A; } .revealed use { stroke: transparent; } .board { max-width: 75vh; margin: 0 auto; display: grid; grid-gap: 0.5rem; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; } .t { border: 7px dashed; width: 150px; height: 200px; color: #FFF; display: flex; align-items: center; background: rgb(0, 34, 51); } .revealed { background: #FF9393; border-color: #FFF; } .t .bt-1 { transform: translate(0, 0); } .t .bt-2 { transform: translate(0, 0) scale(-1, 1) rotate(90deg); } .t .st-1 { transform: translate(25px, 75px) scale(0.5, 0.5) rotate(-90deg); } .t .mt { transform: translate(100px, 49.5px) scale(0.7142, 0.7142) rotate(45deg); } .t .st-2 { transform: translate(100px, 50px) scale(0.5, 0.5) rotate(-180deg); } .tcat.revealed svg { transform: translate(0, 8px); } .tcat.revealed .bt-1 { transform: translate(12.5px, 10px); fill: #3d3d3d; } .tcat.revealed .bt-2 { transform: translate(-8.5px, 130px) scale(-1, 1) rotate(135deg); fill: #666; } .tcat.revealed .st-1 { transform: translate(25px, 0px) scale(0.5, 0.5) rotate(180deg); } .tcat.revealed .st-2 { transform: translate(-25px, -50px) scale(0.5, 0.5) rotate(0deg); } .tcat.revealed .st-1, .tcat.revealed .st-2 { fill: #ffe6c5; } .tcat.revealed .mt { transform: translate(12.5px, 12.5px) scale(-0.7142, 0.7142) rotate(0deg); } .tcat.revealed .mt, .tcat.revealed .rh { fill: #ccc; } .tcat.revealed .sq { transform: translate(-75px, -50px); fill: #303030; } .tcat.revealed .rh { transform: translate(133px, 200px) scale(1, -1) rotate(45deg); } .tsquirrel.revealed svg { transform: translate(0, 12px); } .tsquirrel.revealed .bt-1 { transform: translate(12.5px, -12.5px); fill: #6b3010; } .tsquirrel.revealed .bt-2 { transform: translate(-8.5px, 108.5px) scale(-1, 1) rotate(135deg); fill: #7f381c; } .tsquirrel.revealed .st-1 { transform: translate(12.5px, 87.5px) scale(0.5, 0.5) rotate(180deg); } .tsquirrel.revealed .st-2 { transform: translate(97.5px, 108.5px) scale(0.5, 0.5) rotate(135deg); } .tsquirrel.revealed .mt { transform: translate(12.5px, -35px) scale(0.7142, 0.7142) rotate(45deg); } .tsquirrel.revealed .sq { transform: translate(22.5px, -16.5px); fill: #e6e6e6; } .tsquirrel.revealed .rh { transform: translate(172.5px, 33.25px) scale(1, 1) rotate(90deg); fill: #7f381c; } .tsquirrel.revealed .st-1, .tsquirrel.revealed .st-2, .tsquirrel.revealed .mt { fill: #8c6239; } .theart.revealed .bt-1 { transform: translate(-25px, 50px) rotate(-90deg); fill: #d4145a; } .theart.revealed .bt-2 { transform: translate(25px, 50px) scale(-1, 1) rotate(90deg); fill: #c1272d; } .theart.revealed .st-1 { transform: translate(50px, 25px) scale(0.5, 0.5) rotate(-90deg); fill: #9e005d; } .theart.revealed .st-2 { transform: translate(25px, 50px) scale(0.5, 0.5) rotate(0deg); fill: #d91119; } .theart.revealed .mt { transform: translate(-25px, 50px) scale(0.7142, 0.7142) rotate(-45deg); fill: #ed1c24; } .theart.revealed .sq { transform: translate(-25px, 50px); fill: #c5282e; } .theart.revealed .rh { transform: translate(50px, 125px) scale(1, -1) rotate(0deg); fill: #d4145a; } .trocket.revealed .bt-1 { transform: translate(75px, 75px) rotate(-180deg); fill: #ed1c24; } .trocket.revealed .bt-2 { transform: translate(75px, 75px) scale(-1, 1) rotate(180deg); fill: #c1272d; } .trocket.revealed .st-1 { transform: translate(-37.5px, 62.5px) scale(0.5, 0.5) rotate(-90deg); fill: #fbb03b; } .trocket.revealed .st-2 { transform: translate(37.5px, 37.5px) scale(0.5, 0.5) rotate(90deg); fill: #bdccd4; } .trocket.revealed .mt { transform: translate(125px, 25px) scale(-0.7142, 0.7142) rotate(-135deg); fill: #e6e6e6; } .trocket.revealed .sq { transform: translate(-37.5px, 12.5px); fill: #4d4d4d; } .trocket.revealed .rh { transform: translate(137px, 137px) scale(1, -1) rotate(90deg); fill: #fbb03b; } .tbird.revealed .bt-1 { transform: translate(72.5px, -25px) rotate(45deg); fill: #d5abd8; } .tbird.revealed .bt-2 { transform: translate(72.5px, 45.5px) scale(1, 1) rotate(-135deg); fill: #d889db; } .tbird.revealed .st-1 { transform: translate(1.5px, 45.5px) scale(0.5, 0.5) rotate(-45deg); fill: #e6e6e6; } .tbird.revealed .st-2 { transform: translate(2px, -25px) scale(0.5, 0.5) rotate(45deg); fill: #fbb03b; } .tbird.revealed .mt { transform: translate(2px, -26px) scale(0.7142, 0.7142) rotate(0deg); fill: #d29e98; } .tbird.revealed .sq { transform: translate(36.5px, -25px) rotate(45deg); fill: #e6e6e6; } .tbird.revealed .rh { transform: translate(107px, 10px) scale(1, 1) rotate(45deg); fill: #f2b1b7; } .thome.revealed .bt-1 { transform: translate(25px, 66.5px) rotate(-90deg); fill: #d54d1d; } .thome.revealed .bt-2 { transform: translate(0px, 116.5px) scale(1, 1) rotate(-90deg); fill: #f8cc88; } .thome.revealed .st-1 { transform: translate(100px, 66.5px) scale(0.5, 0.5) rotate(90deg); fill: #fbe098; } .thome.revealed .st-2 { transform: translate(100px, 116.5px) scale(0.5, 0.5) rotate(180deg); fill: #f8cc88; } .thome.revealed .mt { transform: translate(50px, 66.5px) scale(-0.7142, 0.7142) rotate(-45deg); fill: #fbe098; } .thome.revealed .sq { transform: translate(25px, -75px) rotate(45deg); fill: #e6e6e6; } .thome.revealed .rh { transform: translate(61px, 137px) scale(1, -1) rotate(45deg); fill: #e9624e; } .tlotus.revealed .bt-1 { transform: translate(50px, 85.5px) rotate(135deg); fill: #cddc39; } .tlotus.revealed .bt-2 { transform: translate(121.5px, 14.5px) scale(1, 1) rotate(45deg); fill: #8bc34a; } .tlotus.revealed .st-1 { transform: translate(50px, 50px) scale(0.5, 0.5) rotate(135deg); fill: #d889db; } .tlotus.revealed .mt { transform: translate(86px, 50px) scale(0.7142, 0.7142) rotate(90deg); fill: #4caf50; } .tlotus.revealed .st-2 { transform: translate(50px, 50px) scale(-0.5, 0.5) rotate(135deg); fill: #f2b1b7; } .tlotus.revealed .sq { transform: translate(-25px, -25px); fill: #de5e87; } .tlotus.revealed .rh { transform: translate(121px, 14.5px) rotate(45deg); fill: #009688; } .tboat.revealed .bt-1 { transform: translate(50px, 12.5px) rotate(45deg); fill: #eee; } .tboat.revealed .bt-2 { transform: translate(50px, 0) scale(1, 1) rotate(0deg); fill: #ddd; } .tboat.revealed .st-1 { transform: translate(50px, 100px) scale(0.5, 0.5) rotate(-90deg); fill: #ededed; } .tboat.revealed .mt { transform: translate(100px, 100px) scale(0.7142, 0.7142) rotate(90deg); fill: #795548; } .tboat.revealed .st-2 { transform: translate(85px, 0px) scale(0.5, 0.5) rotate(135deg); fill: #d27373; } .tboat.revealed .sq { transform: translate(25px, 25px); fill: #c7c4c4; } .tboat.revealed .rh { transform: translate(64px, 29.5px) rotate(45deg); fill: #593f35; } .t { transition: opacity 0.75s 0.75s, background 0.5s; cursor: pointer; opacity: 1; } .hidden { transition-delay: 1.5s; animation-name: fade; animation-duration: 1.5s; cursor: auto; background-color: #9AFF93; } @keyframes fade { from { background-color: #FF9393; } to { background-color: #9AFF93; } } .stack { display: inline-block; font-size: 30px; } .times { display: inline-block; font-size: 20px; padding-left: 35%; } .data { text-align: left; } .swal-button { font-family: "PixelSplitter", sans-serif; } </style> <h1>Open The Card!!!</h1> <p>Click cards and find matching tangrams</p> <div class="board" id="tangramgrid"></div> <svg style="display:none;" viewBox="0 0 100 100"> <defs> <polygon id="tangram1" points="0 0, 50 50, 0 100" /> <polygon id="tangram2" points="50 50, 75 25, 100 50, 75 75" /> <polygon id="tangram3" points="0 100, 25 75, 75 75, 50 100"/> </defs> </svg> <div class="data"> <div class="stack"><span class="moves" id="moves">0</span> Moves</div> <div class="times"><span id="tens">0</span> second(s)</div> </div> <script> var count = 0, check = 0, tens = 0, trigger = 0; var Interval; var appendTens = document.getElementById("tens"); function startTimer() { tens++; appendTens.innerHTML = tens; } const classes = [ 'tcat', 'tsquirrel', 'theart', 'trocket', 'tbird', 'thome', 'tlotus', 'tboat' ]; const tangram = ` <div class="t"> <svg viewbox="-50 -50 200 200" > <use class="bt-1" xlink:href="#tangram1" transform="translate(0,0)"/> <use class="bt-2 red" xlink:href="#tangram1" transform="translate(0,0) scale(-1,1) rotate(90 0 0)"/> <use class="st-1" xlink:href="#tangram1" transform="translate(25,75) scale(.5,.5) rotate(-90 0 0)"/> <use class="mt" xlink:href="#tangram1" transform="translate(100,49.5) scale(.7142,.7142) rotate(45 0 0)"/> <use class="st-2" xlink:href="#tangram1" transform="translate(100,50) scale(.5,.5) rotate(-180 0 0)"/> <use class="sq" xlink:href="#tangram2"/> <use class="rh" xlink:href="#tangram3"/> </svg> </div> ` class MemoryGame { constructor(selector) { this.selector = selector this.init() } init() { this.randomize() this.buildGrid() this.revealed = [] } randomize() { this.classes = this.shuffle(classes.concat(classes)) } shuffle(array) { array.sort(function(a, b) { return 0.5 - Math.random() }); return array; } buildGrid() { let html = '' for (let i = 0; i < this.classes.length; i++) { html += tangram; } this.selector.innerHTML = html; this.cards = this.selector.querySelectorAll('.t') this.classes.forEach((el, i) => { const card = this.cards[i] card.classList.add(el) card.setAttribute('data-class', el) this.addCardListeners(card) }) } checkMatch() { count++; document.getElementById('moves').innerHTML = count return this.revealed.length === 2 && this.revealed[0].getAttribute('data-class') === this.revealed[1].getAttribute('data-class') } addCardListeners(el) { el.addEventListener('mouseenter', (e) => { if (el.classList.contains('revealed')) { return } if (this.revealed.length < 2) { return } Array.prototype.slice.call(this.revealed).forEach((item) => { item.classList.remove('revealed') }) this.revealed = [] }) el.addEventListener('click', (e) => { if (count == 0 && trigger == 0) { Interval = setInterval(startTimer, 1000); trigger++; } if (el.classList.contains('revealed')) { return } el.classList.add('revealed'); this.revealed.push(el) if (this.checkMatch()) { Array.prototype.slice.call(this.revealed).forEach((item) => { item.classList.add('hidden') this.revealed = [] }) check++; } if (check == 8) { clearInterval(Interval); swal({ title: "Good job!", text: "You click " + count + " time(s)" + "\nYour time was " + tens + " second(s)", button: "Restart!" }).then(function() { tens = 0; count = 0; check = 0; document.getElementById('moves').innerHTML = count; document.getElementById("tens").innerHTML = 0; memory = new MemoryGame(document.getElementById("tangramgrid")); }); } }, false); }; } let memory = new MemoryGame(document.getElementById("tangramgrid")); </script> </body> </html>