<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가위바위보게임</title>
</head>
<body>
<!-- 가위바위보 게임
컴퓨터가 가위1, 바위2, 보3 중 하나를 정하면 나도 가위, 바위, 보 중 하나를 선택 게임 -->
<!-- 가위 바위 보는 버튼
승패에 대한 결과를 출력 총 5번 횟수
컴퓨터는 랜덤으로 가위, 바위, 보 중 하나를 선택
승률 : (이긴 횟수 / 전체 경기 수) * 100 -->
<button type="button" onclick="play(1);">
<img src="/image/가위.png" alt="가위">
</button>
<button type="button" onclick="play(2);">
<img src="/image/바위.png" alt="바위">
</button>
<button type="button" onclick="play(3);">
<img src="/image/보.png" alt="보">
</button>
<h3 id="result">
<!-- 결과출력라인 -->
</h3>
<script>
let playerState=0; //상태에 대한 숫자표현
let playerStateChar=''; //상태에 대한 문자표현
let comState = 0;
let comStateChar = '';
let result = 0; // 결과여부
let win = 0 ; //승 횟수
let lose = 0; // 패
let draw = 0; // 무승부
let r1=''; //승패결과 String
function play(num){
if(num ==1){
playerStateChar = "가위";
playerState = 1;
}else if(num == 2){
playerStateChar = "바위";
playerState = 2;
}else{
playerStateChar = "보";
playerState = 3;
}
//컴퓨터의 값 랜덤 생성
setComState();
// 승패여부
setDistinct();
//결과출력
showResult();
}
//컴퓨터의 값 생성
function setComState(){
//Math.floor(Math.random()*3)+1 : 1~3까지 랜덤 값 생성
comState = Math.floor(Math.random()*3)+1;
//comState = state; //생성한 랜덤값을 comState에 전송
switch(comState){
case 1: comStateChar = "가위"; break;
case 2: comStateChar = "바위"; break;
case 3: comStateChar = "보"; break;
}
// if(comState == 1){
// comStateChar = "가위";
// }else if(comState == 2){
// comStateChar = "바위";
// }else {
// comStateChar = "보";
// }
}
//결과 설정
//0 : 무승부 / 1 : 승 / -1 : 패
function setDistinct(){
if(playerState == comState){
result = 0;
}else{
//가위=1, 바위=2, 보=3
if(playerState == 1){ //가위
comState == 2 ? result = -1 : result = 1;
}else if(playerState == 2){ // 바위
comState == 3 ? result = -1 : result = 1;
}else if(playerState == 3){ //보
comState == 1 ? result = -1 : result = 1;
}
}
// if(playerState == comState){
// result = 0;
// }else{
// if(playerState == 1){ //가위
// if(comState == 2){ //바위
// result = -1;
// }else if(comState == 3){ //보
// result = 1;
// }
// }else if(playerState == 2){ // 바위
// if(comState == 1){ //가위
// result = 1;
// }else if(comState == 3){ //보
// result = -1;
// }
// }else{ //보
// if(comState == 1){ //가위
// result = -1;
// }else if(comState == 2){ //바위
// result= 1;
// }
// }
// }
}
//결과 출력 함수 "\n 줄바꿈"
function showResult(){
if(result == -1){ //패배
lose ++ ;
r1 = ("당신 : " + playerStateChar + "\n컴퓨터 : " + comStateChar + "\n졌습니다.\n");
r1 += ("현재 전적 \n 승 : " + win + "\n무 :" + draw + "\n패 : "+lose + "\n승률 :"+ getWinRate() + "%");
}else if( result ==1){
win++;
r1 = ("당신 : " + playerStateChar + "\n컴퓨터 : " + comStateChar + "\n이겼습니다.\n");
r1 += ("현재 전적 \n 승 : " + win + "\n무 :" + draw + "\n패 : "+lose + "\n승률 :"+ getWinRate() + "%");
}else{
draw++;
r1 = ("당신 : " + playerStateChar + "\n컴퓨터 : " + comStateChar + "\n비겼습니다.\n");
r1 += ("현재 전적 \n 승 : " + win + "\n무 :" + draw + "\n패 : "+lose + "\n승률 :"+ getWinRate() + "%");
}
document.getElementById('result').innerText = r1;
}
// 승률 계산
function getWinRate(){
//승률 : (이긴 횟수 / 전체 경기 수) * 100
let winRate = 0;
(win != 0) ? winRate = (win / (win+draw+lose))*100 : winRate = 0;
return Math.round(winRate);
}
</script>
</body>
</html>
'JS > JS 예시' 카테고리의 다른 글
| [JS] 데이터를 받아와서 원하는 모양으로 출력 (json) (0) | 2023.04.20 |
|---|---|
| [JS] 파일명 찾기 (0) | 2023.04.19 |
| [JS] lotto번호 생성 / 출력 (set, [ ] 이용) (0) | 2023.04.18 |
| [JS] class 예제 : 은행 (입금, 출금, 이체) (0) | 2023.04.18 |
| [JS] Map 예제 : 과목, 점수를 map에 저장하고 합계,평균 등 출력 (0) | 2023.04.18 |