๐ 5ํ 3์ ์น์ ๋ก ๋ง๋ค๊ธฐ
๊ฐ์๋ฐ์๋ณด ๊ฒ์์ ๋ฌดํํ ๋ฐ๋ณต๋๋ฏ๋ก ์ด๋ ์๊ฐ์ด ๋๋ฉด ๊ฒ์์ ๋ง๋ฌด๋ฆฌํ๊ณ ์ถ์ด์ง๋ค.
๊ฒ์์ 5ํ 3์ ์น์ ๋ก ๋ง๋ค์ด 3๋ฒ ๋จผ์ ์ด๊ธด ์ชฝ์ด ์ต์ข ์น๋ฆฌํ๋ ๊ฒ์ผ๋ก ๋ฐ๊ฟ๋ณด์.
๋จ, ๋ฌด์น๋ถ๊ฐ ๋๋ฉด ๋ฌดํจ ํ์ผ๋ก ์น๋ค.
๐ค ์ ์ ๊ธฐ๋กํ๋ ๋ณ์ ์ ์ธ
score ๋์ ๋ด ์ ์๋ฅผ ๊ธฐ๋กํ๋ me ์ ์ปดํจํฐ์ ์ ์๋ฅผ ๊ธฐ๋กํ๋ computer ๋ณ์๋ฅผ ์ ์ธํ๋ค.
<!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>
<style>
#computer {
width: 165px;
height: 200px;
}
</style>
</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>
<script>
const $computer = document.querySelector('#computer'); //html ์ computer id ์ ํ.
const $score = document.querySelector('#score'); //html ์ score id ์ ํ.
const $rock = document.querySelector('#rock'); //html ์ rock id ์ ํ.
const $scissors = document.querySelector('#scissors'); //html ์ scissors id ์ ํ.
const $paper = document.querySelector('#paper'); //html ์ paper id ์ ํ.
const img_url = './rsp.png'; //.์ ๋นผ๋ฉด c๋๋ผ์ด๋ธ์์ ์ถ๋ฐ (์ ๋๊ฒฝ๋ก) / .์ ๋ฃ์ผ๋ฉด ๋ด ์์น๋ก๋ถํฐ ํ์ผ์ ๊ฐ๋ฆฌํจ๋ค(์๋๊ฒฝ๋ก)
//์ด๋ฏธ์ง์ ๊ฐ๋ก,์ธ๋ก ์์น ์ง์ .
$computer.style.background = `url(${img_url}) 0 0`; //๊ฐ์
$computer.style.backgroundSize = `auto 200px`;
//x์ขํ๋ฅผ ๋ณ์์ ์ ์ฅ. (์ฌ๋ฌ๊ฐ์ ๊ฐ์ฒด๋ค์ ๊ทธ๋ฅฉํ)
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`;
}
//setInterval(changeComputerHand, 50); //50๋ฐ๋ฆฌ์ด ์ฃผ๊ธฐ๋ก ์์
๊ณ์ ์ํ.
let intervalid = setInterval(changeComputerHand,50);//50๋ฐ๋ฆฌ์ด ์ฃผ๊ธฐ๋ก ์์
๊ณ์ ์ํ.
//1๋ฒ์งธ ๋ฐฉ๋ฒ ( removeEventListener ๋ฉ์๋ ์ฌ์ฉ )
// const clickButton = () => {
// clearInterval(intervalid); //setInterval ํด๋ฆฌ์ด.
// //๊ทธ๋ฆผ์ด ๋ฉ์ถฐ ์๋ ๋์ ํ๊ทธ์ ๋ฑ๋กํ๋ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ์ ๊น ์ ๊ฑฐํ๋ค๊ฐ,
// $rock.removeEventListener('click',clickButton);
// $scissors.removeEventListener('click',clickButton);
// $paper.removeEventListener('click',clickButton);
// //์ ์ ๊ณ์ฐ ๋ฐ ํ๋ฉด ํ์
// setTimeout(() => {
// intervalid = setInterval(changeComputerHand,50);
// //1์ด ๋ค์ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ๋ค์ ์ฐ๊ฒฐํ๋ค.
// $rock.addEventListener('click',clickButton);
// $scissors.addEventListener('click',clickButton);
// $paper.addEventListener('click',clickButton);
// },1000);
// };
// $rock.addEventListener('click',clickButton);
// $scissors.addEventListener('click',clickButton);
// $paper.addEventListener('click',clickButton);
//2๋ฒ์งธ ๋ฐฉ๋ฒ ( ํจ์๊ฐ ์๋ฌด ์ผ๋ ํ์ง ์๊ฒ ๋ง๋ฌ )
let clickable = true; //๋ณ์๋ฅผ ๋ง๋ ๋ค.
//let score = 0; //์ ์ ๋ณ์๋ฅผ ๋ง๋ ๋ค.
let computer = 0; //์ปดํจํฐ ์ ์๋ฅผ ๊ธฐ๋กํ๋ ๋ณ์๋ฅผ ๋ง๋ ๋ค.
let me = 0; //๋ด ์ ์๋ฅผ ๊ธฐ๋กํ๋ ๋ณ์๋ฅผ ๋ง๋ ๋ค.
//scoreTable ๊ฐ์ฒด ์์ฑ.
//๋ฌด์น๋ถ : 0 / ์น๋ฆฌ : -1 or 2 / ํจ๋ฐฐ : 1 or -2
const scoreTable = {
rock : 0,
scissors : 1,
paper : -1,
};
const clickButton = () => {
if (clickable){
clearInterval(intervalid);
clickable = false; //๋ฒํผ์ ํด๋ฆญํ ๋์์๋ false๋ก ๋ง๋ ๋ค.
//๊ธ์ ์์๋ด๊ธฐ.
//const myChoice = event.target.id; ์ด๋ ๊ฒ ํ ์๋ ์๋ค.
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; //ํ๋ฉด์ ํ์ํ๋ ๋ฉ์์ง ๋ณ์.
//์ฒซ๋ฒ์งธ ๋ฐฉ๋ฒ : || ์ ์ฌ์ฉํ ์ฝ๋.
// if (diff == -1 || diff ==2){
// console.log('์น๋ฆฌ');
// } else if (diff == 1 || diff ==-2){
// console.log('ํจ๋ฐฐ');
// } else {
// console.log('๋ฌด์น๋ถ');
// }
//๋๋ฒ์งธ ๋ฐฉ๋ฒ : includes ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ์ฝ๋.
if ([2,-1].includes(diff)){
me += 1; //๋ด ์ ์์ 1 ๋ํ๊ธฐ.
//console.log('์น๋ฆฌ');
message = '์น๋ฆฌ'; //๋ฉ์์ง ๋ณ์์ ๋ด๊ธฐ.
} else if ([1,-2].includes(diff)){
computer += 1; //์ปดํจํฐ ์ ์์ 1 ๋ํ๊ธฐ.
//console.log('ํจ๋ฐฐ');
message = 'ํจ๋ฐฐ'; //๋ฉ์์ง ๋ณ์์ ๋ด๊ธฐ.
} else {
//console.log('๋ฌด์น๋ถ');
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; //1์ด ๋ค์ ์คํ๋ ๋ true๊ฐ ๋์ ๋ค์ if ๋ฌธ ๋ด๋ถ๊ฐ ์คํ๋๋ค.
intervalid = setInterval(changeComputerHand,50);
},1000);
}
}
};
$rock.addEventListener('click',clickButton);
$scissors.addEventListener('click',clickButton);
$paper.addEventListener('click',clickButton);
</script>
</body>
</html>
<!--์ฝ๋์ถ์ฒ (๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ-->
๋ด๊ฐ ์น๋ฆฌํ๋ฉด me ๋ณ์์ 1์ ๋ํ๊ณ , ์ปดํจํฐ๊ฐ ์น๋ฆฌํ๋ฉด computer ๋ณ์์ 1์ ๋ํ๋ค.
me ๋ computer ๊ฐ 3์ด ๋๋์ง๋ฅผ ํ์ธํด์ 3์ด ๋ ์ชฝ์ด ์๋ค๋ฉด ๊ฒฐ๊ณผ ๋ฉ์์ง๋ฅผ ๋์ฐ๊ณ , ์๋ค๋ฉด 1์ด ๋ค์ ๊ฐ์์ ์ฌ๊ฐํ๋ค.
๋๋ณด๊ธฐ
-(๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋๋ถ(TheBook): (์ฃผ)๋์์ถํ ๊ธธ๋ฒ์์ ์ ๊ณตํ๋ IT ๋์ ์ด๋ ์๋น์ค์ ๋๋ค.
thebook.io
-(๊ฐ์ข) ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ
https://www.inflearn.com/course/
[๋ฌด๋ฃ] [๋ฆฌ๋ด์ผ] ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ - ์ธํ๋ฐ | ๊ฐ์
๋ณธ ๊ฐ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ํ๋ก๊ทธ๋๋ฐ ์ฌ๊ณ ๋ ฅ์ ๊ธฐ๋ฅด๋ ์ฐ์ต์ ํฉ๋๋ค. ์น ๊ฒ์์ธ ๊ตฌ๊ตฌ๋จ์ ์์์ผ๋ก ๋๋ง์๊ธฐ, ์ซ์ ์ผ๊ตฌ, ๋ฐ์ ์๋ ํ ์คํธ, ํฑํํ , ๋ก๋ ์ถ์ฒจ๊ธฐ, ๊ฐ์๋ฐ์๋ณด, ์นด
www.inflearn.com
