11. 자바스크립트(1)
페이지 정보
작성자 관리자 댓글 1건 조회 909회 작성일 21-09-04 16:32본문
11. 자바스크립트(1)
댓글목록
관리자님의 댓글
관리자 작성일
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>가위바위보 게임</title>
<script type="text/javascript">
<!--
function game_check(you) {
if(you == 1) {
//alert("you : 가위");
you_str = "가위";
} else if(you == 2) {
//alert("you : 바위");
you_str = "바위";
} else if(you == 3) {
//alert("you : 보");
you_str = "보";
}
you_div = document.getElementById("you_select");
you_div.innerHTML = you_str;
//이미지로 바꿈
var you_url = "./"+you+".PNG";
you_div.style.backgroundImage = "url('"+you_url+"')";
you_div.style.width = "200px";
you_div.style.height = "200px";
/*
Math.random() : 0~0.99999... 사이의 난수 발생
Math.floor() 함수는 소수점 1째자리 이후의 숫자를 버림하고, 정수를 리턴합니다.
*/
var com = Math.floor(Math.random() * 3) + 1; // 1~3 난수 발생
if(com == 1) {
//alert("com : 가위");
com_str = "가위";
} else if(com == 2) {
//alert("com : 바위");
com_str = "바위";
} else if(com == 3) {
//alert("com : 보");
com_str = "보";
}
com_div = document.getElementById("com_select");
//이미지로 바꿈
com_div.innerHTML = com_str;
var com_url = "./"+com+".PNG";
com_div.style.backgroundImage = "url('"+com_url+"')";
com_div.style.width = "200px";
com_div.style.height = "200px";
}
//-->
</script>
</head>
<body>
<form method="post" action="" name="aform" id="aform">
<table width=600>
<tr align=center>
<td width=40%><input type="button" value="가위" onclick="game_check(1);"></td>
<td width=20%><input type="button" value="바위" onclick="game_check(2);"></td>
<td width=40%><input type="button" value="보" onclick="game_check(3);"></td>
</tr>
</table>
<table width=600>
<tr align=center>
<td width=40% align=center>You</td>
<td width=20% align=center>vs</td>
<td width=40% align=center>Com</td>
</tr>
<tr align=center>
<td align=center><div id="you_select"></div></td>
<td align=center>vs</td>
<td align=center><div id="com_select"></div></td>
</tr>
</table>
<table width=600>
<tr align=center>
<td align=center><div id="result"></div></td>
</tr>
</table>
</form>
</body>
</html>