player 1, player 2가 서로 주사위 던져서
숫자 많은 쪽이 이겼다고 멘트 적어주기
index.js 파일을 만들고, html body 맨 마지막에 script를 붙여준다.
js에서 랜덤 넘버를 만들어 담는다.
코드가 잘 적었나 확인해보려면 콘솔에서 테스트 해볼 수 있다.
랜덤 숫자가 나왔을 때 이미지 파일명에서 선택되어야 한다.
그 때 그 때 변경해야하므로 html의 기본 틀을 건드리지 않고
js에서 코딩을 한다.
랜덤으로 숫자가 나오면 이미지 소스에 들어가서 랜덤 이미지가 선택된다
이제 image sourrce attributes를 변경해야 한다.
이미지태그 모두를 불러온 후 첫 번째 이미지 태그 소스 변경하기
attributes 셋팅하기
("변경하고 싶은 attributes 이름", 뭘로 바꿀지)
첫 번째 주사위 완성
두 번째 주사위
또는 줄여서
문구 넣기
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dicee</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">
</head>
<body></body>
<div class="container">
<h1>Refresh Me</h1>
<div class="dice">
<p>Player 1</p>
<img class="img1" src="">
</div>
<div class="dice">
<p>Player 2</p>
<img class="img2" src="">
</div>
<script src="index.js"></script>
</div>
</body>
</html>
CSS
.container {
width: 70%;
margin: auto;
text-align: center;
}
.dice {
text-align: center;
display: inline-block;
}
body {
background-color: #393E46;
}
h1 {
margin: 30px;
font-family: 'Lobster', cursive;
text-shadow: 5px 0 #232931;
font-size: 8rem;
color: #4ECCA3;
}
p {
font-size: 2rem;
color: #4ECCA3;
font-family: 'Indie Flower', cursive;
}
img {
width: 80%;
}
footer {
margin-top: 5%;
color: #EEEEEE;
text-align: center;
font-family: 'Indie Flower', cursive;
}
JavaScript
var randomNumber1 = Math.floor(Math.random() * 6 + 1);
var diceImgScr = "images/dice" + randomNumber1 + ".png";
var image1 = document.querySelectorAll("img")[0];
image1.setAttribute("src", diceImgScr);
var randomNumber2 = Math.floor(Math.random() * 6 + 1);
var diceImgScr2 = "images/dice" + randomNumber2 + ".png";
var image1 = document.querySelectorAll("img")[1].setAttribute("src", diceImgScr2);
if (randomNumber1 > randomNumber2) {
document.querySelector("h1").innerHTML = "player A wins!"
document.querySelector("h1").style.color = "red";
} else if (randomNumber2 > randomNumber1) {
document.querySelector("h1").innerHTML = "player B wins!";
} else {
document.querySelector("h1").innerHTML = "Draw!";
}
'Java Script > JS basic' 카테고리의 다른 글
| JS] .addEventListener( ) (0) | 2021.08.25 |
|---|---|
| JS] 드럼 킷 만들기 (0) | 2021.08.25 |
| JS] 웹사이트에 자바스크립트 추가하는 법 (0) | 2021.08.17 |
| JS] 피보나치 퀴즈 (0) | 2021.08.16 |
| JS] 99 bottles of beer 퀴즈 (0) | 2021.08.15 |
댓글