HOMEWORK

DAY 34 - JS HOMEWORK - 가위바위보 게임 (2024.08.20)

summ.n 2024. 8. 20. 18:18 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
html {
	text-align: center;
	background-color: #FFEEFF;
	color: #616161;
}

div button {
	border: 1px solid black;
	background-color: transparent;
}

div img {
	width: 200px;
	height: 200px;
}

h3 span#com {
	margin: 0 20px;
	color: #3068FF;
}

h3 span#me {
	margin: 0 20px;
	color: #3068FF;
}

h3 span#result {
	color: #FF0A70;
}
</style>
</head>
<body>
<h1>가위바위보 게임</h1>
<h3 id="money"></h3>

<script type="text/javascript">
var money = parseInt(prompt("돈 입력 : "));
document.getElementById("money").innerText = "현재잔액 : " + money;
</script>

 <div>
 	<button onclick="button(1)"><img src="../image/가위.png" alt="가위 이미지" ></button>
 	<button onclick="button(2)"><img src="../image/바위.png" alt="바위 이미지"></button>
 	<button onclick="button(3)"><img src="../image/보.png" alt="보 이미지"></button>
 </div>
 <h3><span id="com"></span>&nbsp;<span id="me"></span><br><br><span id="result"></span></h3>
 <h1 id="end"></h1>
 <script type="text/javascript">
		function button(num) {
			var com = parseInt(Math.random() * 3) + 1;

			var player;
			if (num == 1) {
				player = "나 : 가위";
			} else if (num == 2) {
				player = "나 : 바위";
			} else if (num == 3) {
				player = "나 : 보";
			}
			document.getElementById("me").innerText = player;

			var computer;
			if (com == 1) {
				computer = "컴퓨터 : 가위";
			} else if (com == 2) {
				computer = "컴퓨터 : 바위";
			} else {
				computer = "컴퓨터 : 보";
			}
			document.getElementById("com").innerText = computer;

			var result;
			if (num == com){
				result = "비겼다";
				money -= 100;
			}
			else if ((num == 1 && com == 3) || (num == 2 && com == 1)
					|| (num == 3 && com == 2)) {
				result = "이겼다";
				money += 100;
			} else{
				result = "졌다";
				money -= 100;
			}
			document.getElementById("result").innerText = result;
			document.getElementById("money").innerText = "현재잔액 : " + money;
			
			if(money <= 0){
				document.write("<h3>게임이 종료되었습니다.</h3>");
			}
		}
	</script>
</body>
</html>