<!DOCTYPE html>
<html lang="en">
<head>
<title>겜블링 게임</title>
<style>
table {
border: 1px solid violet;
border-collapse: separate;
}
td {
width: 50px;
height: 50px;
padding: 0px;
font: italic 50px consolas, sans-serif;
color: blue;
text-align: center;
background: linen;
}
div#msg {
font: italic 18px consolas, sans-serif;
color: magenta;
margin-top: 10px;
}
</style>
<script>
numbers = [];
stop = [false, false, false];
function gen(place) {
if (stop[place] == true) return;
numbers[place] = Math.floor(Math.random() * 3);;
if (place == 0) {
select = document.getElementById("first");
}
else if (place == 1) {
select = document.getElementById("second");
}
else {
select = document.getElementById("third");
}
stop[place] = true;
select.innerHTML = numbers[place];
select.style.color = "green";
message = document.getElementById('msg');
if (numbers[0] == numbers[1] & numbers[0] == numbers[2]) {
message.innerHTML = "Succeess(click here to do again)"
}
else {
message.innerHTML = "fail(click here to do again)"
}
}
let aha = ["first","second","third"];
function reset() {
numbers = [0,0,0];
stop = [false,false,false];
for(let i = 0 ; i<aha.length; i++){
document.getElementById(aha[i]).innerHTML = 0;
document.getElementById(aha[i]).style.color = "blue";
}
message.innerHTML = "";
}
</script>
</head>
<h2>갬블링 게임</h2>
<p>각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다.
모두 같은 수가 나오면 승리합니다.
</p>
<hr>
<body>
<table>
<tr>
<td id="first" onclick="gen(0)">0</td>
<td id="second" onclick="gen(1)">0</td>
<td id="third" onclick="gen(2)">0</td>
</tr>
</table>
<div id="msg" onclick="reset()"></div>
</body>
</html>
직접 실행해보기(한 개만 눌러도 fail이 뜨는 버그 확인)
갬블링 게임
각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다.
| 0 | 0 | 0 |
결과화면
1.초기
2.성공했을 때
'Javascript' 카테고리의 다른 글
| 자바스크립트 별문자(*)출력하기 (0) | 2023.02.26 |
|---|---|
| JavaScript 샤갈의 눈 내리는 마을 만들기 (0) | 2023.02.25 |
| JavaScript<마우스 클릭 연습> (0) | 2023.02.22 |
| 템플릿 리터럴(Template literals) - 백틱(`)활용 (0) | 2023.01.28 |
| [2022]Local Storage 알아보기 (0) | 2022.12.02 |
