Abreto/game.html

## game.html
<!DOCTYPE html>
<html>
    <head>
        <title>Game</title>
        <style>
            body {
                background-color: black;
                color: green;
            }
            .withborder {
                border-style: double;
                border-color: chartreuse;
            }
            .tred {
                color: red;
            }
            .shift2right {
                float: right;
            }
            .shift2left {
                float: left;
            }
            .clr {
                clear: left;
            }
            .clearfix {
                overflow: auto;
            }
            .main-container {
                margin-top: 10%;
                margin-left: 20%;
                margin-right: 20%;
            }
            .record-container{
                border-top:double;
                padding-top:5%;
                padding-bottom:30%;
                padding-left:10%;
                padding-right:10%;
            }
            .class-container {
                margin-top: -1px;
                padding-top: 3%;
                padding-bottom: 3%;
                padding-left: 16%;
                padding-right: 16%;
                font-size:30px;
                text-align: center;
            }
            .word-container {
                margin-top: 5%;
                margin-bottom: 2%;
                margin-left: 30%;
                margin-right: 30%;
                padding: 5%;
                font-size:30px;
                text-align: center;
            }
            .explain-container {
                margin-left: 10%;
                margin-right: 10%;
            }
        </style>
    </head>
    <body>
        <div class="main-container withborder">
            <div class="clearfix">
            <div class="withborder shift2right class-container">
                <span id="cls2">类别2</span>
            </div>
            <div class="withborder shift2left class-container">
                <span id="cls1">类别1</span>
            </div>
            </div>
            <div class="withborder clr word-container">
                <span id="word">词</span>
            </div>
            <div class="explain-container">
                <p>请将双手的中指或食指放在键盘的F键和J键上，准备开始游戏吧......</p>
                <p>接下来属于不同类别的词语将一个个地呈现在屏幕中心，这些类别标签将始终显示在屏幕上方，
                    当呈现的项目属于左边的类别时，请按F键；属于右边的类别时请按J键。每个项目只属于一个类别。
                    如果按键错误，将出现错误提示，需要按另一个键进行修正并继续进行。
                </p>
                <p>
                    这是一个计时分类任务，需要你尽可能快且准确地进行反应。反应太慢或错误太多会导致结果不准确。
                    这个游戏大约会花费几分钟。
                </p>
            </div>
            <div id="result" class = "record-container">
                <!-- -->
            </div>
        </div>
        <script>
            function random01() {
                return Number(Math.random() > 0.5);
            }
            function $(id) {
                return document.getElementById(id);
            }
            var dic = [
                ["植物", "动物", "草"],
                ["巨佬", "蒟蒻", "姚"],
                ["巨佬", "蒟蒻", "刘"],
                ["单机", "网游", "红警"]
            ];
            var current = 0;
            var keys = [102, 106];
            var topress;
            var begintime;
            function showone(id, rand) {
                $('cls1').innerHTML = dic[id][rand];
                $('cls2').innerHTML = dic[id][1-rand];
                $('word').innerHTML = dic[id][2];
            }
            function endgame() {
                alert('Game is over.');
            }
            function nextround() {
                var rand = random01();
                ++current;
                if( current >= dic.length ) {
                    endgame();
                    return;
                }
                showone(current, rand);
                topress = keys[rand];
                begintime = (new Date()).getTime();
            }
            (function () {
                current = -1;
                nextround();
                document.onkeypress = function (e) {
                    if(e.charCode == topress) {
                        var corretime = (new Date()).getTime();
                        var used = corretime - begintime;
                        console.log(used);
                        $('result').innerHTML += '<p>Problem '+(current+1)+': '+used+'ms</p>';
                        nextround();
                    } else {
                        var cid = 0;
                        if( e.charCode == 102 ) cid = 1;
                        else if (e.charCode == 106) cid = 2;
                        if( cid > 0 )
                        {
                            $('cls'+cid).innerHTML += '<span class="tred">&#x2718;</span>';
                        }
                    }
                }
            })();
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Game</title>
	<style>
	body {
	background-color: black;
	color: green;
	}
	.withborder {
	border-style: double;
	border-color: chartreuse;
	}
	.tred {
	color: red;
	}
	.shift2right {
	float: right;
	}
	.shift2left {
	float: left;
	}
	.clr {
	clear: left;
	}
	.clearfix {
	overflow: auto;
	}
	.main-container {
	margin-top: 10%;
	margin-left: 20%;
	margin-right: 20%;
	}
	.record-container{
	border-top:double;
	padding-top:5%;
	padding-bottom:30%;
	padding-left:10%;
	padding-right:10%;
	}
	.class-container {
	margin-top: -1px;
	padding-top: 3%;
	padding-bottom: 3%;
	padding-left: 16%;
	padding-right: 16%;
	font-size:30px;
	text-align: center;
	}
	.word-container {
	margin-top: 5%;
	margin-bottom: 2%;
	margin-left: 30%;
	margin-right: 30%;
	padding: 5%;
	font-size:30px;
	text-align: center;
	}
	.explain-container {
	margin-left: 10%;
	margin-right: 10%;
	}
	</style>
	</head>
	<body>
	<div class="main-container withborder">
	<div class="clearfix">
	<div class="withborder shift2right class-container">
	<span id="cls2">类别2</span>
	</div>
	<div class="withborder shift2left class-container">
	<span id="cls1">类别1</span>
	</div>
	</div>
	<div class="withborder clr word-container">
	<span id="word">词</span>
	</div>
	<div class="explain-container">
	<p>请将双手的中指或食指放在键盘的F键和J键上，准备开始游戏吧......</p>
	<p>接下来属于不同类别的词语将一个个地呈现在屏幕中心，这些类别标签将始终显示在屏幕上方，
	当呈现的项目属于左边的类别时，请按F键；属于右边的类别时请按J键。每个项目只属于一个类别。
	如果按键错误，将出现错误提示，需要按另一个键进行修正并继续进行。
	</p>
	<p>
	这是一个计时分类任务，需要你尽可能快且准确地进行反应。反应太慢或错误太多会导致结果不准确。
	这个游戏大约会花费几分钟。
	</p>
	</div>
	<div id="result" class = "record-container">
	<!-- -->
	</div>
	</div>
	<script>
	function random01() {
	return Number(Math.random() > 0.5);
	}
	function $(id) {
	return document.getElementById(id);
	}
	var dic = [
	["植物", "动物", "草"],
	["巨佬", "蒟蒻", "姚"],
	["巨佬", "蒟蒻", "刘"],
	["单机", "网游", "红警"]
	];
	var current = 0;
	var keys = [102, 106];
	var topress;
	var begintime;
	function showone(id, rand) {
	$('cls1').innerHTML = dic[id][rand];
	$('cls2').innerHTML = dic[id][1-rand];
	$('word').innerHTML = dic[id][2];
	}
	function endgame() {
	alert('Game is over.');
	}
	function nextround() {
	var rand = random01();
	++current;
	if( current >= dic.length ) {
	endgame();
	return;
	}
	showone(current, rand);
	topress = keys[rand];
	begintime = (new Date()).getTime();
	}
	(function () {
	current = -1;
	nextround();
	document.onkeypress = function (e) {
	if(e.charCode == topress) {
	var corretime = (new Date()).getTime();
	var used = corretime - begintime;
	console.log(used);
	$('result').innerHTML += '<p>Problem '+(current+1)+': '+used+'ms</p>';
	nextround();
	} else {
	var cid = 0;
	if( e.charCode == 102 ) cid = 1;
	else if (e.charCode == 106) cid = 2;
	if( cid > 0 )
	{
	$('cls'+cid).innerHTML += '<span class="tred">✘</span>';
	}
	}
	}
	})();
	</script>
	</body>
	</html>