자바 스크립트에서 시간제한 게임을 만들고 있습니다.

조회수 1185회

자바스크립트에서 시간제한 관련 게임을 만들고 있습니다. 문제 5번 10번 15번에 특별한문제를 만들고 그 부분을 틀리면 처음으로 돌아가서 다시 도전하게끔 하고 싶은데 이 부분 코드를 어떻게 해야 할까요? 또 시간 안에서 배경음악을 커졌다 다음 문제로 갈수록 작아지게 만들수도 있을까요?

 <script language="javascript">
var delay=20; //시간설정
var correctAnswers=new Array("a","a","a","a","a","a","a",
"a","a","a","a","a","a","a",
"a","a","a","a","a","a","a",
"c");  //정답

var q_num=1;
var timer;
var layer;
var clock=delay;
var score=0;

var audio = new Audio('audio_file.mp3');
audio.play();

function show_question(){
    if (layer=eval("document.all.question"+q_num)){
        layer.style.display="inline";
        document.all.timeLeft.innerHTML=clock;
        hide_question();
    } else {
        document.all.timeLeft.innerHTML=0;
        document.all.quizScore.innerHTML="당신은 "+(q_num-1)+"문제중 "+score+"개를 맞췄습니다.";
        document.all.quizScore.style.display="inline";
    }
}

function hide_question(){
    if (clock>0) {
        document.all.timeLeft.innerHTML=clock;
        clock--;
        timer=setTimeout("hide_question()",1000);
    } else {
        clearTimeout(timer);
        document.all.answerBoard.innerHTML=" ";
        clock=delay;
        layer.style.display="none";
        q_num++;
        show_question();
    }
}

function check_answer(answer){
    if (correctAnswers[q_num-1]==answer){
        score++;
        document.all.answerBoard.innerHTML="<b>-</b>";
    } else {
        document.all.answerBoard.innerHTML="<font color=#941E34><b>과거를 잊어버리는자는 그것을 또다시 반복하게 된다.</b></font>";
    }
    clock=0;
    clearTimeout(timer);
    timer=setTimeout("hide_question()",700);
}

window.onload=show_question;
</script>
</head>

<body>
        남은시간 : <B><span id="timeLeft"></span></B> 초<br>

<br>
<div id="answerBoard"> </div>
<br>
<!-- 챕터1 -->

<div id="question1" style="display:none">

    <a href="javascript:void(0)" onclick="check_answer('a')">문제안내</a><br>

</div>

<div id="question2" style="display:none">

        <a href="javascript:void(0)" onclick="check_answer('a')">문제<br>
            문제내용</a><br>

    </div>
    .....
  • (•́ ✖ •̀)
    알 수 없는 사용자

1 답변

  • 코드를 전부 다 리뷰해 드릴 순 없으니 무플 방지 차원에서 아이디어만 제안을 좀 드려봐도 될는지요.

    1. 각 문제는 하나의 객체여야 합니다. 그 객체는 문제, 정답, 맞췄을 경우의 행동, 틀렸을 경우의 행동을 정의로 가지는 거구요. 그리고 그 문제들은, 게임이 요이땅 하면, 일정한 순서에 따라서 사용자에게 주어져야 합니다.
    2. 그러면 여기서 게임이라는 것은, 요이땅 하는 순간에 일단 타이머 작동을 시작하고, 준비된 문제가 다 떨어질 때까지 지정된 순서에 따라 그 객체 하나하나를 차례로 출제하는 일이 됩니다. 그 문제 객체 안에는 문제, 정답, 맞았을 때의 행동, 틀렸을 때의 행동 요령이 다 대본으로 적혀 있으므로, 게임은 그걸 그냥 따르면 됩니다. 더 이상 출제할 문제가 없으면 타이머를 끄고 기록을 알려주면 되는 거구요.
    3. 예컨대 15번 문제가 중간보스여서 이놈을 틀리면 1번부터 다시 맞춰야 한다고 해 보죠. 그러면, 1번부터 14번까지의 문제 객체는 '틀렸을 경우'에 "자기 자신을 다시 출제한다"라는 행동을 하면 되고, 15번 문제 객체는 '틀렸을 경우'에 "1번 문제를 출제한다"라는 행동을 하면 됩니다. 헉 좀 잔인하다는 생각이 드는군요.

    지금 작성하신 코드는 문제와 정답이 분리되어 있기 때문에 코드 입장에서는 "왜 5번을 틀렸는데 1번을 보여주라는 거야?" 싶을 수밖에 없습니다. 개념적으로도, 정답은 문제의 하위에 속하는 구성 요소(attribute)이지, 문제와 병렬 가능한 별도의 독립 요소가 아닙니다. 참고로 JS 객체의 특정 키의 값을 함수로 지정하는 게 가능하니, 좀더 생각해 보시면 하실 수 있을 겁니다.


    소리를 키우고 줄이고 하는 것은 js audio decrease volume 같은 식으로 영어로 구글 찾으면 백타 나올 것이니 별도로 답변 안드리겠습니다.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)