가위바위보 게임 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가위 바위 보 게임</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
    <div class="image_area">
        <img id="img" src="">
    </div>
    <div class="score">
        <div class="user">
            <div class="user_text">
                사용자 점수 :&nbsp;
            </div>
            <div class="user_score" id="user_score">
                0
            </div>
        </div>
        <div class="computer">
            <div class="computer_text">
                컴퓨터 점수 :&nbsp;
            </div>
            <div class="computer_score" id="computer_score">
                0
            </div>
        </div>
        
    </div>
    <div class="button_area">
      <input type="button" id="scissors" value="가위">
      <input type="button" id="rock" value="바위">
      <input type="button" id="paper" value="보">
    </div>
    <div class="reset">
        <input type="button" id="reset_btn" value="다시 시작하기">
    </div>
    <script src="main.js"></script>
</body>
</html>

body{
    font-family: 'Lato', sans-serif;
    
}

.image_area{
    display:flex;
    justify-content:center;
}
.score{
    text-align: center;
    font-size:30px;
    margin-top:30px;
    margin-bottom:30px;
}
.computer{
    margin-top:30px;
}
.button_area{
    display:flex;
    justify-content: center;
    
}
.reset_end{
    display:flex;
    justify-content: center;
}
#reset_btn{
    font-size:30px;
    font-weight:1000;
    border-radius:10px;
    padding:40px 40px;
    margin:10px;
    background-color: white;
    color:red;
}
#end_btn{
    font-size:30px;
    font-weight:1000;
    border-radius:10px;
    padding:40px 40px;
    margin:10px;
    background-color: white;
    color:red;
}

#scissors{
    font-size:30px;
    font-weight:bold;
    border-radius:10px;
    width:150px;
    height:100px;
    margin:10px;
    background-color: white;
    color:black;
}
#rock{
    font-size:30px;
    font-weight:bold;
    border-radius:10px;
    width:150px;
    height:100px;
    margin:10px;
    background-color: white;
    color:black;
}
#paper{
    font-size:30px;
    font-weight:bold;
    border-radius:10px;
    width:150px;
    height:100px;
    margin:10px;
    background-color: white;
    color:black;
}

.user{
    display:flex;
    justify-content:center;
}

.computer{
    display:flex;
    justify-content: center;
}

let img=document.getElementById("img");
let scissors=document.getElementById("scissors");
let rock=document.getElementById("rock");
let paper=document.getElementById("paper");
let score=document.getElementById("score");
let user_score=document.getElementById("user_score");
let computer_score=document.getElementById("computer_score");
let reset_btn = document.getElementById("reset_btn");
let end_btn = document.getElementById("end_btn");

let imgArray= new Array();
imgArray[0]="paper.png";
imgArray[1]="rock.png";
imgArray[2]="scissors.png";

let a;
let userscore=0;
let computerscore=0;

function imagetime()
{
    a = Math.floor(Math.random()*3);
    img.src=imgArray[a];
    
    //console.log(a);
}

setInterval(imagetime,150);

//가위를 클릭한 경우 
scissors.onclick = ()=>{
    clearInterval();
    //승리하는 경우(컴퓨터 : 보를 낸 경우 )
    if(a==0)
    {
        alert("승리");
        userscore++;
        user_score.textContent=userscore;
    }
    else if(a==2) //(컴퓨터 : 가위 낸 경우)
    {
        alert("비겼습니다.");
    }
    else//(컴퓨터 : 묵 낸 경우)
    {
        alert("패배");
        computerscore++;
        computer_score.textContent=computerscore;        
    }
    
}

//바위를 클릭한 경우
rock.onclick= () =>{
    clearInterval();
    if(a==0)// (컴퓨터 : 보를 낸 경우)
    {
        alert("패배");
        computerscore++;
        computer_score.textContent=computerscore;  
    }
    else if(a==2) //(컴퓨터 : 가위낸 경우)
    {
        alert("이겼습니다.");
        userscore++;
        user_score.textContent=userscore;
    }
    else //(컴퓨터 : 묵 낸경우)
    {
        alert("비겼습니다.");
    }
}
//보를 클릭한 경우
paper.onclick=()=>{
    clearInterval();
    if(a==0)// (컴퓨터 : 보를 낸 경우)
    {
        alert("비겼습니다");
    }
    else if(a==2) //(컴퓨터 : 가위낸 경우)
    {
        alert("패배.");
        computerscore++;
        computer_score.textContent=computerscore;  
    }
    else //(컴퓨터 : 묵 낸경우)
    {
        alert("이겼습니다.");
        userscore++;
        user_score.textContent=userscore;
    }
}

//다시 시작하기 클릭한 경우
reset_btn.onclick=()=>{
    let check=confirm("다시 시작하시겠습니까?");
    if(check==true)
    {
        location.reload();
    }
}

//게임종료 클릭한 경우
end_btn.onclick=()=>{
    let check=confirm("게임을 종료하시겠습니까?");
    if(check==true)
    {
        alert("게임 승리 : " + userscore  + " 게임 패배 : " + computerscore);
        location.reload();
    }
}

image.png