비전공자 개발일기

Pair Game 본문

Javascript

Pair Game

HiroDaegu 2022. 8. 28. 12:02
728x90
SMALL

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PAIR GAME</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="main.js"></script>
</head>
<body>
  <div class="wrapper">  
    <h1>JavaScript pairs Game</h1>  
    <h3>Click any card to begin</h3>  
    <p><span id="seconds">00</span>:<span id="tens">00</span></p>  
    <p id ="text"></p>  
    <div id="container">  
    </div>  
   </div>  
</body>
</html>
 /* Variabes */  
 /* Mixin's */  
 body {  
  background: #82d2e5;  
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;  
  height: 100%;  
  color: #fff;  
  text-align: center;  
}  
h1, h2 {  
  font-family: 'Roboto', sans-serif;  
  font-weight: 100;  
  font-size: 2.6em;  
  text-transform: uppercase;  
}  
h3 {  
  font-family: 'Roboto', sans-serif;  
  font-weight: 100;  
  font-size: 1.4em;  
  text-transform: uppercase;  
}  
#seconds, #tens {  
  font-size: 2em;  
}  
button {  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
  border-radius: 5px;  
  -khtml-border-radius: 5px;  
  background: #82d2e5;  
  color: #fff;  
  border: solid 1px #fff;  
  text-decoration: none;  
  cursor: pointer;  
  font-size: 1.2em;  
  padding: 18px 10px;  
  width: 180px;  
  margin: 10px;  
  outline: none;  
}  
button:hover {  
  -webkit-transition: all 0.5s ease-in-out;  
  -moz-transition: all 0.5s ease-in-out;  
  transition: all 0.5s ease-in-out;  
  background: #fff;  
  border: solid 1px #fff;  
  color: #82d2e5;  
}  
#container {  
  width: 630px;  
  margin: 10px auto;  
}  
#container:after {  
  content: "";  
  display: table;  
  clear: both;  
}  
[data-view="card"] {  
  transform: rotateY(180deg);  
  width: 100px;  
  height: 140px;  
  border: solid 1px #d3cece;  
  border-radius: 5px;  
  float: left;  
  margin: 10px;  
  cursor: pointer;  
  background: linear-gradient(135deg, #f3f3f3 22px, #fff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px), linear-gradient(225deg, #f3f3f3 22px, #fff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px) 0 64px;  
  background-color: #f3f3f3;  
  background-size: 64px 128px;  
}  
.flipped {  
  transition: 0.6s;  
  transform-style: preserve-3d;  
  position: relative;  
  transform: rotateY(0deg);  
}  
.reverse {  
  transition: 0.6s;  
  transform-style: preserve-3d;  
  position: relative;  
  transform: rotateY(180deg);  
}  
.correct {  
  opacity: 0.5;  
  cursor: default;  
  transform-style: preserve-3d;  
  position: relative;  
  transform: rotateY(0deg);  
}  
/* Icons */  
.correct[data-item="sass"], .flipped[data-item="sass"] {  
  background: url("https://cathydutton.co.uk/images/tech/sass.jpg") left center no-repeat #fff;  
  background-size: contain;  
}  
.correct[data-item="gulp"], .flipped[data-item="gulp"] {  
  background: url("https://cathydutton.co.uk/images/tech/gulp.jpg") left center no-repeat #fff;  
  background-size: contain;  
}  
.correct[data-item="grunt"], .flipped[data-item="grunt"] {  
  background: url("https://cathydutton.co.uk/images/tech/grunt.jpg") left center no-repeat #fff;  
  background-size: contain;  
}  
.correct[data-item="git"], .flipped[data-item="git"] {  
  background: url("https://cathydutton.co.uk/images/tech/git.jpg") left center no-repeat #fff;  
  background-size: contain;  
}  
.correct[data-item="css"], .flipped[data-item="css"] {  
  background: url("https://cathydutton.co.uk/images/tech/css.jpg") left center no-repeat #fff;  
  background-size: contain;  
}
let myCards = document.getElementById('container');  
let resultsArray = [];  
let counter = 0;  
let text = document.getElementById('text');  
let seconds = 00;   
let tens = 00;   
let appendTens = document.getElementById("tens");  
let appendSeconds = document.getElementById("seconds");  
let Interval ;  
let images = [  
 'sass',   
 'git',   
 'gulp',   
 'css',   
 'grunt'  
];  
let clone = images.slice(0); // duplicate array  
let cards = images.concat(clone); // merge to arrays   
// Shufffel function  
function shuffle(o){  
 for(let j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i],  o[i] = o[j], o[j] = x);  
 return o;  
}  
shuffle(cards);  
for (let i = 0; i < cards.length; i++) {  
 card = document.createElement('div');  
 card.dataset.item = cards[i];  
 card.dataset.view = "card";  
 myCards.appendChild(card);  
 card.onclick = function () {  
  if (this.className != 'flipped' && this.className != 'correct'){  
    this.className = 'flipped';  
    let result = this.dataset.item;  
    resultsArray.push(result);  
    clearInterval(Interval);  
    Interval = setInterval(startTimer, 10);  
  }  
  if (resultsArray.length > 1) {  
   if (resultsArray[0] === resultsArray[1]) {  
    check("correct");  
    counter ++;  
    win();  
    resultsArray = [];  
   } else {  
    check("reverse");  
    resultsArray = [];  
   }  
  }  
 }  
};  
let check = function(className) {  
 let x = document.getElementsByClassName("flipped");  
 setTimeout(function() {  
  for(let i = (x.length - 1); i >= 0; i--) {  
   x[i].className = className;  
  }  
 },500);  
}  
let win = function () {  
 if(counter === 5) {  
  clearInterval(Interval);  
  text.innerHTML = "Your time was " + seconds + ":" + tens;  
 }   
}  
function startTimer () {  
 tens++;   
 if(tens < 9){  
  appendTens.innerHTML = "0" + tens;  
 }  
 if (tens > 9){  
  appendTens.innerHTML = tens;  
 }   
 if (tens > 99) {  
  seconds++;  
  appendSeconds.innerHTML = "0" + seconds;  
  tens = 0;  
  appendTens.innerHTML = "0" + 0;  
 }  
 if (seconds > 9){  
  appendSeconds.innerHTML = seconds;  
 }  
}
728x90
LIST

'Javascript' 카테고리의 다른 글

Neomorphic Analog Clock  (0) 2022.09.16
Copy To Clipboard  (0) 2022.09.11
Music Player  (0) 2022.08.26
Countdown Timer  (0) 2022.08.25
Chart  (0) 2022.08.24
'Javascript' Related Articles more