농구게임복습
<!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>Document</title>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
#wrap {
width: 70%;
margin: 50px auto;
background: coral;
padding: 2px;
}
.div-scoreboard.inner {
background: coral;
text-align: center;
color: #fff;
border: 2px solid #fff;
}
.div-short-left {
padding-top: 20px;
line-height: 40px;
}
#shorts-left {
background: #000;
width: 80px;
display: inline-block;
}
.div-score {
display: flex;
justify-content: center;
}
.div-score-list {
border: 1px solid #fff;
width: 30%;
margin: 20px;
padding: 40px;
}
.div-score-number {
background: #000;
line-height: 50px;
margin-top: 10px;
}
#text {
padding: 30px;
}
.div-control-panel {
background: tomato;
display: flex;
justify-content: center;
}
.div-panel {
padding: 30px;
margin: 30px;
width: 30%;
text-align: center;
color: #fff;
}
.div-panel div {
padding-bottom: 10px;
}
button {
padding: 10px 20px;
font-size: 14px;
}
</style>
</head>
<body>
<div id="wrap">
<!-- 점수판 -->
<div class="div-scoreboard inner">
<div class="div-short-left">
<span>남은 슛 횟수</span>
<span id="shorts-left">15</span>
</div>
<div class="div-score">
<div class="div-score-list">
<div class="div-score-name">컴퓨터</div>
<div class="div-score-number" id="computer-score">0</div>
</div>
<div class="div-score-list">
<div class="div-score-name">사람</div>
<div class="div-score-number" id="user-score">0</div>
</div>
</div>
<div id="text">컴퓨터부터 시작합니다.</div>
</div>
<!-- 조작부 -->
<div class="div-control-panel">
<div id="div-computer" class="div-panel">
<div>컴퓨터</div>
<button class="btn-computer">슛하기</button>
</div>
<div id="div-user" class="div-panel">
<div>사용자</div>
<button class="btn-user" id="btn-user2">2점슛</button>
<button class="btn-user" id="btn-user3">3점슛</button>
</div>
</div>
</div>
<script>
// //게임로직
// //1.컴퓨터 차례로 시작
// //2.사용자가 컴퓨터의 슛 버튼을 클릭한다.
// // 3.컴퓨터는 2점슛을 던질지 3점슛을 던질지 랜덤하게 결정
// // 4.슛이 성공하면 컴퓨터의 점수가 올라감
// // 5.사용자의 차례로 변경됨
// // 6.2점슛인지 3점슛인지 버튼을 클릭한다.
// // 7.슛이 성공하면 사용자의 점수를 올려준다.
// // 8.컴퓨터의 차례로 변경되며 슛횟수를 1씩 감소시킴
// // 9.남은 슛횟수가 0이 될때까지 1~8을 반복한다.
// // 10.양쪽의 점수를 비교해 승자를 결정한다.
// // * 2점슛의 성공률은 50% 3점슛의 성공률은 30%
let shortsLeftElem = document.querySelector('#shorts-left');
let comScoreElem = document.querySelector('#computer-score');
let userScoreElem = document.querySelector('#user-score');
let textElem = document.querySelector('#text');
document.querySelector('.btn-computer').addEventListener('click',onComputerShoot);
document.querySelector('#btn-user2').addEventListener('click',function(){
onUsershoot(2);
})
document.querySelector('#btn-user3').addEventListener('click',function(){
onUsershoot(3);
})
//컴퓨터 오브젝트
let computer = {
score: 0,
percent2: 0.5,
percent3: 0.3,
}
//사용자 오브젝트
let user = {
score: 0,
percent2: 0.5,
percent3: 0.3,
}
//게임 오브젝트
let game = {
isComputerTurn: true,
shortsleft: 15,
}
//글자 변경되는 함수
function showText(msg){
textElem.innerHTML = msg;
}
//점수판에 점수변경하는 함수
function updateScore(score, mal){
if(mal == 0){
computer.score += score;
comScoreElem.innerHTML = computer.score;
}else {
user.score += score;
userScoreElem.innerHTML = user.score;
}
}
//컴퓨터 버튼 안보이게 하는 함수
function disableComputer(flag){
let computerButton = document.querySelector('.btn-computer');
computerButton.disabled = flag;
}
//유저 버튼 안보이게 하는 함수
function disableUser(flag){
let userButton = document.querySelectorAll('.btn-user');
for(let i=0; i<userButton.length; i++){
userButton[i].disabled = flag;
}
}
//컴퓨터 슛실행
function onComputerShoot(){
if(!game.isComputerTurn) return;
//슛타입을 결정
let shootType = Math.random() < 0.5? 2 : 3;
//슛을 확률대로 성공시키기
if(Math.random() < computer['percent'+shootType]){
showText(`컴퓨터가 ${shootType}점슛을 성공시켰습니다.`);
updateScore(shootType, 0);
}else {
showText(`컴퓨터가 ${shootType}점슛을 실패했습니다.`);
}
game.isComputerTurn = false;
disableComputer(true);
disableUser(false);
}
//유저 슛실행
function onUsershoot(jum){
if(game.isComputerTurn) return;
if(Math.random() < computer['percent'+jum]){
showText(`당신이 ${jum}점슛을 성공시켰습니다.`);
updateScore(jum, 1);
}else {
showText(`당신이 ${jum}점슛을 실패했습니다.`);
}
game.isComputerTurn = true;
disableComputer(false);
disableUser(true);
gameTurn();
}
function gameTurn(){
game.shortsleft--;
shortsLeftElem.innerHTML = game.shortsleft;
if(game.shortsleft == 0){
if(user.score > computer.score) showText('사용자가 승리했습니다.');
else if(user.score < computer.score) showText('컴퓨터가 승리했습니다.');
else showText('비겼습니다.');
disableComputer(true);
}
}
</script>
</body>
</html>'노력이 좋아서' 카테고리의 다른 글
| <step36>'야구게임_팀과제' (0) | 2022.05.10 |
|---|---|
| <step36>'js_메소드, 동기 비동기' (0) | 2022.05.10 |
| <step34>'js_복습' (0) | 2022.05.06 |
| <step33>'울산관광 웹시안 및 구현' (1) | 2022.05.04 |
| <step33>'js_객체 응용' (0) | 2022.05.04 |