<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가위바위보 게임</title>
<link rel="stylesheet" type="text/css" href="./css/game.css?v=2">
</head>
<body>
<p>PC</p>
<div class="box" id="pcview">?</div>
<p>USER</p>
<ul class="box2">
<li onclick="usergame(1)"><img src="../game/user1.png"></li>
<li onclick="usergame(2)"><img src="../game/user2.png"></li>
<li onclick="usergame(3)"><img src="../game/user3.png"></li>
</ul>
</body>
<script src="./js/game.js?v=3"></script>
</html>
@charset "UTF-8";
body {
margin: 0;
padding: 0;
}
.box {
margin: auto;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
line-height: 100px;
width: 100px;
overflow: hidden;
}
.box>img {
margin-left: -8px;
}
.box2 {
list-style: none;
margin: 0 auto;
padding: 0;
width: 300px;
height: 100px;
}
.box2>li {
width: 100px;
height: 100px;
border: 1px solid red;
box-sizing: border-box;
float: left;
cursor: pointer;
overflow: hidden; /* li아웃라인보다 이미지가 클 경우 해당 이미지의 남은 여백을 모두 안보이도록 숨김 */
}
.box2>li>img {
margin-left: -4px;
}
/*
1 : 주먹
2 : 보
3 : 가위
*/
var userno;
function usergame(n) { //사용자가 클릭한 값을 받는 함수
this.userno = n;
pcgame();
}
function pcgame() {
var pc = Math.ceil(Math.random() * 3);
//console.log(pc);
//pc가 선택한 값을 이미지로 변환하여 HTML에 출력
var pcview = document.getElementById("pcview");
pcview.innerHTML = "<img src='../game/pc" + pc + ".png'>";
gameresult(pc);
}
function gameresult(pcno) {
if (pcno == this.userno) {
console.log("비김");
} else if (pcno == 1 && this.userno == 2 || pcno == 2 && this.userno == 3 || pcno == 3 && this.userno == 1) {
console.log("사용자 승리");
} else {
console.log("사용자 패배");
}
}
