1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<!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>
<style>
img{
width: 70px;
height: 100px;
}
</style>
</head>
<body>
<button>뒤집기</button>
<button>감추기</button>
<button>섞기</button><br><br>
<div>
</div>
<script>
var srcs = []; //cards는 주소, src는 이미지_console창 확인 가능
var cards;
window.onload = function(){
//반복문 이용해서 이미지 넣기
var put = '';
for(var k=0; k<2; k++){
for(var i=1; i<3; i++){ //4
for(var j=1; j<11; j++){ //13
put += '<img src="card//'+i+'_'+j+'.png">';
}
}
}
var divtag = document.querySelector('div');
divtag.innerHTML = put;
//값 불러오기
var btns = document.querySelectorAll('button');
cards = document.querySelectorAll('img');
// '뒤집기' button
// 0.성공_srcs[](임시배열)사용
for(var i=0; i<cards.length; i++){
srcs[i] = cards[i].src;
}
btns[0].onclick = function show(){
for(var i=0; i<cards.length; i++){
cards[i].src = srcs[i];
}
}
//'감추기'button
btns[1].onclick = function(){
for(var i=0; i<cards.length; i++){
cards[i].src = "cardback.jpg";
}
}
//'섞기'button
// 0.성공_sort.Math.random() 사용
btns[2].onclick = function(){
srcs.sort((a, b) => Math.random() -0.5);
for(var i=0; i<cards.length; i++){
cards[i].src = srcs[i];
}
}
//'카드 클릭 시 이미지 변경'
//0. onclick, id(this.id), 외부 function flip(i) 사용
for(var i=0; i<cards.length; i++){
cards[i].setAttribute("id", i);
}
for(var i=0; i<cards.length; i++){
cards[i].setAttribute("onclick", "flip(this.id)");
}
}
var pickarr = [];
var arrnum = 0;
var prenum;
var count = 0;
function flip(i){
cards[i].src = srcs[i];
pickarr[arrnum++]= srcs[i];
//첫번째 카드 id 저장
if(arrnum == 1){
prenum = i;
}
if(arrnum == 2){
if(pickarr[0] == pickarr[1]){
setTimeout(function(){
alert("즈엉답");},700);
count += 2;
}else{
setTimeout(function(){
cards[prenum].src = "cardback.jpg";
cards[i].src = "cardback.jpg";
},1000);
setTimeout(function(){
alert("탈롹");},700);
}
arrnum = 0;
}
if(count == 40){
setTimeout(function(){
alert("게임 종료!");},700);
}
}
</script>
</body>
</html>
| cs |
이미지 보내주세요!! 그리고 이 코드 조금씩 변형해서 사용해도 될까요?
답글삭제네 변형해도 됩니다. 이미지는 글 하단에 링크로 걸어 두었습니다~
삭제