728x90
반응형
[JavaScript] 자바스크립트로 가위 바위 보 게임 만들기 !!
아래 사진 다운 받아서 경로 지정 후 사용하시면 됩니다 :)
예제코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>library</title>
</head>
<style>
body {
text-align: center;
}
#computer {
width: 170px;
height: 280px;
background: url('/game.jpg') 0 0;
display: inline-block;
}
#init {
display: none;
}
</style>
<body>
<section>
<h1>가위바위보 게임</h1>
<div>알파고를 이겨라!</div><br><br>
<div id="computer"></div>
<div>
<button id="rock" class="btn">가위</button>
<button id="scissor" class="btn">바위</button>
<button id="paper" class="btn">보</button>
</div>
<br>
<div id="result"></div>
<br>
<h3>5승 0패 인증시 경품 증정이...!?</h3>
<p>무승부는 승패에 관여하지 않습니다.</p>
<button id="init">초기화</button>
</section>
</body>
</html>
<script>
let imageCoordinate = '0';
const dictionary = { // 딕셔너리 자료구조
바위: '0',
가위: '-200px',
보: '-390px'
};
function computerPick(imageCoordinate) {
return Object.entries(dictionary).find(function (v) {
return v[1] === imageCoordinate;
})[0];
}
let interval;
function intervalMaker() {
interval = setInterval(function () {
if (imageCoordinate === dictionary.바위) {
imageCoordinate = dictionary.가위
} else if (imageCoordinate === dictionary.가위) {
imageCoordinate = dictionary.보;
} else {
imageCoordinate = dictionary.바위;
}
document.querySelector("#computer").style.background =
'url(/game.jpg) ' + imageCoordinate + ' 0';
}, 100);
}
intervalMaker();
const score = {
가위: 1,
바위: 0,
보: -1
};
const result = document.getElementById('result');
const init = document.getElementById('init');
let playTime = 0;
let winNumber = 0;
let loseNumber = 0;
let drawNumber = 0;
document.querySelectorAll('.btn').forEach(function (btn) {
btn.addEventListener('click', function () {
clearInterval(interval);
intervalMaker();
playTime++;
init.style.display = 'inline-block';
const myPick = this.textContent;
const myScore = score[myPick];
const computerScore = score[computerPick(imageCoordinate)];
const scoreGap = myScore - computerScore;
if (scoreGap === 0) {
alert('비겼다 !');
drawNumber++;
} else if ([-1, 2].includes(scoreGap)) {
alert('이겼다 !');
winNumber++;
} else {
alert('졌다 !');
loseNumber++;
}
result.innerHTML = "플레이 횟수 = " + playTime + " 게임" + "<br>" + "<br>" +
winNumber + " 승 " + loseNumber + " 패 " + drawNumber + " 무";
});
});
function initRecord() {
playTime = 0;
winNumber = 0;
loseNumber = 0;
drawNumber = 0;
result.innerHTML = "플레이 횟수 = " + playTime + " 게임" + "<br>" + "<br>" +
winNumber + " 승 " + loseNumber + " 패 " + drawNumber + " 무";
}
init.addEventListener('click', initRecord);
</script>결과값
가위바위보 게임
알파고를 이겨라!
5승 0패 인증시 경품 증정이...!?
무승부는 승패에 관여하지 않습니다.