<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<body>
<script>
// 변수 선언
var printCnt = document.getElementById('count');
var current = 0; // 현재 뒤집은 카드
var canFlip = true; //두개 뒤집을 막기위함
var total = 0; // 완전 깨서 다뒤집은 갯수 카운팅
var isExit = false; // 게임 종료
// 카드 배열 선언
var cardNum = new Array(26); //게임 판
var Real = new Array(13); // 실제 카드 갯수
var Back = new Array(26); // 뒷면 카드
for (var i = 0; i < Real.length; i++) {
Real[i] = 0;
}
var pair = new Array(2); //1번 카드 2번카드
var clear = new Array(26); // 뒤집어진 카드 배열
for (var i = 0; i < clear.length; i++) {
clear[i] = false;
}
for( i =0;i<Back.length;i++){
Back[i]="back.png"; // 게임판 생성 26칸 을 모두 카드 뒷면으로 채워라
}
// html 동적으로 설정
var game = document.createElement('div');
game.id = "game";
document.body.appendChild(game);
for(i=0;i<13*2;i++){ // 카드뒷면 생성
Back[i]= document.createElement('img');
Back[i].src="back.png"
Back[i].id=i;
Back[i].setAttribute("onclick","cardFlip(this)");
// onclick 은 따로 없기 때문에 setAttribute 로 넣어 줘야 한다.
Back[i].style.visibility ='visible';
game.appendChild(Back[i]);
// game 이라는 div 에 종속 시키기
Back.width=50;
Back.height=50;
Back.className =Back[i]%26;
Back.alt='';
}
// 카드 번호 랜덤으로 가져오기
function Random() { //일단 섞어
return Math.floor(Math.random() * 13+1 );
}
// 카드 종류 정하기
function shuffle() { // 뽑아
for (var i = 0; i < cardNum.length; i++) {
var tmp = Random();
while (Real[tmp-1] >= 2) {
tmp = Random();
console.log(Random());
}
cardNum[i] = tmp;
console.log("tmp"+tmp);
Real[tmp - 1]++;
}
}
//카드 뒤집기
// 카드 셔플
shuffle();
function cardFlip(obj) {
if (canFlip) {
if (Back[obj.id])
pair[current] = obj.id; // 현재 뒤집은거에 1 2 방에 한장씩 우선 // 카드 비교를 위해서
obj.src = cardNum[obj.id]+"S" + '.jpg'; // 카드 뿌리기
if (Back[obj.id]) // 뒷면 번호
current++; // 현재 클릭 1
Back[obj.id] = false; // 일단 그 번호는 뒷면이 아닌거 일단
// printCntOfFlip();
if (current == 2) { // 두개를 뒤집으면
canFlip = false; // 일단 더이상 안뒤집고
if (cardNum[pair[0]] == cardNum[pair[1]]) { // 두개의 카드가 맞는지 확인
clear[pair[0]] = clear[pair[1]] = true;
total += 2; // 맞다면 2개
// 게임 종료
if (total >= 26){ // 다 뒤집으면 게임 끝
isExit = true; // 종료 시작
var Btn = document.getElementById('game');
setTimeout(function re() {
Btn.innerHTML = "<button onclick='restart()'>Restart</button>";
}, 1000); //btn 생성하기 // 게임 종료시에만 다시 restart 버튼이 생긴다
d
}
}
// 카드 다시 뒤집기
setTimeout(function cardReFlip() {
var reFlip = 0; // 다시
var tmpID;
for (var i = 0; i < cardNum.length; i++) {
if (!Back[i] && !clear[i]) { // 일단 뒷면이 아니고 clear 한것도 아니면
reFlip++;
tmpID = document.getElementById(i);
tmpID.src = "back.png"; // 다시 뒷면으로
Back[i] = true;
}
if (reFlip >= 2) break; // 두개 이상 되면 일단 멈쳐
}
current = 0; // 초기화
canFlip = true; // 이제 다시 뒤집을 수 있다
}, 500);
}
}
}
// 게임 재시작
function restart() { // 재실행을 하기위한 함수
window.location.reload(true);
}
// 게임 실행
</script>
</body>
</html>
'프로그래밍 > JAVA SCRIPT' 카테고리의 다른 글
| [JQUERY] 이벤트 글자 제한 (0) | 2018.01.10 |
|---|---|
| [JavaScript] 빙고게임 판 (0) | 2018.01.09 |
| [JAVA SCRIPT]상속 (0) | 2018.01.03 |
| function의 오버로딩 (0) | 2018.01.03 |
| 자바스크립트 (0) | 2017.12.30 |
