찬희
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>카드게임</title>
<style>
button{
width: 103px;
height: 40px;
border-radius:4px;
border:2px solid #000;
color:#000;
font-size:15px;
font-weight:bold;
background-color: #fff;
cursor:pointer;
}
body{
text-align: center;
}
#box{
width:570px;
margin:0 auto;
padding:40px;
}
img{
width:80px;
height:120px;
margin: 5px;
cursor:pointer;
}
</style>
</head>
<body>
<div id='box'>
<img src='1m1.png'>
<img src='1m2.png'>
<img src='2m1.png'>
<img src='2m2.png'>
<img src='3m1.png'>
<img src='3m2.png'>
<img src='4m1.png'>
<img src='4m2.png'>
<img src='5m1.png'>
<img src='5m2.png'>
<img src='6m1.png'>
<img src='6m2.png'>
<img src='7m1.png'>
<img src='7m2.png'>
<img src='8m1.png'>
<img src='8m2.png'>
<img src='9m1.png'>
<img src='9m2.png'>
<img src='10m1.png'>
<img src='10m2.png'>
<img src='11m1.png'>
<img src='11m2.png'>
<img src='12m1.png'>
<img src='12m2.png'>
</div>
<div style="height:50px;">
점수 : <small id="point"></small>
</div>
<button type="button" id='turn'>뒤집기</button>
<button type="button" id='hidden'>숨기기</button>
<button type="button" id='show'>보이기</button>
<button type="button" id='shuffle'>섞기</button>
<button type="button" id='game'>게임</button>
</body>
</html>
<script>
var cards = document.getElementById('box').children; // 이미지 배열
var turnAll = document.getElementById('turn'); // 뒤집기 버튼
var hidden = document.getElementById('hidden'); // 숨기기 버튼
var show = document.getElementById('show'); // 보이기 버튼
var shuffle = document.getElementById("shuffle"); // 섞기버튼
var gaming = document.getElementById("game"); // 섞기버튼
var pointP = document.getElementById("point");
var imgname = []; // 이미지이름
var boolean1 = false; // 숨기기 보이기 스위치
var cnt = false;
var boolean2 = false; // 카드체크 스위치
var boolean3 = false; // 중간체크 막기
var pre = '';
var prevalue = '';
var preindex = 0;
var post ='';
var point = 0;
pointP.innerHTML = 0;
gaming.onclick =function(){
for(let i =0; i<cards.length;i++){
cards[i].src = "back.png";
cards[i].setAttribute("data-fb","back");
}
boolean1 = true;
point = 0;
pointP.innerHTML = point;
}
for(let i =0; i<cards.length;i++){// 이미지이름초기화
imgname[i] = parseInt(i/2+1)+"m"+parseInt(i%2+1)+".png";
cards[i].setAttribute("data-fb","front");
cards[i].setAttribute("data-ban","false");
}
turnAll.onclick = function(){ // 뒤집기 클릭시
if(boolean1 == false){
for(let i =0; i<cards.length;i++){
cards[i].src = "back.png";
cards[i].setAttribute("data-fb","back");
}
boolean1 = true;
}
else{
for(let i =0; i<cards.length;i++){
cards[i].src = imgname[i];
cards[i].setAttribute("data-fb","front");
}
boolean1 = false;
}
};
hidden.onclick = function(){ // 숨기기 클릭시
for(let i=0; i<cards.length;i++)
cards[i].style.visibility = "hidden";
};
show.onclick = function(){ // 보이기 클릭시
for(let i=0;i<cards.length;i++)
cards[i].style.visibility = "visible";
};
shuffle.onclick = function(){ //셔플 클릭시
for(let i = 0; i<cards.length; i++){
let j = parseInt(Math.random()*cards.length);
let temp = '';
temp = imgname[i];
imgname[i] = imgname[j];
imgname[j] = temp;
}
for(let i=0;i<cards.length;i++)
cards[i].src = imgname[i];
}
for(let i =0; i<cards.length;i++){ // 버튼클릭시 뒤집기
cards[i].onclick = function(){
if(cards[i].getAttribute('data-fb')=='back' && boolean3 == false){
turn(imgname[i],i);
check(imgname[i],i);
}
}
}
var turn = function(imgname, i){
if(cards[i].getAttribute('data-ban')=='false'){
if(cards[i].getAttribute('data-fb')=='back'){
cards[i].src = imgname;
cards[i].setAttribute("data-fb","front");
}
else{
cards[i].src = 'back.png';
cards[i].setAttribute("data-fb","back");
}
}
}
var check = function(imgname, i){
if(cards[i].getAttribute('data-ban')=='false'){
if(boolean2 == false){ // 첫번째 카드체크
pre=imgname.slice(0,2);
prevalue=imgname;
preindex = i;
boolean2 = true;
}
else{ // 두번째 카드체크
boolean3 = true;
post=imgname.slice(0,2);
if(pre == post){
cards[i].setAttribute("data-ban","true");
cards[preindex].setAttribute("data-ban","true");
point++;
pointP.innerHTML = point;
boolean3=false;
if(point==12){
alert("좀하는데??");
}
}
else{
setTimeout(function(){
turn(imgname,i);
turn(prevalue,preindex);
boolean3 = false;
},500);
}
boolean2 = false;
}
}
}
</script>
영훈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<img id='c0_1' src="resource/resource/0_1.jpg" alt="">
<img id='c0_2' src="resource/resource/0_2.jpg" alt="">
<img id='c1_1' src="resource/resource/1_1.jpg" alt="">
<img id='c1_2' src="resource/resource/1_2.jpg" alt="">
<img id='c2_1' src="resource/resource/2_1.jpg" alt="">
<br>
<img id='c2_2' src="resource/resource/2_2.jpg" alt="">
<img id='c3_1' src="resource/resource/3_1.jpg" alt="">
<img id='c3_2' src="resource/resource/3_2.jpg" alt="">
<img id='c4_1' src="resource/resource/4_1.jpg" alt="">
<img id='c4_2' src="resource/resource/4_2.jpg" alt="">
<br>
<img id='c5_1' src="resource/resource/5_1.jpg" alt="">
<img id='c5_2' src="resource/resource/5_2.jpg" alt="">
<img id='c6_1' src="resource/resource/6_1.jpg" alt="">
<img id='c6_2' src="resource/resource/6_2.jpg" alt="">
<img id='c7_1' src="resource/resource/7_1.jpg" alt="">
<br>
<img id='c7_2' src="resource/resource/7_2.jpg" alt="">
<img id='c8_1' src="resource/resource/8_1.jpg" alt="">
<img id='c8_2' src="resource/resource/8_2.jpg" alt="">
<img id='c9_1' src="resource/resource/9_1.jpg" alt="">
<img id='c9_2' src="resource/resource/9_2.jpg" alt="">
</div>
<div>
<button id='turnAll'>뒤집기</button>
<button id='hide'>숨기기</button>
<button id='show'>보이기</button>
<button id='shuffle'>섞기</button>
</div>
</body>
</html>
<script>
window.onload=function(){
//변수선언
var isTurnAll=true;
checkArr=[];
var cnt=0;
var checkFlag=true;//setTimeout함수 실행전까지 클릭x
var turnAll=document.getElementById('turnAll');
var hide=document.getElementById('hide');
var show=document.getElementById('show');
var shuffle=document.getElementById('shuffle');
//카드 2차원배열 선언
var cardArr=new Array(10);
for(let i=0;i<10;i++){
cardArr[i]=new Array(2);
};
//경로 2차원배열 선언
var srcArr=new Array(10);
for(let i=0;i<10;i++){
srcArr[i]=new Array(2);
};
//배열에 카드 넣기, 경로 배열에 넣기
for(let i=0;i<10;i++){
for(let j=0;j<2;j++){
cardArr[i][j]=document.getElementById('c'+i+'_'+(j+1));
srcArr[i][j]="resource/resource/"+i+"_"+(j+1)+".jpg";
};
};
/* //경로 배열에 넣기
for(let i=0;i<10;i++){
for(let j=0;j<1;j++){
srcArr[i][j]="resource/resource/"+i+"_"+j+".jpg";
}
}*/
//뒤집기
turnAll.onclick=function(){
if(isTurnAll){
for(let i=0;i<cardArr.length;i++){
for(let j=0;j<cardArr[i].length;j++){
cardArr[i][j].src="resource/resource/back.jpg";
};
};
isTurnAll=false;
}else{//srcArr의 경로를 cardArr에 넣는다.
for(let i=0;i<cardArr.length;i++){
for(let j=0;j<cardArr[i].length;j++){
cardArr[i][j].src=srcArr[i][j];
};
};
isTurnAll=true;
};
};
//숨기기
hide.onclick=function(){
for(let i=0;i<cardArr.length;i++){
for(let j=0;j<cardArr[i].length;j++){
cardArr[i][j].style.visibility='hidden';
};
};
};
//보이기
show.onclick=function(){
for(let i=0;i<cardArr.length;i++){
for(let j=0;j<cardArr[i].length;j++){
cardArr[i][j].style.visibility='visible';
};
};
};
//섞기
shuffle.onclick=function(){
//경로섞기
for(let i=0;i<srcArr.length;i++){
for(let j=0;j<srcArr[i].length;j++){
let k=parseInt(Math.random()*srcArr.length);
let l=parseInt(Math.random()*srcArr[0].length);
let temp=srcArr[i][j];
srcArr[i][j]=srcArr[k][l];
srcArr[k][l]=temp;
};
};
//cardArr에 srcArr대입
for(let i=0;i<cardArr.length;i++){
for(let j=0;j<cardArr[i].length;j++){
cardArr[i][j].src=srcArr[i][j];
cardArr[i][j].alt='';
};
};
};
//=============================짝맞추기================================
for(let i=0;i<cardArr.length;i++){
for(let j=0;j<cardArr[i].length;j++){
cardArr[i][j].onclick=function(){
if(checkFlag){
if(cardArr[i][j].alt!='front'){//앞면이면 찍지 못하게한다.
cardArr[i][j].src=srcArr[i][j];
checkArr.push(cardArr[i][j]);
cardArr[i][j].alt='front';//뒤집음 속성 할당
cnt++;
console.log(cnt);
if(cnt==2){
checkFlag=false;
setTimeout(checkFn,500);
cnt=0;
}
}
}
}
}
}
//카드 비교함수
var checkFn=function (){
console.log(checkArr.length);
console.log(checkArr[0].src.charAt(41));
console.log(checkArr[1].src.charAt(41));
var checkcard1=checkArr[0];
var checkcard2=checkArr[1];
if(checkArr.length==2){//숫자가 같은지, 그리고 같은카드를 눌렀는지 확인
if((checkcard1.src.charAt(41)==checkcard2.src.charAt(41))&&(checkcard1.id!=checkcard2.id)){
checkArr=[];
checkFlag=true;
return;
}else{
checkcard1.src="resource/resource/back.jpg";
checkcard2.src="resource/resource/back.jpg";
checkcard1.alt='';
checkcard2.alt='';
checkArr=[];
}
}checkFlag=true;
}
}
</script>
</html>
경진
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
</style>
<body>
<iframe width="100%", height="500"></iframe>
<div id="cards">
<img src="resource/A_1.jpg" class="A" width="100" height="150">
<img src="resource/2_1.jpg" class="2" width="100" height="150">
<img src="resource/3_1.jpg" class="3" width="100" height="150">
<img src="resource/4_1.jpg" class="4" width="100" height="150">
<img src="resource/5_1.jpg" class="5" width="100" height="150">
<img src="resource/6_1.jpg" class="6" width="100" height="150">
<img src="resource/7_1.jpg" class="7" width="100" height="150">
<img src="resource/8_1.jpg" class="8" width="100" height="150">
<img src="resource/9_1.jpg" class="9" width="100" height="150">
<img src="resource/10_1.jpg" class="10" width="100" height="150">
<img src="resource/A_1.jpg" class="A" width="100" height="150">
<img src="resource/2_1.jpg" class="2" width="100" height="150">
<img src="resource/3_1.jpg" class="3" width="100" height="150">
<img src="resource/4_1.jpg" class="4" width="100" height="150">
<img src="resource/5_1.jpg" class="5" width="100" height="150">
<img src="resource/6_1.jpg" class="6" width="100" height="150">
<img src="resource/7_1.jpg" class="7" width="100" height="150">
<img src="resource/8_1.jpg" class="8" width="100" height="150">
<img src="resource/9_1.jpg" class="9" width="100" height="150">
<img src="resource/10_1.jpg" class="10" width="100" height="150">
</div>
<button id="turn">뒤집기</button>
<button id="hide">숨기기</button>
<button id="show">보이기</button>
<button id="shuffle">셔플</button>
<script>
var turnAll = false;
var cards = document.getElementById('cards').children;
var btn_turn = document.getElementById('turn');
var btn_hide = document.getElementById('hide');
var btn_show = document.getElementById('show');
var btn_shuffle = document.getElementById("shuffle");
// 모든 카드 뒤집기
btn_turn.onclick = function () {
if(turnAll){ // 카드가 뒷면이면...
turnAll = !turnAll;
for(var i = 0 ; i < cards.length ; i++) {
cards[i].src = "resource/"+cards[i].className+"_1.jpg";
cards[i].name = 'turnUp';
}
}
else { // 카드가 앞면이면...
turnAll = !turnAll;
for(var i = 0 ; i < cards.length ; i++) {
cards[i].src = 'resource/back.jpg';
cards[i].name = 'turnOff';
}
}
}
btn_show.onclick = function () { // 카드 보이기
for(var i = 0 ; i < cards.length ; i++) {
cards[i].style.visibility = "visible";
}
};
btn_hide.onclick = function () { // 카드 가리기
for(var i = 0 ; i < cards.length ; i++) {
cards[i].style.visibility = "hidden";
}
};
btn_shuffle.onclick = function () { // 셔플
//console.log(cards.length);
// for(var i = 0 ; i < cards.length ; i++) {
// cards[i].style.visibility = "hidden";
// }
// // 카드를 가립니다
console.log();
for(var i = 0 ; i < cards.length ; i++){ // 카드 배열만큼 for 문 돌림
var index = Math.ceil(Math.random()*(cards.length-1)); // index 값 random 으로 저장
var temp = cards[index].src; // temp에 데이터 값저장
cards[index].src = cards[i].src;
cards[i].src = temp; // src 값 switching
// className 값도 switching ==> src값이 바뀔때 같이 바뀌어야나중에 비교할때씀
temp = cards[index].className;
cards[index].className = cards[i].className;
cards[i].className = temp;
}
// 카드를 보입니다. 카드를 뒤집어서 섞은 후에 확인 할려고 나중에 css추가 예정
// for(var i = 0 ; i < cards.length ; i++) {
// cards[i].style.visibility = "visible";
// }
}
var turnUpCard = function (card) { // 카드를 보임
card.src = "resource/"+card.className+"_1.jpg";
card.name = 'turnUp';
}
var turnOffCard = function (card) { // 카드를 덮음
card.src = 'resource/back.jpg';
card.name = 'turnOff';
}
var cnt = 1; //
var fristcard = null;
var secendcard = null;
var gaming = false;
for(var i = 0 ; i < cards.length ; i++) {
cards[i].onclick = function () {
if (!gaming) {
if(this.name != 'turnOff')
return;
//console.log(cnt);
turnUpCard(this);
if (cnt == 2) {
//cnt = 5;
secendcard = this;
if (fristcard == secendcard)
return;
gaming = true;
setTimeout(function () {
if (!(fristcard.className == secendcard.className)) {
turnOffCard(fristcard);
turnOffCard(secendcard);
//alert("fristcard : " + fristcard.className + ",secendcard : " + secendcard.className);
}
cnt = 1;
gaming = false;
}, 1500);
}
else if (cnt == 1) {
fristcard = this;
console.log(fristcard.className);
cnt++;
}
// else if(cnt == 3)
// cnt = 1;
}
};
}
</script>
</body>
</html>