반응속도
var 스크린 = document.querySelector("#screen");
var startTime ;
var endTime;
var result = [];
var timeout;
스크린.addEventListener('click', function() {
if(스크린.classList.contains('waiting')) {
스크린.classList.remove('waiting');
스크린.classList.add('ready');
스크린.textContent = '초록색이 되면 클릭하세요';
timeout = setTimeout(function() {
startTime = new Date();
console.log(startTime);
스크린.click();
}, Math.floor(Math.random() * 1000) + 2000);
} else if(스크린.classList.contains('ready')) {
if (!startTime) {
clearTimeout(timeout);
} else {
스크린.classList.remove('ready');
스크린.classList.add('now');
스크린.textContent = '클릭하세요!';
}
} else if(스크린.classList.contains('now')) {
endTime = new Date();
console.log('반응속도', endTime - startTime, 'ms');
result.push(endTime - startTime);
startTime = null;
endTime = null;
스크린.classList.remove('now');
스크린.classList.add('waiting');
스크린.textContent = '클릭해서 시작하세요';
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>반응속도</title>
<style>
#screen {
width: 500px;
height: 300px;
text-align: center;
user-select: none;
}
#screen.waiting {
background-color: aqua;
}
#screen.ready {
background-color: red;
color: white;
}
#screen.now {
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="screen" class="waiting">
클릭해서 시작하세요
</div>
<script src="반응속도.js"></script>
</body>
</html>
짝맞추기
var 가로 = 4;
var 세로 = 3;
var 색깔들 = ['red', 'red', 'orange', 'orange', 'green', 'green', 'yellow', 'yellow', 'white', 'white', 'pink', 'pink'];
var 색깔후보 = 색깔들.slice();
var color = [];
var clickCard = [];
var finishCard = [];
var clickflag = true;
var startTime;
function 셔플() {
for (var i = 0; 색깔후보.length > 0; i += 1) {
color = color.concat(색깔후보.splice(Math.floor(Math.random() * 색깔후보.length), 1));
}
}
function 카드세팅(가로, 세로) {
clickflag = false;
for (var i = 0; i < 가로 * 세로; i++) {
var card = document.createElement('div');
card.className = 'card';
var cardInner = document.createElement('div');
cardInner.className = 'card-inner';
var cardFront = document.createElement('div');
cardFront.className = 'card-front';
var cardBack = document.createElement('div');
cardBack.className = 'card-back';
cardBack.style.backgroundColor = color[i];
cardInner.appendChild(cardFront);
cardInner.appendChild(cardBack);
card.appendChild(cardInner);
(function (c) {
card.addEventListener('click', function() {
if (clickflag && !finishCard.includes(c)) {
c.classList.toggle('flipped');
clickCard.push(c);
if (clickCard.length == 2) {
if (clickCard[0].querySelector('.card-back').style.backgroundColor === clickCard[1].querySelector('.card-back').style.backgroundColor) {
finishCard.push(clickCard[0]);
finishCard.push(clickCard[1]);
clickCard = [];
if (finishCard.length == 12) {
var endTime = new Date();
alert('축하합니다. 성공!!!!! ' + (endTime - startTime) / 1000 + '초 걸렸습니다.');
document.querySelector('#wrapper').innerHTML = '';
색깔후보 = 색깔들.slice();
clolr = [];
finishCard = [];
startTime;
셔플();
카드세팅(가로, 세로);
}
} else {
clickflag = false;
setTimeout(function () {
clickCard[0].classList.remove('flipped');
clickCard[1].classList.remove('flipped');
clickflag = true;
clickCard = [];
}, 1000);
}
}
}
});
})(card);
document.querySelector('#wrapper').appendChild(card);
}
document.querySelectorAll('.card').forEach(function (card, index) {
setTimeout(function() {
card.classList.add('flipped');
}, 1000 + 100 * index);
});
setTimeout(function() {
document.querySelectorAll('.card').forEach(function (card, index) {
card.classList.remove('flipped');
});
clickflag = true;
startTime = new Date();
}, 5000);
}
셔플();
카드세팅(가로, 세로);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>지뢰찾기</title>
<style>
.card {
display:inline-block;
margin-right: 20px;
margin-bottom: 20px;
width: 70px;
height: 100px;
perspective: 140px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card-front {
background: navy;
}
.card-back {
background: gainsboro;
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border: 1px solid black;
}
.card-back {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div id="wrapper"></div>
<script src="짝맞추기.js"></script>
</body>
</html>'자바스크립트' 카테고리의 다른 글
| 포로토타입과 프로토타입 상속 (0) | 2020.09.05 |
|---|---|
| 함수 심화학습, 객체 프로퍼티 설정 (0) | 2020.08.30 |
| 웹 게임을 만들며 배우는 자바스크립트 예제2 (0) | 2020.08.23 |
| 자료구조와 자료형 (0) | 2020.08.23 |
| 객체: 기초 (0) | 2020.08.23 |