본문 바로가기
프로젝트/카드 게임

[HTML & 자바스크립트] 카드게임 만들기 [2.같은 그림 찾기]

by 바디스 2021. 2. 23.

​

게임 초기 화면
게임 플레이 화면

같은 그림 찾기 게임은 처음 몇 초간 오픈된 카드를 기억하여 카드 쌍을 맞추는 게임이다.

1스테이지~3스테이지 까지 구성하였으며, 5쌍, 10쌍 15쌍 순으로 카드 수가 증가한다.​

난이도가 올라갈 수록 처음 보여주는 시간과 기회를 더 많이 주는 방식이다.

 

<twin_card_stage1.trml> - 같은그림 찾기 1단계

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
<!DOCTYPE html>
<html lang="en" dir="ltr">
 
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="twin_card_stage1.css" />
 
  <script type="text/javascript" src="twin_card_stage1.js"></script>
</head>
<body onload="shuffle()">
  <audio src="audio/twin_card_bgm.mp3" autoplay loop>  </audio>
  <div class="cardSet" style="position:center">
    <div class="card" onclick="turn(this.id)" id="0" style="position : absolute; left:5px ">
    </div>
    <div class="card" onclick="turn(this.id)" id="1" style="position : absolute; left:130px">
    </div>
    <div class="card" onclick="turn(this.id)" id="2" style="position : absolute; left:255px">
    </div>
    <div class="card" onclick="turn(this.id)" id="3" style="position : absolute; left:380px">
    </div>
    <div class="card" onclick="turn(this.id)" id="4" style="position : absolute; left: 505px">
    </div>
    <br>
    <div class="card" onclick="turn(this.id)" id="5" style="position : absolute; left:5px ; margin-top : 180px">
    </div>
    <div class="card" onclick="turn(this.id)" id="6" style="position : absolute; left:130px ; margin-top : 180px">
    </div>
    <div class="card" onclick="turn(this.id)" id="7" style="position : absolute; left:255px ; margin-top : 180px">
    </div>
    <div class="card" onclick="turn(this.id)" id="8" style="position : absolute; left:380px ; margin-top : 180px">
    </div>
    <div class="card" onclick="turn(this.id)" id="9" style="position : absolute; left:505px ; margin-top : 180px">
    </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <input type="button" name="" id="start" value="시작" onclick="card_show()">
    <input type="button" name="" id="restart" value="다시시작" onclick="refresh()">
    <input type="button" name="" id="end" value="게임 끝" onClick="location.href='main.html'">
    <div class="score" id="score_result"> </div>
  </div>
</body>
 
</html>
 cs

 

실행될 때, 카드 데이터 값을 섞어주는 shuffle 함수가 동작한다.

body부분엔 div로 각 카드의 구역을 나누어 배치해주었다. 또한, onclick 동작으로 각자 카드에 해당하는 id로 turn함수(카드를 뒤집는 함수)가 실행될 수 있도록 하였다.

 

<twin_card_stage1.js> -카드게임 자바스크립트 부분

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
var cardBack = new Audio("audio/card_back.mp3");
var callaudio = new Audio("audio/call.mp3");
var loseaudio = new Audio("audio/lose.mp3");
var winaudio = new Audio("audio/win.mp3");  /* 효과음 설정 */
var dec = ["1a", "1a", "2a", "2a", "3a", "3a", "4a", "4a", "5a", "5a"];   /* 카드 데이터 값 1a ~ 5a */
var base = "image/";
var default_score = parseInt(0);   // score 변수 선언
var cnt = 0;
var card = [];
var rst = [];   //카드 섞을 때 사용할 배열 선언
var losecount = 3;   //losecount 1단계 기회 3번
var wincount = 0;
 
// 랜덤하게 추출 (array Ver)
function getRandom(min, max) {   //랜덤으로 숫자 뽑는 함수
  return Math.floor((Math.random() * (max - min + 1)) + min);
}
 
function getRandomArray(min, max, count) {
  while (1) {
    var index = getRandom(min, max);
    // 중복 여부를 체크
    if (rst.indexOf(index) > -1) {
      continue;
    }
    rst.push(index);   //rst 배열에 index값을 push로 계속 넣어줌
    // 원하는 배열 갯수가 되면 종료
    if (rst.length == count) {   //count값만큼 rst배열이 차면 break문으로 탈출
      break;
    }
  }
 
  return rst;  //rst값 반환
}
 
function shuffle() {  //카드 섞는 함수
  rst = [];
  card = [];
  var score_result = document.getElementById("score_result");
  score_result.innerHTML = "현재 점수 : " + default_score;
  getRandomArray(0, dec.length - 1, dec.length);   //dec 카드 데이터값만큼 숫자 랜덤 추출
  for (var i = 0; i < dec.length; i++) {
    card.push(dec[rst.pop()]);   //card 배열에 rst배열값들을 push로 넣어줌 (카드 셔플)
  }
}
 
function refresh() {  //점수, cnt 초기화
  default_score = 0;
  cnt = 0;
 
  shuffle();  //카드 셔플
  card_show();  //카드 보여주기
 
}
 
function win_print() { //이긴후(맞춘후) 점수
  var score_result = document.getElementById("score_result");
  default_score += 100;   //100점씩 추가
  score_result.innerHTML = "현재 점수 : " + default_score;  //기존 점수 + defult_score값 추가해서 출력
  card1.style.display = "none";
  card2.style.display = "none";
  callaudio.play();
  callaudio.currentTime = 0;
  ++wincount;   //win count값 증가
  if (wincount == 5) {   //1단계 5쌍 모두 맞추면
    winaudio.play();
    winaudio.currentTime = 0;
    alert("You Win !");
    location.href = "twin_card_stage2.html";   //2단계 스테이지로 이동
  }
}
 
 
 
function lose_print() {  //카드 쌍 맞추기 실패
  //alert("패배");
  var score_result = document.getElementById("score_result");
  default_score -= 50;   //50점 감점
  score_result.innerHTML = "현재 점수 : " + default_score;  //기존 점수에 감점 반영해서 출력
  lose_action();    //틀렸을 때, (카드 다시 뒤집는 동작)
  //lose_action();
}
 
function lose_action() { //틀렸을때 점수가 깍인 후 실행될 것
  loseaudio.play();
  loseaudio.currentTime = 0;
  alert("남은 기회 " + (--losecount));  //남은 기회 출력
  //loseaudio.paly();
  card1.style.backgroundImage = "url('image/back.png')";    //card 1 첫번째 back 이미지로 전환
  card1.style.backgroundSize = "120px 180px";
  card2.style.backgroundImage = "url('image/back.png')";   //card 2 두번째 back 이미지로 전환 (카드 뒤집기)
  card2.style.backgroundSize = "120px 180px";  //카드 사이즈 조정
  if (losecount == 0) {  //lose count 0이 되면
    loseaudio.play();
    loseaudio.currentTime = 0;
    alert("Game Over");   //game over 출력
    cnt = 0;
    start();
  }
 
}
 
function card_show() { //시작버튼 누르면 카드가 뒤집혀 5초동안 보여짐
  if (cnt >= 1) {
    alert("다시 시작하시려면 다시시작 버튼을 눌러주세요! \n카드가 섞이지 않음");
    //시작 버튼 눌렀을 때 경고창 출력
  } else {
    for (var i = 0; i < 10; i++) { //사진 랜덤으로 고르기
      var ch_card = document.getElementById(i);
      ch_card.style.display = "block";
      ch_card.style.backgroundImage = "url('" + base + card[i] + ".png')";  //각 데이터 값에 해당하는 카드 이미지 출력
      ch_card.style.backgroundSize = "120px 180px";  //카드 사이즈 조정
    }
  }
  setTimeout(start, 5000); //5초동안 보여줌   (1단계)
  cnt += 1;    //count값 증가 (게임 시작)
}
 
function start() {  //게임 시작 버튼
  losecount = 3;   //1단계 기회 3번으로 설정
  wincount = 0;
  default_score = 0;  //초기 점수 0점
  var score_result = document.getElementById("score_result");
  score_result.innerHTML = "현재 점수 : " + default_score;
  for (var i = 0; i < 10; i++) {
    var ch_card = document.getElementById(i);
    ch_card.innerHTML = "";
    ch_card.style.backgroundImage = "url('image/back.png')";   //모든 카드 뒤집은 이미지 출력
  }
}
 
var check1 = 0;
var check2 = 0;
var card1 = 0;
var card2 = 0;
 
function turn(num) {  //카드 눌러서 뒤집는 동작
  var ch_card = document.getElementById(num);
  //cardBack.currentTime(0.2);
  cardBack.play();
  cardBack.currentTime = 0;
  ch_card.style.backgroundImage = "url('image/" + card[num] + ".png')";   //해당하는 이미지 출력
  ch_card.style.backgroundSize = "120px 180px";
  if (check1 == 0) {  //첫번째 card open
    check1 = card[num];   //check1에 카드 데이터값 저장
    card1 = ch_card;
  } else if (check2 == 0) {    //두 번째 card open
    check2 = card[num];  //check2에 카드 데이터값 저장
    card2 = ch_card;
    if (check1 == check2) {  //만일 두 카드가 동일한 데이터갑을 가지면
      //alert("승리");
      check1 = 0;
      check2 = 0;  //check 초기화
      setTimeout(win_print, 100); //0.1s 뒤 win_print함수 실행
    } else {
      setTimeout(lose_print, 100);  //카드를 못맞췄다면 lose_print함수 실행
      //lose_print();
 
 
      check1 = 0;
      check2 = 0;  //check 초기화
    }
  }
}
 cs

 

카드게임의 모든 stage들은 공통적으로 카드 데이터 값 랜덤추출과 카드 셔플하는 함수는 비슷하게 사용하였다.​

카드 쌍 맞추기를 틀렸을 때는 카드의 이미지를 다시 뒤집으며 score를 감점하는 방식으로 진행하였다.​

원래는 카드 쌍을 맞추면 그림이 사라지도록 설정 하였다.

stage2와 3의 경우 카드 데이터 값의 배열을 더 늘려주고 카드를 더 배치해주는 것 외에 코드는 동일하다.

 

 

<twin_card_stage1.css> -카드게임 css부분

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
 @import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
  html {font-family: 'Jeju Gothic', serif;}
  .cardSet {
    position: fixed;
    top: 20%;
    left: 28%;
  }
  .card {
    background-image: url("image/back.png");
    background-size: 120px 180px;
    width: 120px;
    height: 180px;
    margin: 10px;
  }
  #start {
    position: absolute;
    width: 100px;
    height: 30px;
    left: 200px;
    top: 410px;
  }
  #restart {
    position: absolute;
    width: 110px;
    height: 30px;
    left: 360px;
    top: 410px;
  }
  #end{
    position: absolute;
    width: 100px;
    height: 30px;
    left: 650px;
    top: 410px;
  }
  #score_result {
    font-size: 30px;
    text-align: center;
 
    position: absolute;
    border-color: blue;
    border-width: 0.5px;
    border-style: outset;
    width: 260px;
    height: 50px;
    line-height: 50px;
    left: 190px;
    bottom: 380px;
  }
 cs

 

[HTML & 자바스크립트] 카드게임 만들기 [1.메인화면 및 게임룰]
자바스크립트로 카드게임 만들기 (1.같은 그림 찾기 2. 인디언 포커 3.블랙잭) ​ 메인화면은 위 사진과 같이 버튼 클릭을 통해 각 메뉴로 이동할 수 있도록 하였다. - 메인화면 1 2 3 4 5 6 7 8 9 10 11 12 13 1..
dw3232.tistory.com

'프로젝트 > 카드 게임' 카테고리의 다른 글

[HTML & 자바스크립트] 카드게임 만들기 [4.블랙잭]  (0) 2021.02.23
[HTML & 자바스크립트] 카드게임 만들기 [3.인디언포커]  (0) 2021.02.23
[HTML & 자바스크립트] 카드게임 만들기 [1.메인화면 및 게임룰]  (1) 2021.02.23

관련글

댓글

티스토리툴바