OSI 7계층
Port란
OSI 7계층이란
자바스크립트
<html>
<head>
<meta charset="utf-8" />
<title>가위바위보</title>
<style>
#computer {
width: 142px;
height: 200px;
}
</style>
</head>
<body>
<!-- 컴퓨터손 -->
<div id="computer"></div>
<!-- 버튼3개 -->
<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');
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}) 0 0`;
$computer.style.backgroundSize = 'auto 200px';
//객체 -> 그룹화 (WHY - 좌표라는 공통점이 있기 때문)
const rspX = {
scissors: '0',
rock: '-220px',
paper: '-440px',
};
let computerChoice = 'scissors';
const changeComputerHand = () => {
//background와 backgroundSize는 한세트로 사용해야함
if (computerChoice === 'scissors') { //가위
computerChoice = 'rock'
} else if (computerChoice === 'rock') {
computerChoice = 'paper'
} else if (computerChoice === 'paper') {
computerChoice = 'scissors'
}
//rspX.computerChoice (X)
/*
rspX.computerChoice는 rspX['computerChoice']입니다.
rspX[computerChoice]는 rspX['rock']이고 rspX.rock입니다.
*/
$computer.style.background = `url(${IMG_URL}) ${rspX[computerChoice]} 0`;
$computer.style.backgroundSize = 'auto 200px';
}
//setInterval은 지정된 시간마다함수를 실행
let intervalId = setInterval(changeComputerHand, 50);
// [버그] clickButton 연달아 5번 호출,1번인터벌,2번인터벌,3번,4번,5번(이것만 intervalId) 그 다음에 버튼을 클릭하면 5번만 취소
let clickable = true;
const clickButton = () => {
if (clickable) {
clearInterval(intervalId);
clickable = false;
// 1초뒤에 clickable이 true가 되기전까지 click을 계속해도 setInterval은 수행되지 않음
setTimeout(() => {
clickable = true;
intervalId = setInterval(changeComputerHand, 50);
}, 1000);
}
};
$rock.addEventListener('click', clickButton);
$scissors.addEventListener('click', clickButton);
$paper.addEventListener('click', clickButton);
</script>
</body>
</html>
초보 개발자의 성장기💻