<!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>CardGame</title>
</head>
<body>
<h1>Card Game!</h1>
<button onclick="reset()">Reset</button>
<button onclick="opn()">Open</button>
<button onclick="ba()">Back</button>
<br>
</body>
<SCript>
//1.배열생성
var cardArr = [];
function card(id, img){
this.id=id;
this.img=img;
}
for(i=1;i<11;i++){
cardArr.push(new card((i*10)+1, "file:///C:/Users/504CLASS%2003/Desktop/new/card/cardset/" + i+ "1.png"))
}
for(i=1;i<11;i++){
cardArr.push(new card((i*10)+2, "file:///C:/Users/504CLASS%2003/Desktop/new/card/cardset/" + i + "2.png"))
}
//2.카드 섞고
cardArr.sort(function(a, b){ return 0.5 - Math.random() });
//3.이미지 출력(카드 미리 깔아놓기)
var imgTagArr = [];
for(i=0;i<cardArr.length;i++){
imgTagArr[i] = document.createElement('img');
imgTagArr[i].src = cardArr[i].img;
imgTagArr[i].id = i;
imgTagArr[i].setAttribute('width',80);
imgTagArr[i].setAttribute('height',110);
document.body.appendChild(imgTagArr[i]);
imgTagArr[i].onclick = (function (x){ return function() {back(x) } })(i);
}
// 4.뒷면보이기
for(i=0;i<cardArr.length;i++){
imgTagArr[i].src = "cardback.jpg";
}
var cnt=0;
var fir;
var fir_id;
var sec;
var sec_id;
function back(x){
// console.log(imgTagArr[x].src);
if(imgTagArr[x].src == "file:///C:/Users/504CLASS%2003/Desktop/new/card/cardset/cardback.jpg"){
imgTagArr[x].src = cardArr[x].img;
cnt++;
}
if(cnt==1){
fir = cardArr[x].id;
fir_id=imgTagArr[x].id;
}else if(cnt==2){
sec = cardArr[x].id;
sec_id=imgTagArr[x].id;
setTimeout(function(){
if(!((fir-sec)==1||(fir-sec)==-1)){
imgTagArr[fir_id].src="cardback.jpg";
imgTagArr[sec_id].src="cardback.jpg";
}
},400);
cnt=0;
}
}
function reset(){
cardArr.sort(function(a, b){ return 0.5 - Math.random() });
for(i=0;i<cardArr.length;i++){
imgTagArr[i].src = "cardback.jpg";
}
}
function opn(){
for(i=0;i<cardArr.length;i++){
imgTagArr[i].src = cardArr[i].img;
}
}
function ba(){
for(i=0;i<cardArr.length;i++){
imgTagArr[i].src = "cardback.jpg";
}
}
</SCript>
</html>
'Coding > Javascipt' 카테고리의 다른 글
| Bingo - 2차 수정(완성) (0) | 2018.01.08 |
|---|---|
| CardGame - 1차수정 (0) | 2018.01.08 |
| Bingo - 1차수정(완성) (0) | 2018.01.08 |
| Bingo 초안 - 제작도중 저장 (0) | 2018.01.06 |
| Select (0) | 2018.01.06 |