【JavaScript】【タイピングゲーム】(6日目中間ソース５)

<html>
<head>
<script>

const MAX_STAGE = 30;

var init_flag;
var mistake_flag;
var ary_length;
var str_length;
var key_code;
var ransuu;
var mondai_left;
var moji_point;
var input_mondai;
var lv;
var stage;
var i;

var lv1_ary = [
			"a","b","c","d","e",
			"f","g","h","i","j"
];

var lv2_ary = [
			"act","add","age","bad","bag",
			"bar","bed","bee","bet","can"
];

var lv3_ary = [
			"baby","bank","bear","bird","book",
			"foot","icon","land","liar","ship"
];

var lv_all_ary = [
	lv1_ary,
	lv2_ary,
	lv3_ary
];

var mondai_code_ary = [];

function my_init(){
	init_flag = 0;
	mistake_flag = 0;
	lv = 1;
	ary_length = lv_all_ary[lv - 1].length;
	key_code = 0;
	ransuu = 0;
	mondai_left = 0;
	moji_point = 0;
	input_mondai = "";
	stage = 0;
	i = 0;
	document.onkeydown = my_get_key;
}

function my_init2(){
	init_flag = 0;
	mistake_flag = 0;
	key_code = 0;
	moji_point = 0;
	input_mondai = "";
}

function my_game_over(){
	clearInterval(timer);
	document.write("Congratulations!!!<br>");
}

function my_time_over(){
	clearInterval(timer);
	document.write("TimeOver!!!<br>");
}

function my_change_lv(){
	if(stage == 10){
		lv = 2;
	}
	else if(stage == 20){
		lv = 3;
	}
}

function my_set_mondai(){
	ransuu = Math.floor(Math.random() * ary_length);
	str_length = lv_all_ary[lv - 1][ransuu].length;
	mondai_left = -1 * (str_length * 20);
	for(i = 0;i < str_length;i++){
		mondai_code_ary[i] = lv_all_ary[lv - 1][ransuu].charCodeAt(i);
	}
}

function my_set_stage(){
	document.getElementById("input_mondai_box").innerHTML = "";
	document.getElementById("mondai_box").style.left = mondai_left + "px";
	document.getElementById("mondai_box").innerHTML = lv_all_ary[lv - 1][ransuu];
	document.getElementById("marubatu_box").innerHTML = 
		"結果：　　　　　残り問題数：" + (MAX_STAGE - stage);
	if(stage == 10){
		document.getElementById("background_img_box").style.backgroundImage = "url(img2.jpg)";
	}
	else if(stage == 20){
		document.getElementById("background_img_box").style.backgroundImage = "url(img3.jpg)";
	}
}

function my_move_timer(){
	if(mondai_left > 400){
		my_time_over();
	}
	else{
		mondai_left+=2;
		document.getElementById("mondai_box").style.left = mondai_left + "px";
	}
}

function my_get_key(){

	key_code = event.keyCode;

	if(init_flag == 0){
		if(stage == MAX_STAGE){
			my_game_over();
		}
		my_change_lv();
		my_set_mondai();
		my_set_stage();
		timer = setInterval("my_move_timer()",10);
		init_flag = 1;
	}
	else{

		if(key_code == mondai_code_ary[moji_point] - 32){
			input_mondai = input_mondai + String.fromCharCode(key_code + 32);
			document.getElementById("input_mondai_box").innerHTML = input_mondai;
			moji_point++;
		}
		else{
			input_mondai = input_mondai + String.fromCharCode(key_code + 32);
			document.getElementById("input_mondai_box").innerHTML = input_mondai;
			mistake_flag = 1;
		}

		if(mistake_flag == 1){
			clearInterval(timer);
			document.getElementById("marubatu_box").innerHTML = 
				"結果：　不正解　残り問題数：" + (MAX_STAGE - stage);
			stage++;
			my_init2();
		}
		else if(moji_point == str_length){
			clearInterval(timer);
			document.getElementById("marubatu_box").innerHTML = 
				"結果：　　正解　残り問題数：" + (MAX_STAGE - stage);
			stage++;
			my_init2();
		}
	}
}

</script>
<style>

#background_img_box{
	background-image: url(img1.jpg);
	width: 400px;
	height: 288px;
	position: relative;
	overflow: hidden;
}

#input_mondai_box{
	width: 120px;
	height: 20px;
	font-size: 15px;
	text-align: center;
	background-color: white;
	color: black;
	position: absolute;
	top: 84px;
	left: 140px;
	z-index: 10;
}

#background_mondai_box{
	width: 400px;
	height: 80px;
	background-color: black;
	position: absolute;
	top: 104px;
	left: 0px;
	z-index: 5;
}

#mondai_box{
	font-size: 20px;
	color: white;
	position: absolute;
	top: 130px;
	left: 0px;
	z-index: 11;
}

</style>
<title>タイピングゲーム</title>
</head>
<body onload="my_init()">
<p>タイピングゲーム<br>何かキーを押すと始まります!</p>
<div id="marubatu_box">結果：　　　　　残り問題数：</div>
<div id="background_img_box">
	<div id="input_mondai_box"></div>
	<div id="background_mondai_box"></div>
	<div id="mondai_box"></div>
</div>
</body>
</html>