<!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> <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>
'HOMEWORK' 카테고리의 다른 글
| DAY 33 - JS HOMEWORK - 덧셈문제 (2024.08.19) (0) | 2024.08.22 |
|---|---|
| DAY 35 - JS HOMEWORK - 2단~9단 / 연인날짜계산 / 로또 (0) | 2024.08.21 |
| DAY 30 - CSS HOMEWORK - 마켓컬리 페이지 만들기 (2024.08.13) (0) | 2024.08.14 |
| DAY 2 - HOMEWORK (0) | 2024.08.13 |
| DAY 3 - HOMEWORK - 숫자 순서대로 출력 / 가위바위보 (2024.07.05) (0) | 2024.08.13 |
