[실습][Javascript] 갬블링 게임 웹 페이지 만들기

출처 : 명품 웹 프로그래밍

 

3개의 숫자가 모두 같으면 성공하는 갬블링 게임 웹 페이지를 작성하라.
처음에는 3개의 숫자 모두 0으로 출력되지만,
각 숫자를 클릭하면 1~3 사이의 랜덤한 값으로 출력한다.
마지막 숫자를 클릭할 때 3개의 숫자를 검사하여 모두 같으면 성공한 것으로 한다.

 

---

 

우선, 다음과 같이 초기화면을 구성한다

 

초기화면

 

<main class="main_box">
  <h1>겜블링 게임</h1>
  <p>각 숫자를 클릭하면 1~3 사이의 난수로 바뀝니다.</p>
  <p>모두 같은 수가 나오면 승리합니다.</p>
  <p>차례대로 클릭해주세요.</p>
  <article id="numBox" class="game_box">
    <span id="num1" class="num" onclick="ChangeNum(this);">0</span>
    <span id="num2" class="num" onclick="ChangeNum(this);">0</span>
    <span id="num3" class="num" onclick="ChangeNum(this); InspectNReset();">0</span>
  </article>
</main>

 

@charset "UTF-8";

body {
  margin: 100px 0 0;
  padding: 0;
}

.main_box {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}
.game_box {
  width: 400px;
  margin: 50px auto;
  background-color: #ffcc99;
  font-size: 100px;
  font-weight: bold;
}
.num {
  border-bottom: 5px #000 solid;
}
.num:hover {
  cursor: pointer;
}

 

---

 

다음으로 javascript를 이용하여 동적으로 제어해보자

 

1. 숫자를 누르면, 숫자가 임의의 수로 바뀐다

obj.innerHTML = Math.floor(Math.random() * 3) + 1;

 

obj에 숫자 span 태그를 인수로 가져온다

후에 innerHTML 프로퍼티로 텍스트에 난수를 넣어준다

Math.random() : 0 이상 1 미만의 부동소숫점 의사 난수

Math.floor() : 주어진 수 이하의 가장 큰 정수

 

2. 숫자들이 일치하는지 검사한다

var num1 = document.getElementById('num1').innerHTML;
var num2 = document.getElementById('num2').innerHTML;
var num3 = document.getElementById('num3').innerHTML;
if(num1 === num2 & num2 === num3) {} else {}

 

이 역시 innerHTML 프로퍼티로 수를 가져오고, if문으로 확인한다

 

3. 마지막 숫자를 클릭하게 되면, 새로운 객체를 생성하여 결과를 출력한다(DOM 객체 동적 생성)

var resultDiv = document.createElement("div");

if(num1 === num2 & num2 === num3) {
  resultDiv.innerHTML = "SUCCESS !!<br>[Click to do again]"
  resultDiv.style.color = "blue";
}
else {
  resultDiv.innerHTML = "FAIL<br>[Click to do again]"
  resultDiv.style.color = "red";
}
resultDiv.style.fontSize = "30px";
resultDiv.style.marginTop = "30px";
resultDiv.style.cursor = "pointer";

document.getElementById('numBox').appendChild(resultDiv);

 

부모객체.createElement(생성하려는 객체) 메소드로 div 태그를 생성한다

resultDiv의 css style을 추가하고 innerHTML로 적절한 문구를 넣는다

getElementById() 메소드로 부모 객체를 지정한 뒤,

appendChild() 메소드로 새로운 자식을 추가한다 (DOM 트리에 삽입)

그러면 다음과 같이 결과창이 출력되는 것을 확인할 수 있다

 

결과창

 

4. 결과창을 클릭하면 자신 객체를 삭제하고 숫자를 리셋한다

resultDiv.addEventListener("click",
  function () { // "익명함수"
    var p = this.parentElement;
    p.removeChild(this);
    document.getElementById('num1').innerHTML = "0";
    document.getElementById('num2').innerHTML = "0";
    document.getElementById('num3').innerHTML = "0";
  });

 

addEventListener() 메소드를 이용하여 onclick 이벤트 리스너에 리셋 함수를 추가한다

parentElement 부모 객체 프로퍼티에 removeChild() 메소드로 객체를 삭제한 후에

innerHTML 프로퍼티를 "0"으로 초기화시킨다

 

---

 

다음은 갬블링 게임 동작 영상이다

 

JS DOM 객체 제어.mp4

0.30MB