HTML 과 자바스크립트만 가지고 프로젝트를 하였다.
자바스크립트로 카드게임 만들기
(1.같은 그림 찾기 2. 인디언 포커 3.블랙잭)
메인화면은 위 사진과 같이 버튼 클릭을 통해 각 메뉴로 이동할 수 있도록 하였다.
<main.html> - 메인화면
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body{ /*body 배경색 지정 */
background-color: #000088;
}
.body{ /* main body 세부 설정 */
width: 650px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -325px;
margin-top: -200px;
background-image: url("image/main_back.jpg");
background-repeat: no-repeat;
background-size:cover;
}
.select{ /* 게임 선택 블록 */
background-color: #005500;
width: 400px;
height: 350px;
position: absolute;
top: 45%;
left: 50%;
margin-left: -200px;
margin-top: -150px;
}
.select input{ /*input type 스타일 설정 */
margin: 25px;
width: 150px;
height: 35px;
}
#rule_button{ /*게임 룰 버튼*/
border-color: red;
border-width: 5px;
background-color: #FFFF66;
}
#game1{ /*같은 그림 찾기 */
border-color : black;
border-width : 5px;
background-color:
}
#game2{ /*인디언 포커 */
border-color : black;
border-width: 5px;
background-color:
}
#game3{ /*블랙잭 */
border-color : black;
border-width: 5px;
background-color:
}
</style>
<script type="text/javascript">
function start(){
setTimeout(show_body,1000); /* 1초 뒤 함수 실행 */
}
function show_body(){
document.getElementById('body').style.display = "block";
setTimeout(show_select,1000); /*1초 뒤 함수 실행 */
}
function show_select(){
document.getElementById('select').style.display = "block";
}
</script>
</head>
<body onload="start()"> <!--start 함수 자동 실행 -->
<div class="body" id="body" style="display:none;">
<div class="select" id="select" align="center" style="display:none;">
<input type="button" id="game1" name="" value="Twin_card" onClick="location.href='twin_card_stage1.html'"><br>
<input type="button" id="game2" name="" value="Indian_Poker" onClick="location.href='indian.html'"><br>
<input type="button" id="game3" name="" value="Black_Jack" onClick="location.href='black_jack.html'">
<input type="button" id="rule_button" name="" value="game_rule" onclick ="location.href='rulepage.html'">
</div>
</div>
<audio src="audio/SkrillexBangarang.mp3" autoplay loop></audio> <!--BGM 재생 -->
</body>
</html>
|
cs |
<rulepage.html> - game_rule 페이지
|
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="rulepage.css" />
<script type="text/javascript">
function start() {
setTimeout(show_main, 1000);
}
function show_main() {
document.getElementById('main').style.display = "block";
}
</script>
</head>
<body onload="start()">
<div class="main" id="main" style="display:none;">
<div class="title_text" align="center">
Game Rule</div>
<div class="main_text">
<br>
<span id="twincard_text" align="left"><span id="twincard_text_title">Twin_card game</span>
<br><br><br><br>
1단계 : 5쌍의 카드, 카드보기5 초, 기회 3번<br>
2단계 : 10쌍의 카드, 카드보기 7초, 기회 6번<br>
3단계 : 15쌍의 카드, 카드보기 11초 , 기회 10번<br>
<br>
각 스테이지별로 기회안에 모든 쌍을 맞춰야 <br>
다음 단계로 넘어갈 수 있음<br>
<br>
시작버튼을 눌러 시작하고<br> 다시 시작으로 재시작한다.<br><br>
성공 100점 득점<br> 실패 50점 차감<br><br>
<br><br>
</span>
<span id="Indian_Poker_text" align="left"><span id="Indian_Poker_title">IndianPoker</span>
<br><br><br><br>
자신의 카드는 볼 수 없습니다.<br>
오직 상대방의 카드를 보고 call 또는 die<br>
를 선택하여 겨루는 게임<br><br>
자신의 턴에 call 또는 die를 선택합니다.<br>
승부에서 이긴 사람이 다음턴에 먼저 선택<br><br>
카드는 A부터 10까지 (A는 1로 계산) 있습니다. <br><br>
1라운드 ~ 10라운드까지 진행 <br><br>
call로 이기면 +200점 <br>
call로 지면 -200점<br><br>
die는 -100점 <br><br>
10을 들고 die---> -500점<br><br>
</span>
<span id="black_jack_text" align="left"><span id="black_jack_title">BlackJack</span>
<br><br><br><br>
A는 1 또는 11로 계산합니다.<br>
K, Q, J은 각각 10으로 계산합니다. <br>
그 외의 카드는 카드에 표시된 숫자로 계산합니다.<br><br>
처음 시작시 카드를 2장 받습니다.<br>
딜러는 카드 중 한장을 오픈<br>
딜러는 카드의 합이 17이 될때까지 추가로 카드를 뽑습니다.<br>
플레이어는 카드의 합이 21을 넘지 않는 범위 내에서 <br>
추가 카드를 받을수도 있고 받지 않을 수도 있습니다.<br><br>
딜러와 플레이어 중 카드의 합이 21 또는 21에 가장 가까운 숫자를 가지는 쪽이 이기는 게임입니다.<br><br><br>
승리 100점 득점<br>
패배 100점 감점 <br>
Blackjack 합이 21일 경우 200점 득점<br>
Bust 카드 합이 21을 초과하면 100점 감점<br>
Draw 카드 합이 같을 경우 서로 비김<br><br>
Giveup 게임을 포기하면 50점 감점<br><br>
</span>
</div>
<input type="button" id="mainbutton" name="back" value="main" onclick ="location.href='main.html'">
</div>
<audio src="audio/IDIOTAPE -Toad Song.mp3" autoplay loop></audio>
</body>
</html>
|
cs |
'프로젝트 > 카드 게임' 카테고리의 다른 글
| [HTML & 자바스크립트] 카드게임 만들기 [4.블랙잭] (0) | 2021.02.23 |
|---|---|
| [HTML & 자바스크립트] 카드게임 만들기 [3.인디언포커] (0) | 2021.02.23 |
| [HTML & 자바스크립트] 카드게임 만들기 [2.같은 그림 찾기] (0) | 2021.02.23 |
댓글