웹응프 수업 시간에 잠깐 소개됐던 Craps Game !!
차근차근 파헤쳐 보겠습니다 🔥
Craps Rules
on the first roll, you win with any combination of dice that totals 7
첫 번째에, 어떤 조합으로라도 7이 나오면 승리한다.
you lose any combination of dice that totals 2,3 or 12
이 때, 어떤 조합으로라도 2,3,12 가 나오면 패배한다.
and any other total (4,5,6,8,9,10) becomes your "point" and the game continue
다른 숫자들의 합(4,5,6,8,9,10)은 당신의 "Point"가 되며 게임은 다시 진행된다.
If you dont win or lose on the first roll, you must continue rolling to "make your point"
첫 번째 주사위를 던졌을 때 이기거나 지지 않은 경우 계속해서 "자신의 Point"를 만들기 위해 시도해야 한다.
that is, roll a combination of the dice that totals your point value
이때의 "your point"란 주사위를 굴려서 나온 이전의 조합, 즉 자신의 점수를 의미한다.
If you roll a 7 before your point, you lose.
당신의 점수에 맞는 숫자가 나오기 전에, 7이 나온다면 패배한다.
If you roll anything other than a 7 or your point, you continue rolling
7 이거나 또는 당신의 점수가 아닌 다른 숫자가 나온다면, 계속해서 주사위를 굴린다.
Code Review
<!DOCTYPE html>
<!-- Fig. 9.7: Craps.html -->
<!-- Craps game simulation. -->
<html>
<head>
<meta charset = "utf-8">
<title>Craps Game Simulation</title>
<style type = "text/css">
p.red { color: red }
img { width: 54px; height: 54px; }
div { border: 5px ridge royalblue;
padding: 10px; width: 120px;
margin-bottom: 10px; }
.point { margin: 0px; }
</style>
//CSS
<script>
// variables used to refer to page elements
var pointDie1Img; // refers to first die point img
var pointDie2Img; // refers to second die point img
var rollDie1Img; // refers to first die roll img
var rollDie2Img; // refers to second die roll img
var messages; // refers to "messages" paragraph
var playButton; // refers to Play button
var rollButton; // refers to Roll button
var dicerolling; // refers to audio clip for dice
// other variables used in program
var myPoint; // point if no win/loss on first roll
// 바로 끝나는 숫자(이기거나 지거나)가 아닐 때, 나의 점수(포인트)로 저장해놓는다.
var die1Value; // value of first die in current roll
// 첫 번째 주사위 값 저장
var die2Value; // value of second die in current roll
// 두 번째 주사위 값 저장
// 전역 변수로 선언, 어디서든(코드 전체에서) 접근 가능
// starts a new game
function startGame()
{
// get the page elements that we'll interact with
dicerolling = document.getElementById( "dicerolling" );
pointDie1Img = document.getElementById( "pointDie1" );
pointDie2Img = document.getElementById( "pointDie2" );
rollDie1Img = document.getElementById( "rollDie1" );
rollDie2Img = document.getElementById( "rollDie2" );
messages = document.getElementById( "messages" );
playButton = document.getElementById( "play" );
rollButton = document.getElementById( "roll" );
rollButton.disabled = true; // disable rollButton
// 젤 처음에는 Roll 버튼 사용 불가
setImage( pointDie1Img ); // reset image for new game
setImage( pointDie2Img ); // reset image for new game
setImage( rollDie1Img ); // reset image for new game
setImage( rollDie2Img ); // reset image for new game
// 처음엔 초기화 시켜줘야지, 여기서는 다 블랭크 이미지겠지
// setImage 에서 확인!
myPoint = 0; // there is currently no point
//현재의 myPoint(내 점수)는 0이다.
firstRoll(); // roll the dice to start the game
// 게임을 시작하기 위해 첫번째 주사위를 던진다.
} // end function startGame
// perform first roll of the game
function firstRoll()
// 게임을 시작할 때, 첫 번째 시도, 첫 번째로 주사위 던졌을 때
{
var sumOfDice = rollDice(); // first roll of the dice
// 처음 주사위 굴린거 몇이라고 나오겠지 ? -> rollDice 함수에서 !
switch (sumOfDice)
{
case 7: case 11: // win on first roll
// 첫 시도에 7이랑 11 나오먄 그 즉시 승리
messages.innerHTML =
"You Win!!! Click Play to play again.";
break;
case 2: case 3: case 12: // lose on first roll
// 첫 시도에 2,3,12 나오면 그 즉시 패배
messages.innerHTML =
"Sorry. You Lose. Click Play to play again.";
break;
default: // remember point
// 위에 둘 다 아니다 => 이긴것도 진것도 아니다
myPoint = sumOfDice;
// 이때의 점수의 합을 내 점수(myPoint)로 설정하기
setImage( pointDie1Img, die1Value );
setImage( pointDie2Img, die2Value );
// 이미지 보여주기, 지금 내 점수
messages.innerHTML = "Roll Again!";
// 이기거나 진게 아니니까, 다시 주사위 돌려야 함
rollButton.disabled = false; // enable rollButton
// Roll 버튼 활성화
playButton.disabled = true; // disable playButton
// Play 버튼 비활성화
break;
} // end switch
// 자 이러면 첫 번째 시도가 끝났어, 그 다음 어디로 가?
// Roll 버튼을 눌렀을 때 이벤트 발생으로 가겠지 => rollAgain !!
}
function rollAgain()
{
var sumOfDice = rollDice(); // subsequent roll of the dice
// 다시 굴렸을 때의 내 점수
if (sumOfDice == myPoint)
{
// 굴렸을 때 나온거랑 이전에 정해둔 내 포인트랑 같으면 승리
messages.innerHTML =
"You Win!!! Click Play to play again.";
rollButton.disabled = true; // disable rollButton
// 이겼으니까 다시 Roll 할 필요가 없음 disable 해놓기
playButton.disabled = false; // enable playButton
// 다시 시작하려면 Play 버튼 활성화
} // end if
else if (sumOfDice == 7) // craps
//첫 시도가 아닌 이상 그 다음에 7 나오면 그 순간 바로 진거잖아
{
messages.innerHTML =
"Sorry. You Lose. Click Play to play again.";
rollButton.disabled = true; // disable rollButton
playButton.disabled = false; // enable playButton
} // end else if
// 둘 다 아니면? 그냥 다시 돌아야지 => 다시 Roll 버튼 눌러서 계속 굴려야지
} // end function rollAgain
// roll the dice
function rollDice()
{
// 주사위 굴리기
dicerolling.play(); // play dice rolling sound
// clear old die images while rolling sound plays
die1Value = NaN;
die2Value = NaN;
// 초기화 시켜서 출력을 하고
showDice();
// alert("방금 전까지는 undefined 겠지? 근데 이제 숫자 할당해줘");
die1Value = Math.floor(1 + Math.random() * 6);
die2Value = Math.floor(1 + Math.random() * 6);
// die1Value, die2Value => 전역 변수임
// alert("숫자 할당 끝");
showDice();
// 이거를 추가해줘야 함 , 왜 ? 소리가 안나와서 안되거든 그래서 강제로 시작 해줘야 함
return die1Value + die2Value;
} // end function rollDice
// display rolled dice
function showDice()
{
setImage( rollDie1Img, die1Value );
setImage( rollDie2Img, die2Value );
} // end function showDice
// set image source for a die
function setImage( dieImg, dieValue )
{
if ( isFinite( dieValue ) ) {
// alert("dievalue 가 숫자라서 if로 빠졌음")
// alert(dieValue);
// 숫자에 해당하는 값이면? 그 주사위를 보여주고
dieImg.src = "die" + dieValue + ".png";
}
else {
// alert("else 로 빠졌음")
// 숫자에 해당하는게 아니다, 그럼 공백 보여줌
dieImg.src = "blank.png";
}
} // end function setImage
// register event liseners
function start()
{
var playButton = document.getElementById( "play" );
// play 라는 ID를 가진 놈을 찾아서 playButton 에다가 할당
playButton.addEventListener( "click", startGame, false );
// 그 버튼이 클릭될 때, startgame 함수 호출 ( 그 변수에 클릭 이벤트 발생 )
var rollButton = document.getElementById( "roll" );
// 롤 어게인 함수 호출 ( 롤 버튼 변수에 클릭 이벤트 발생하면 )
rollButton.addEventListener( "click", rollAgain, false );
var diceSound = document.getElementById( "dicerolling" );
diceSound.addEventListener( "ended", showDice, false );
// 주사위 굴리는게 끝나고 나면(여기서 ended는 소리가 끝나는걸 말함) 주사위 보여줘라
// showDice - 주사위 보여주는 함수
} // end function start
window.addEventListener( "load", start, false );
// 윈도우가 완전히 로드(load) 되고 나면, start 함수를 실행한다.
</script>
</head>
<body>
<audio id = "dicerolling" preload = "auto">
<source src = "http://test.deitel.com/dicerolling.mp3"
type = "audio/mpeg">
<!-- 오디오 넣는거, audio 속성에 source 넣고 src 넣어주기 -->
<source src = "http://test.deitel.com/dicerolling.ogg"
type = "audio/ogg">
Browser does not support audio tag</audio>
<p><a href = "CrapsRules.html">Click here for a short video
explaining the basic Craps rules</a></p>
<!-- 여기서부터 본문, 위에 a 태그 클릭시 CrapsRules.html 로 이동 -->
<div id = "pointDiv">
<p class = "point">Point is:</p>
<img id = "pointDie1" src = "blank.png"
alt = "Die 1 of Point Value">
<!-- 처음에는 빈거(블랭크 이미지)로 넣어놓는다 -->
<img id = "pointDie2" src = "blank.png"
alt = "Die 2 of Point Value">
<!-- 마찬가지 처음에는 블랭크 이미지 (비어있는거), alt = 만약에 이미지가 안보일 경우에 -->
</div>
<div class = "rollDiv">
<img id = "rollDie1" src = "blank.png"
alt = "Die 1 of Roll Value">
<img id = "rollDie2" src = "blank.png"
alt = "Die 2 of Roll Value">
</div>
<form action = "#">
<input id = "play" type = "button" value = "Play">
<input id = "roll" type = "button" value = "Roll" disabled>
<!-- 초기에 디폴트로 사용하지 못하게 해놨음, disabled 하면 처음에 사용을 못함 -->
</form>
<p id = "messages" class = "red">Click Play to start the game</p>
</body>
</html>
