[자바스크립트] 가위바위보 게임
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div id="top"></div>
<div id="left"></div>
<div id="mid">
<div id="mid_top">
<h1>가위 바위 보 게임</h1>
</div>
<div id="mid_mid">
<div id="mid_mid_left">
<h2>유저</h2>
<input type="text" placeholder="1=가위,2=바위,3=보자기" id="user">
<br>
<br>
<button onclick="image()">이미지</button>
<br>
<img id="img" src="2.jpg">
</div>
<div id="mid_mid_right">
<h2>컴퓨터</h2>
</div>
</div>
<div id="mid_bot">
<input type="button" id ="btn_answer"value="결과보기">
</div>
</div>
<div id="bot"></div>
</body>
</html>
index.css
#top{
width : 800px;
height : 100px;
background-color: red;
}
#left{
width : 100px;
height : 700px;
float : left;
background-color: yellow;
}
#mid{
width : 700px;
height : 700px;
float : left;
background-color: orange;
}
#mid_top{
width : 700px;
height : 200px;
background-color: aqua;
text-align: center;
line-height: 150px;
float : left
}
#mid_mid{
width : 700px;
height : 400px;
background-color: bisque;
float : left
}
#mid_mid_left{
width : 350px;
height : 400px;
background-color: darkgreen;
float : left;
text-align: center;
}
#mid_mid_right{
width : 350px;
height : 400px;
background-color:violet;
float : left;
text-align: center;
}
#mid_bot{
width : 700px;
height : 100px;
background-color: brown;
clear : left;
text-align: center;
}
#bot{
width : 800px;
height : 100px;
clear : left;
background-color: gray;
}
img{
width : 100px;
height : 100px;
}
index.js
var btnAnswer;
var user;
var computer;
var userValue;
var computerValue;
var img;
//1 = 가위 , 2 = 바위 , 3 = 보자기
computer = Math.floor(Math.random() * 3) + 1;
//숫자에 관련된 가위 바위 보 값 맞춰주기
// if (computer == "1") {
// computer = "scissors";
// } else if (computer == "2") {
// computer = "rock";
// } else {
// computer = "paper";
// }
//결과 창
function btnClick() {
userValue = parseInt(user.value);
//1 = 가위 , 2 = 바위 , 3 = 보자기
if (computer == 1) {
if (userValue == 1) {
alert("darw");
}
if (userValue == 2) {
alert("userWin");
}
if (userValue == 3) {
alert("computerWin");
}
}
//1 = 가위 , 2 = 바위 , 3 = 보자기
if (computer == 2) {
if (userValue == 1) {
alert("userWin");
}
if (userValue == 2) {
alert("draw");
}
if (userValue == 3) {
alert("userWin");
}
}
//1 = 가위 , 2 = 바위 , 3 = 보자기
if (computer == 3) {
if (userValue == 1) {
alert("computerWin");
}
if (userValue == 2) {
alert("userWin");
}
if (userValue == 3) {
alert("draw");
}
}
}
function image() {
document.getElementById("img").src = "1.jpg";
}
function run() {
img.src = "3.jpg";
}
function runOut() {
img.src = "2.jpg";
}
//1 = 가위 , 2 = 바위 , 3 = 보자기
// if (userValue == computerValue) {
// alert("Draw");
// //user scissors , computer rock
// } else if (userValue == 1 && computerValue == 2) {
// alert("computer Win");
// //user scissors, computer paper
// } else if (userValue == 1 && computerValue == 3) {
// alert("user Win");
// //user rock , computer scissors
// } else if (userValue == 2 && computerValue == 1) {
// alert("user Win");
// //user rock , computer paper
// } else if (userValue == 2 && computerValue == 3) {
// alert("computer Win");
// //user paper , computer scissors
// } else if (userValue == 3 && computerValue == 1) {
// alert("computer Win");
// //user paper , computer rock
// } else if (userValue == 3 && computerValue == 2) {
// alert("user Win");
// } else {
// alert("what the error??" + typeof(userValue) + typeof(computerValue));
// }
window.onload = function () {
btnAnswer = document.getElementById("btn_answer");
btnAnswer.onclick = btnClick;
user = document.getElementById("user");
img = document.getElementById("img");
img.addEventListener("mouseover", run, false);
img.addEventListener("mouseout", runOut, false);
}