JSFiddle - React, Tailwind, and code Playground

HTML

<P>재미있는 문철마삼 놀이</P>
<P>
    <CENTER>
        <BUTTON onclick="" id="newgame">새 게임</BUTTON> / 타이머:
         <SPAN id="x">0</SPAN>초</CENTER></P>
<CENTER>
<DIV id="l1">
<TABLE style="text-align: center; font-family: 나눔고딕;">
    <TR>
        <TD id="t1" width="80">1</TD>
        <TD id="t2" width="80">2</TD>
        <TD id="t3" width="80">3</TD>
        <TD id="t4" width="80">4</TD>
        <TD id="t5" width="80">5</TD>
        <TD id="t6" width="80">6</TD>
        <TD id="t7" width="80">7</TD>
        <TD id="t8" width="80">8</TD>
        <TD id="t9" width="80">9</TD>
        <TD id="t10" width="80">10</TD>
        <TD id="t11" width="80">11</TD>
        <TD id="t12" width="80">12</TD>
    </TR>
    <TR height="120" style="background-color: #ccffff; font-weight: bold;">
        <TD id="c1" width="80">&nbsp;</TD>
        <TD id="c2" width="80">&nbsp;</TD>
        <TD id="c3" width="80">&nbsp;</TD>
        <TD id="c4" width="80">&nbsp;</TD>
        <TD id="c5" width="80">&nbsp;</TD>
        <TD id="c6" width="80">&nbsp;</TD>
        <TD id="c7" width="80">&nbsp;</TD>
        <TD id="c8" width="80">&nbsp;</TD>
        <TD id="c9" width="80">&nbsp;</TD>
        <TD id="c10" width="80">&nbsp;</TD>
        <TD id="c11" width="80">&nbsp;</TD>
        <TD id="c12" width="80">&nbsp;</TD>
    </TR>
</TABLE>
</DIV>
</CENTER>

JavaScript

$(function($) {
    var tmr = null;
    var dictionary = ["공항","국회의사당","미술관","박물관","놀이공원","고속터미널","문화회관","영화관","시청","극장","법원","동물원","문방구","철물점","마을회관","삼거리","저수지","이장님댁","학교 앞","면사무소","이발소","마트 앞","과수원","파출소","미용실"];
    var picked = [];
    var retime = 30;
    var curidx = 0;
    
    $("#newgame").click(function() {
        if(tmr) {
            clearInterval(tmr);
            tmr = null;
        }
                      
        var idx = [];
	for(i = 0; i < dictionary.length; i++) { idx.push(i); }
	idx.sort(function() { return Math.random() - 0.5; });
	for(i = 0; i < 12; i++) { picked[i] = dictionary[idx[i]]; $("#t" + (i+1)).text(i+1); $("#c" + (i+1)).text(picked[i]); }
	retime = 30;
	$("#x").text(retime);
	tmr = setInterval(function() {
		if(!retime) {
			clearInterval(tmr);
			curidx = -1;
			idx = []; for(i = 0; i < 12; i++) { idx.push(i); }; idx.sort(function() { return Math.random() - 0.5; });
			for(i = 0; i < 12; i++) { $("#t" + (i+1)).html("<b>" + (idx[i]+1) + "</b>"); $("#c" + (i+1)).text(""); }
			var nextRound = null;
			nextRound = function() {
				curidx++;
				if(curidx >= 12) {
					alert("모든 정답을 맞추었습니다! 그대를 문철마삼으로 인정합니다!");
					return;
				}
				$("#c" + (curidx + 1)).html("<input type=text id=answer value='' style='border: 0; width: 100%;'/>");
				$("#answer").keydown(function(event) {
					if(event.which == 13 && this.value != '') {
						event.preventDefault();
						if(picked[idx[curidx]].replace(/ /gi, "") != this.value.replace(/ /gi, "")) {
							$("#c" + (curidx + 1)).html("<font color='red'><b>" + picked[idx[curidx]] + "</b></font>");
							alert("틀렸습니다!");
							$("#newgame").focus();
						} else {
							$("#c" + (curidx + 1)).html("<font color='blue'><b>" + picked[idx[curidx]] + "</b></font>");
							nextRound();
						}
					}
				}).focus();
			}; nextRound();
			return;
		}
		$("#x").text(--retime);
	}, 1000);	
    });
});