Day 48 : 마우스 클릭 연습

pancakemaker 2021. 12. 23. 14:50
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>마우스 클릭 연습</title>
	<style>
		#tbl {
			border: 1px solid darkblue;
			border-collapse: collapse;
		}

		td {
			width: 30px;
			height: 30px;
			border: 1px solid darkblue;
		}
		img {
			width: 30px;
			height: 30px;
			visibility: hidden;
		}
	</style>
	<script>
		document.write("<h3>마우스 클릭 연습</h3>");
		document.write("<hr>");
		document.write("<table id='tbl'>");
		for(var i=0; i<10; i++) {
			document.write("<tr>");
			for(var j=0; j<10; j++) {
				document.write("<td><img src=''></img></td>");
			}
			document.write("</tr>");
		}
		document.write("</table>");

		var ranNum = 0;
		function move() {
			var tblGame = document.getElementById("tbl");
			document.images[ranNum].src = "";
			var oldRanNum = ranNum;
			ranNum = Math.floor(Math.random()*100);
			document.images[ranNum].src = "media/puppy.png";
			document.images[oldRanNum].style.visibility = "hidden";
			document.images[ranNum].style.visibility = "visible";
			document.images[ranNum].onclick = move;
		}
	</script>
</head>
<body onload="move()">
	
</body>
</html>