html파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>가위바위보</title>
<style>
#computer {
width: 142px;
height: 200px;
}
</style>
<script src="./rsp.js" defer></script>
</head>
<body>
<div id="computer"></div>
<div>
<button id="scissors" class="btn">가위</button>
<button id="rock" class="btn">바위</button>
<button id="paper" class="btn">보</button>
</div>
<div id="score">0</div>
</body>
</html>
rsp.png파일
script파일
const $computer = document.querySelector("#computer");
const $score = document.querySelector("#score");
const $rock = document.querySelector("#rock");
const $scissors = document.querySelector("#scissors");
const $paper = document.querySelector("#paper");
const IMG_URL = "./rsp.png";
$computer.style.background = `url(${IMG_URL}) -464px 0`;
$computer.style.backgroundSize = "auto 200px";
const rspX = {
scissors: "0", // 가위
rock: "-220px", // 바위
paper: "-440px", // 보
};
let computerChoice = "scissors";
const changeComputerHand = () => {
if (computerChoice === "rock") {
// 바위면
computerChoice = "scissors";
} else if (computerChoice === "scissors") {
// 가위면
computerChoice = "paper";
} else if (computerChoice === "paper") {
// 보면
computerChoice = "rock";
}
$computer.style.background = `url(${IMG_URL}) ${rspX[computerChoice]} 0`;
$computer.style.backgroundSize = "auto 200px";
};
let intervalId = setInterval(changeComputerHand, 50);
const scoreTable = {
rock: 0,
scissors: 1,
paper: -1,
};
// clickButton 5번 호출, 인터벌 1번, 2번, 3번, 4번, 5번(얘만 intervalId)
// 그 다음에 버튼을 클릭하면 5번만 취소
let clickable = true;
let computer = 0;
let me = 0;
const clickButton = (event) => {
if (clickable) {
clearInterval(intervalId);
clickable = false;
// 점수 계산 및 화면 표시
const myChoice =
event.target.textContent === "바위"
? "rock"
: event.target.textContent === "가위"
? "scissors"
: "paper";
const myScore = scoreTable[myChoice];
const computerScore = scoreTable[computerChoice];
const diff = myScore - computerScore;
let message;
// 2, -1은 승리조건이고, -2, 1은 패배조건, 점수표 참고
if ([2, -1].includes(diff)) {
me += 1;
message = "승리";
} else if ([-2, 1].includes(diff)) {
computer += 1;
message = "패배";
} else {
message = "무승부";
}
if (me >= 3) {
$score.textContent = `나의 승리 ${me}:${computer}`;
} else if (computer >= 3) {
$score.textContent = `컴퓨터의 승리 ${me}:${computer}`;
} else {
$score.textContent = `${message} ${me}:${computer}`;
setTimeout(() => {
clickable = true;
intervalId = setInterval(changeComputerHand, 50);
}, 1000);
}
}
};
$rock.addEventListener("click", clickButton);
$scissors.addEventListener("click", clickButton);
$paper.addEventListener("click", clickButton);
Hint
▶ 나의 점수를 나타내는 변수 me를 선언하고,
▶ 컴퓨터의 점수를 나타내는 변수 computer를 별도로 선언한다.
▶ 지는 것은 기록할 필요가 없다. 내가 이기는 점수, 컴퓨터가 이기는 점수만을 기록하면 된다.
'렛츠기릿 자바스크립트' 카테고리의 다른 글
| 반응 속도 체크 (self) -forEach, sort, slice특이사항★★ (0) | 2023.01.17 |
|---|---|
| 반응 속도 체크 (0) | 2023.01.17 |
| 로또 등수 매기기 (self) (0) | 2023.01.16 |
| 로또 만들기 self (공에 색깔 넣기) (0) | 2023.01.15 |
| 로또 만들기 - splice( )★★+태그요소만들기+className추가 +sort() (0) | 2023.01.15 |