728x90
생능출판사 명품 HTML5+CSS3+Javascript 웹 프로그래밍 수정판
p.377 Open Challenge 08 갬블링 게임 웹 페이지 만들기
3개의 숫자가 모두 같으면 성공하는 갬블링 게임 웹 페이지를 작성하라. 처음에는 3개의 숫자 모두 0으로 출력되지만, 각 숫자를 클릭하면 0~2 사이의 랜덤한 값으로 출력한다. 마지막 숫자를 클릭할 때 3개의 숫자를 검사하여 모두 같으면 성공한 것으로 한다.
코드
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>갬블링 게임</title>
<style>
table {
border : 1px solid violet;
border-collapse : collapse;
}
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>
var gameon = true;
var gameArray = [0, 0, 0];
function gen(e) {
if(gameon == false)
return;
var n = Math.floor(Math.random()*3);
var obj = e.target;
obj.innerHTML = n;
if(obj.id =="first")
gameArray[0]=n;
else if(obj.id == "second")
gameArray[1]=n;
else{
gameArray[2]=n;
var result = document.getElementById("msg");
if(gameArray[0]==gameArray[1]&&gameArray[0]==gameArray[2]){
result.innerHTML = "Success(click here to do again)";
}
else{
result.innerHTML = "fail(click here to do again)";
}
}
}
function reset() {
gameArray = [0, 0, 0];
document.getElementById("first").innerHTML=0;
document.getElementById("second").innerHTML=0;
document.getElementById("third").innerHTML=0;
document.getElementById("msg").innerHTML="";
gameon = true;
}
</script>
</head>
<body>
<h3>갬블링 게임</h3>
<p>각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다.
모두 같은 수가 나오면 승리합니다.</p>
<hr>
<table>
<tr>
<td id="first" onclick="gen(event)">0</td>
<td id="second" onclick="gen(event)">0</td>
<td id="third" onclick="gen(event)">0</td>
</tr>
</table>
<div id="msg" onclick="reset()"></div>
</body>
</html>
결과
728x90
'개발 > 책' 카테고리의 다른 글
| [안드로이드 프로그래밍] 10장 직접 풀어보기 10-1 (0) | 2021.11.19 |
|---|---|
| [안드로이드 프로그래밍] 9장 직접 풀어보기 9-2 (0) | 2021.11.11 |
| [안드로이드 프로그래밍] 9장 직접 풀어보기 9-1 (0) | 2021.11.11 |