<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주사위게임</title>
</head>
<body>
<div class="dice">
<h1 id="title">주사위게임</h1>
<button onclick="game()">굴리기!</button> <!-- 버튼을 눌러서 game()함수 실행 -->
<div class="player">
<h3>Player</h3>
<img style="padding-right: 40px" src="img/dice.gif" alt="dice image">
</div>
<div class="player">
<h3>COM</h3>
<img src="img/dice.gif" alt="dice image">
</div>
</div>
<script type="text/javascript">
function game() {
var randomNumber1 = Math.floor(Math.random() * 6) + 1; // 플레이어가 사용할 랜덤넘버
var randomImage = "img/" + randomNumber1 + ".png"; // 플레이어 랜덤 이미지경로
document.querySelectorAll("img")[0]
.setAttribute("src", randomImage) // 가져온 이미지를 player 이미지 속성으로 set
var randomNumber2 = Math.floor(Math.random() * 6) + 1; // 컴퓨터가 사용할 랜덤넘버
var randomImage2 = "img/" + randomNumber2 + ".png"; // 컴퓨터 랜덤 이미지경로
document.querySelectorAll("img")[1]
.setAttribute("src",randomImage2) // 가져온 이미지를 COM 이미지 속성으로 set
if (randomNumber1 > randomNumber2) { // 플레이어가 이겼을 경우
document.getElementById('title').innerHTML = "Player Win!" // 타이틀을 Player Win으로 바꿈
} else if (randomNumber1 < randomNumber2) { // 컴퓨터가 이겼을 경우
document.getElementById('title').innerHTML = "COM Win!" // 타이틀을 COM win으로 바꿈
} else {
document.getElementById('title').innerHTML = "DRAW!" // 무승부
}
}
</script>
</body>
</html>CSS ( Script ) 설명
주사위의 눈은 1~6이기 때문에 random을 * 6+1로 지정,
floor() 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환한다는 특징이 있어 random을 할 때 사용
기존에 body에 있던 내용을 수정하기 위해 document.선택자를 사용
기본 body에 있던 img는 움짤인 gif로 실행됨
그 후 random으로 나온 값에 따라 랜덤값.png 파일로 대체시킨다. ( 주사위의 눈이 1이면 1.png )
상단에 Title 역시 player와 com 의 값에 따라 무,승,패로 대체된다.
수행결과
'개발자노트 > 웹' 카테고리의 다른 글
| HTML - jQuery 라이브러리 연결 방법 2가지 ( 직접연결 , CDN ) (0) | 2022.07.27 |
|---|---|
| HTML - 주사위게임 ( setTimeout 사용 ) (0) | 2022.07.27 |
| HTML 업다운게임 예제 ( HTML형변환 예제 ) (0) | 2022.07.25 |
| HTML Style + JS(JavaScript)를 통한 여러가지 색 박스만들기 예제 (0) | 2022.07.25 |
| HTML 배열과 관련 배열함수 (0) | 2022.07.25 |
