Web -front/HTML,CSS,JS

예제 만들면서 배우기 3. 1~9까지 숫자 빠르게 맞추기

초보개발자뀨 2021. 3. 13. 09:07

예제로 택한 이유.

  •  예제로 할만할 주제를 찾던 와중 구글에서 숫자맞추기 게임을 구현한 블로그를 우연히 보게되었고  이번에는 블로그를 참조하지 않고 생각한 대로 만들어보게되었다.

 

구현한 기능

  •  게임 시작버튼을 누르면 숫자들이 랜덤으로 배열되며 시작초가 흐른다. 
  • 1~9까지 다 맞추면 한번 더 시간을 재고 걸린 시간과 누른 횟수를 카운터 한다.

구현하고 싶은 기능

  •  좀 더 공부해서 서버를 배우게 되면 점수와 카운터를 익명으로 대입해 순위표도 만들어 보고 싶다.

 

Main.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="Main.css">
    <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>1 to 10 게임</title>
</head>

   
<body>
   
    
        <div class="context">
            <h1>1부터 10까지를 잽싸게 빠르게 눌러버리깅!</h1>

            <div class="number_table">
                    
               <div id="box1" class="box" onclick="check(this.id)">1</div>
               <div id="box2"class="box" onclick="check(this.id)"> 2</div>
               <div id="box3"class="box" onclick="check(this.id)"> 3</div>                 

            </div>        
            
            <div class="number_table">
            
                <div id="box4"class="box" onclick="check(this.id)">4</div>
                <div id="box5"class="box" onclick="check(this.id)">5</div>
                <div id="box6"class="box" onclick="check(this.id)">6</div>
           
            </div>        
                   
            <div class="number_table">
          
                <div id="box7"class="box" onclick="check(this.id)" >7</div>
                <div id="box8"class="box" onclick="check(this.id)" >8</div>
                <div id="box9"class="box" onclick="check(this.id)" >9</div>

               
            </div>    
            <button id = "btn" onclick="start()">시작</button>
            <button id = "btn" onclick="reset()">재시작</button>
         </div>   
            
  
    <script src="Main.js"></script>
</body>
</html>

 

 

Main.js

 

let random_number = [];
let count =1;
let cnt =0;
let click_cnt=0;
let time=0;
let start_time=0;
let end_time=0;
let can =0;




// 9개의 칸에 1~9까지의 랜덤 숫자 보여주기

function insert_number(){

    while(!(cnt ==9)){

        let a = Math.floor((Math.random()*9)+1);
        if(!random_number.includes(a)){
            random_number[cnt] =a;
            cnt++;
        }
    }
    for(let i=0 ; i<9 ;i++){   
        document.getElementById("box"+(i+1)).textContent = random_number[i];
    }   

}

// 게임 종료 후 재시작 버튼 눌렀을 시 

function reset(){
    console.log("재시작 되었습니다");
    random_number = [];
    count =1;
    cnt =0;
    click_cnt=0;
    time=0;
    start_time =0;
    end_time =0;
    can ==2;
    console.log(click_cnt);
    insert_number();
    start();
}
    

// 숫자가 담긴 뷰를 눌렀을 시

function check(id){
    if(can ==0){
        alert("시작 버튼을 눌러주세요");
    }
    if(can ==2){
        alert("재시작 버튼을 눌러주세요");
    }
    if(can ==1){ 
        console.log(click_cnt);
        click_cnt++;
        console.log(id);
        const select = document.getElementById(id);
        console.log(select.textContent);

        if(select.textContent==count){
            select.textContent="";
            count++;
        }
    
    if(count==10)  end();
    }
    

 }

 // 게임 시작 버튼 눌렀을 시

 function start(){
    if(can ==2){
        alert("재시작 버튼을 눌러주세요");
    }
    else{
    can = 1;
    alert("확인 누르시면 게임이 시작됩니다");
    insert_number();
    start_time = new Date();
    }
}
function end(){
    end_time  =new Date();
    time = end_time-start_time; 
    alert("성공까지 "+time/1000+"초 걸리셨고 "+click_cnt+" 번 만에 성공하셨습니다.");
    can = 2;
    
    

}

 

Main.css

 

.context{
    background-color: rgb(149, 150, 148);
    flex-direction: column;
    display: flex;
    width: 800px;
    height: 900px;
    margin: auto;
    border : 3px solid rgb(125, 182, 132);
    border-radius: 30px;
}


h1{
    text-align: center;
    margin-bottom: 100px;
}
.number_table{
    
    width: 800px;
    height: 200px;
    display: flex;
    justify-items: center;
    justify-content: center;
   
}


.box{
  
    text-align:center; 
    vertical-align:middle;
    border-radius: 30px;
    margin-left: 10px;
    font-size: 40px;
    color: white;
    width: 150px;
    height: 150px;
    padding: 10px;
    background-color: black;
}

#btn{
    border-radius: 30px;
    height: 50px;
    margin-top: auto;
}

@media(min-width: 320px) and (max-width: 480px){

    .context{
        height: 100%;
    }


}