🎨 math game

https://kirin059.github.io/my_website/game.html

🎅 html

 <form name="math">
    <table>
      <!-- caption으로 제목달기 (<th> 사용하지 않음) -->
       <caption>🔶🔹 Math Game 🔸🔷</caption>
       <tr>
         <td colspan="2">   <!-- colspan을 가로 2칸을 합침(가로 병합) -->
         <input type="button" value="New Game" onClick="location.reload();" style="width:100%">
         </td>
       </tr>
-
       <tr>
         <td colspan="2">
         <input type="button" value="Game Start" size="5" onClick="startgame()" style="width:100%">
         </td>
       </tr>
     <!--text type을 통해 타이머 설정(js연결)-->
       <tr>
         <td> <strong>rest of time</strong> </td>
         <td>
         <input type="text" name="timer" size="10">
         </td>
       </tr>
     <!--문제 제시 (랜덤) -->
       <tr>
         <td><strong>Question</strong></td>
         <td>
         <input type="text" name="firstnum" size="7">
         <input type="text" name="operator" size="2">  <!--연산자(+,-,x,/) -->
         <input type="text" name="secondnum" size="7">
         </td>
       </tr>
      <!-- 답 제출 -->
       <tr>
         <td><strong>Answer</strong></td>
         <td>
         <input type="text" name="answer" size="7">
         </td>
       </tr>
       <tr class="answer">
         <td colspan="2" style="text-align:center">
         <input type="button" value="Submit and Check Answer" onClick="answerit();">
         </td>
       </tr>
      <!--점수 표기 -->
       <tr>
         <td><strong>Score</strong></td>
         <td>
         <input type="text" name="points" size="7" value="0">
         </td>
       </tr>
    </table>
</form>

🎅 css

table{
    border:0; 
    width:500px; 
    height:300px; 
    margin:auto;
    font-weight: var( --weight-bold);
    font-size: 20px;
    color:var(--point-color);
    padding-top:30px;
}
caption{
    font-size:35px;
    text-align:center;
    color:whites;
    margin-top:30px;
    padding:5px;
    background-color:  #054d65;
    border-radius: 30px;
}
td {
    text-align:center;
    padding: 8px;
}
.answer input{
    width:100%; 
    background-color: aquamarine;
    font-weight: var( --weight-bold);
}

🎅 javascript

"use strict";

/* number game */
var time=5; // 게임 시간 50초
var started=0;  

/* timer */
function CountDown() {
    if(time>0) {
	document.math.timer.value=time;   
      //form submit 할 때 서버에서 name명으로 값을 가져올 수 있다.(id처럼 기능) (name=timer),
      //input으로 값을 전달(submit)할때 name은 전달 받는 페이지 입장에서 값(value)을 꺼낼 수 있는 키이다. 
      //따라서 document.math.timer.value=time;은 time(50으로 설정, time-1로 설정)의 값(value)을, 본문 math안의 name이 timer인 곳으로 전달
	time=time-1;    
      var gameTimer=setTimeout("CountDown()", 1000)
    }
    else if (time==0) {   
	document.math.timer.value="0";
	alert('Time Over'); // 시간이 끝나고(time=0) 난 후 나타나는 메세지
	document.math.firstnum.value="";   //time이 0이되면 모든 값을 초기화, 빈값("")으로 설정
	document.math.operator.value="";
	document.math.secondnum.value="";
	document.math.answer.value="";
	}
}

/* game start */
function startgame() {
    if (started!=0) {    //var started=0;으로 설정하였기 때문에,  0이아닌게(started!=0) true면 alert가 뜬다
        alert('이미 게임을 하셨습니다.\n\n새게임 버튼을 누르시고 다시 해주세요.');
    }
    else {
        started=1;     //??이걸 지우면 if문 내의 alert가 뜨지 않는다. 이것의 의미는 무엇일까
        CountDown();
        getProb();  //get problem (문제를 얻다) 의미의 함수
    }
}

/* question */
function randnum(min,max) {
    var num=Math.round(Math.random()*(max-min))+min;
    return num;
}
    var choose, rightanswer

function getProb() {
    choose=randnum(1,4);  //
    if (choose=="1") {	
        document.math.operator.value="+";
            var choose1=randnum(0,50);
            var choose2=randnum(0,50);
                document.math.firstnum.value=choose1;
                document.math.secondnum.value=choose2;
            rightanswer=choose1 + choose2;
    }
    if (choose=="2") {
        document.math.operator.value="-";
        var choose2=randnum(0,50);
        var choose1=randnum(choose2,50);   //사용자가 적는 정답이 정수만 나와야 하니깐
            document.math.firstnum.value=choose1;
            document.math.secondnum.value=choose2;
        rightanswer=choose1 - choose2;
    }
    if (choose=="3") {
        document.math.operator.value="x";
        var choose1=randnum(0,10);
        var choose2=randnum(0,10);
            document.math.firstnum.value=choose1;
            document.math.secondnum.value=choose2;
        rightanswer=choose1 * choose2;
    }
    if (choose=="4"){
        document.math.operator.value="/";
        var choose2=randnum(1,10);
        var choose1=choose2 * randnum(0,10);   //사용자가 적는 정답이 정수만 나와야 하니깐
            document.math.firstnum.value=choose1;
            document.math.secondnum.value=choose2;
        rightanswer=choose1 / choose2;
    }
}

/* answer submit */    
function answerit() {
    if (started==0) {    //전역변수 var started=0; 이기때문에 true
        // 시작하지 않고 바로 답버튼을 눌렀을때
        alert("Click the 'Game Start' button");
    }
    else {   //Game Start버튼 누른 후 answer를 제출하는 경우
        if (time==0) {   //타임오버된 케이스
            alert('Time Over');
        }
        else {    //사용자가 submit하는 케이스
            var theiranswer=eval(document.math.answer.value); //eval()함수는 인자로서 문자열을 받아 숫자로 변환하여 결과값을 돌려준다
            var theirpoints=eval(document.math.points.value);
            if (theiranswer==null) {
            // 게임중 답란에 답을 적지 않고 답버튼을 눌렀을때 나타나는 메세지
                alert("After type on your answer about this question, click on the 'answer' button");
                document.math.answer.select();  //select()함수는 input text나 textarea 요소를 드래그 한 듯이 선택하기 위해 사용하는 함수 (즉, answer text창에 쓰여진 이전 문제의 답이 드래그한 듯 커서가 선택된 모습)
          
            }
            else {   //사용자가 답을 적었을 케이스
               if (theiranswer==rightanswer) {
               // 문제의 답이 맞았을경우 나타나는 메세지
                   alert('Right Answer!');
                   theirpoints++;
                   document.math.points.value=theirpoints;
                   }
                else {
                // 문제의 답이 틀렸을 경우 나타나는 메세지
                // theiranswer는 틀린답을 나타내고 rightanswer는 정확한 답을 나타낸다.
                    alert(theiranswer+ " is wrong answer.\n\nThe right answer is "+rightanswer+".")
                    }           // 백슬래쉬(\) + n 은 줄바꿈
                    document.math.answer.select();  //이전 문제에 쓴 답은 드래그 커서 처리
                    getProb();  //새로운 문제 얻는다
            }
        }
    }
}

❗ .select() 메소드(함수)를 적용하면 input text나 textarea 요소를 드래그 한 듯이 선택된다.