openchallenge8.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 gameArray = [0, 0, 0]; // 3 개수 숫자 저장
var ok = "성공입니다";
var no = "실패입니다.";
function gen(obj, e) {

	var n = Math.floor(Math.random()*3); // 0~2 사이의 10진 난수

	obj.innerHTML = n;

	if(obj.id == "first") 
		gameArray[0] = n;
	else if(obj.id == "second")
		gameArray[1] = n;
	else {  // 각자 구현할 부분
          var get = document.getElementById("msg")            // id가 "msg"인 엘리먼트를 얻음

		gameArray[2] = n;// gameArray의 2번째 인덱스에 n을 할당함


        if ((gameArray[0] == gameArray[1])&& (gameArray[1] == gameArray[2])){
        	document.getElementById("msg").innerHTML = ok;
        }   
        else{
        	document.getElementById("msg").innerHTML = no;
        }             // gameArray의 0, 1, 2 번 인덱스의 값이 모두 같으면, id가 "msg"인 엘리먼트의 innerHTML에 성공메시지를 할당함
		// 그렇지 않으면 실패메시지를 할당함
            

	}
}

// 초기화 시키는 함수
function reset() {
	for(var i=0; i<gameArray.length; i++) 
		gameArray[i] = 0; // 3 개의 수 모두 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>
	<h1>20200903 김나령</h1>
<h3>갬블링 게임</h3>
각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다.
<hr>
<table>
<tr>
<td id="first" onclick="gen(this, event)">0</td>
<td id="second" onclick="gen(this, event)">0</td>
<td id="third" onclick="gen(this, event)">0</td>
</tr>
</table>
<div id="msg" onclick="reset()"></div>
</body>
</html>