김숭늉 마음대로

DOM을 이용하여 2인 랜덤 주사위 페이지 만들기 + 누가 승자인지도 문구 함께 노출해보기 본문

IT/JavaScript

DOM을 이용하여 2인 랜덤 주사위 페이지 만들기 + 누가 승자인지도 문구 함께 노출해보기

김숭늉이 2023. 8. 28. 11:43
728x90

 

 

DOM과 자바스크립트를 활용하여 2인 랜덤 주사위 굴리는 페이지 만들어 보겠습니다. 

플레이어1과 플레이어2가 각각 랜덤주사위를 굴려 누가 승자인지 페이지에 노출시켜주면 되는 과제 입니다. 

 

랜덤 주사위 굴리기 첫 시작 페이지

 

위 페이지는 랜덤주사위를 굴리기 첫 시작 페이지입니다. 상단에 <h1>으로 문구가 작성되어있고, Player 1과 Player 2의 주사위가 각각 h1문구 하단에 위치해 있습니다. 지금 위 상태는 js파일과 아래의 주사위 이미지 파일이 html 문서에 연결되어있지 않은 상태입니다. 

(아무런 액션을 취하지 않은 상태의 페이지에서는 각 주사위는 6이 고정으로 보이도록 합니다.)

 

비주얼 스튜디오 코드(VScode) - 랜덤 주사위 굴리기 프로젝트

 

 

먼저, dicee.html에 미리 만들어둔 자바스크립트 문서(index.js)와 이미지소스를 html 문서에 연결 시키는 간단한 작업부터 시작합니다. 

<body>
    <div class="container">
      <h1>Refresh Me</h1>
      
      <div class="dice">
        <p>Player 1</p>
        <img class="img1" src="images/dice6.png"> // 왼쪽주사위, dice6(주사위 6개)을 기본 이미지로 고정 
      </div>

      <div class="dice">
        <p>Player 2</p>
        <img class="img2" src="images/dice6.png"> // 오른쪽주사위, dice6(주사위 6개)을 기본 이미지로 고정
      </div>

    </div>

    <script src="index.js" charset="utf-8"></script> // index.js 파일 링크 

      </body>

 

그다음은 이제 index.js 파일로 넘어가서 자바스크립상에 코드를 작성해 보겠습니다. 

아래 순서로 코드가 순차적으로 작성이 됩니다!

 

1) 주사위 1과 2에 대한 변수 및  setAttribute() 통해 이미지파일 숫자 변경코드 작성
2) if문을 통해 승자, draw 표시 해주기
3) 테스트

 

1. 주사위 1과 주사위 2에 대한 변수 생성하기 setAttribute() 통해 이미지파일 숫자 변경코드 작성

var randomNumber1 = Math.floor(Math.random() * 6) + 1; // (0-5.999) + 1 = 1~6
var randomImageSource = "images/dice" + randomNumber1 + ".png"; // images/dice1.png - images/dice6.png 
var image1 = document.querySelectorAll("img")[0]; // 첫번째 주사위

image1.setAttribute("src", randomImageSource);


var randomNumber2 = Math.floor(Math.random() * 6) + 1; // (0-5.999) + 1 = 1~6
var randomImageSource = "images/dice" + randomNumber2 + ".png";  // images/dice1.png - images/dice6.png 
var image2 = document.querySelectorAll("img")[1]; // 두번째 주사위

image2.setAttribute("src", randomImageSource);

 

 

2.  주사위 1과 주사위 2에 대한 변수 생성하기 setAttribute() 통해 이미지파일 숫자 변경코드 작성

//If player 1 wins (플레이어 1이 이긴경우)
if (randomNumber1 > randomNumber2){
  document.querySelector("h1").innerHTML = "Player1 wins!";
}
//If player 2 wins (플레이어 2가 이긴경우)
else if (randomNumber1 < randomNumber2){
  document.querySelector("h1").innerHTML = "Player2 wins!";
} 
//If player 2 wins (비긴경우)
else {
  document.querySelector("h1").innerHTML = "Draw!";
}

 

 

3. 테스트결과

새로고침을 통해서 페이지를 계속해서 로딩하면, 주사위가 랜덤으로 표시되고, h1의 문구도 주사위의 결과에 맞게 정상적으로 반영되어있는것을 확인 하실수 있습니다. ^^

 

 

 

 

⬇️ 코드 한번에 보기

더보기
var randomNumber1 = Math.floor(Math.random() * 6) + 1; // (0-5.999) + 1 = 1~6
var randomImageSource = "images/dice" + randomNumber1 + ".png"; // images/dice1.png - images/dice6.png
var image1 = document.querySelectorAll("img")[0]; // 첫번째 주사위

image1.setAttribute("src", randomImageSource);


var randomNumber2 = Math.floor(Math.random() * 6) + 1; // (0-5.999) + 1 = 1~6
var randomImageSource = "images/dice" + randomNumber2 + ".png";  // images/dice1.png - images/dice6.png
var image2 = document.querySelectorAll("img")[1]; // 두번째 주사위

image2.setAttribute("src", randomImageSource);

//If player 1 wins
if (randomNumber1 > randomNumber2){
  document.querySelector("h1").innerHTML = "Player1 wins!";
}
//If player 2 wins
else if (randomNumber1 < randomNumber2){
  document.querySelector("h1").innerHTML = "Player2 wins!";
}
else {
  document.querySelector("h1").innerHTML = "Draw!";
}

 

 

읽어주셔서 감사합니다 :)

728x90
반응형

'IT > JavaScript' 카테고리의 다른 글

DOM, 자바스크립트 - 버튼 클릭시 alert 생성 + for문 적용하여 alert 복수 적용  (0) 2023.08.29
자바스크립트 이벤트리스너(eventListener)의 기본구조는 어떻게 될까?  (0) 2023.08.28
[자바스크립트] DOM으로 a 태그의 웹 주소 수정하기  (0) 2023.08.27
[자바스크립트] DOM의 get 속성 // getElementById(), getElementByClassName(), getElementByTagName()  (0) 2023.08.27
[자바스크립트] DOM이란..? DOM의 속성과 DOM의 개체  (0) 2023.08.27
'IT/JavaScript' Related Articles more