JSFiddle - React, Tailwind, and code Playground

HTML

<form name="f">
    <div id="a">★</div>
    <div id="d">
        <button type="button" name="b1">一致 (1)</button>
        <button type="button" name="b0">スタート (0)</button>
        <button type="button" name="b2">不一致 (2)</button>
    </div>
    <div id="e"></div>
    <div id="b">
        <div id="c"></div>
        <button type="button" name="b3">もう一度 (3)</button>
    </div>
</form>

<ul>
    <li>今表示されているマークがひとつ前に表示されていたマークと一致か不一致かを間違えずに選択するゲームです。</li>
    <li>制限時間は45秒です。</li>
    <li>カッコ内の数字のキーでも操作できます。</li>
</ul>

CSS

#a {font-size:150px;text-align:center;}
#b {text-align:center;}
#c {margin:10px 0;}
#d {text-align:center;}
#e {text-align:center; padding:10px;}

JavaScript

var running = false;
var tid;
var prev = '';
var p1 = 0;
var p2 = 0;

function r() {
    return ['●', '▲', '■'][Math.floor(Math.random()*3)];
}

function init() {
    document.getElementById('b').style.display = 'none';
    document.getElementById('a').innerHTML = r();
    prev = '';
    tid = 0;
    running = false;
    p1 = 0;
    p2 = 0;
    document.f.b0.disabled = false;
}

function n() {
    document.getElementById('a').style.color = '#fff';
    setTimeout(function(){document.getElementById('a').style.color = '#000';}, 150);
    prev = document.getElementById('a').innerHTML;
    document.getElementById('a').innerHTML = r();
}

function start() {
    n();
    document.f.b0.disabled = true;
    tid = setTimeout(timeout, 45000);
    running = true;
}

function timeout() {
    tid = 0;
    running = false;
    result();
}

function answer(a) {
    if (running) {
        ++p2;
        if ((a == 1 && prev == document.getElementById('a').innerHTML) || (a == 2 && prev != document.getElementById('a').innerHTML)) {
            ++p1;
            document.getElementById('e').innerHTML = '<span style="color:#090;">○</span>';
        } else {
            document.getElementById('e').innerHTML = '<span style="color:#c00;">×</span>';
        }
        n();
    }
}

function result() {
    document.getElementById('c').innerHTML = '総回答数: ' + p2 + '、正解数:' + p1 + '、判断の速さ:' + (Math.floor(p2 / 45 * 1000) / 1000) + '回/秒、判断の正確さ:' + Math.floor(p1 / p2 * 100) + '%';
    document.getElementById('b').style.display = 'block';
}

function k(e) {
    switch (String.fromCharCode(e.keyCode)) {
        case '0':
            start();
            break;
        case '1':
            answer(1);
            break;
        case '2':
            answer(2);
            break;
        case '3':
            if (!running) {
                init();
            }
            break;
    }
}

init();
document.f.b0.addEventListener('click', start);
document.f.b1.addEventListener('click', function () {
   ...