<html>
<head>
<script>
const MAX_STAGE = 40;
var timer;
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 score;
var i;
var lv1_ary = [
"a","b","c","d","e",
"f","g","h","i","j",
"k","l","m","n","o",
"p","q","r","s","t",
"u","v","w","x","y",
"z"
];
var lv2_ary = [
"act","add","age","bad","bag",
"bar","bed","bee","bet","can",
"cap","car","dad","day","did",
"ear","eat","egg","fan","fat",
"fee","gas","get","god","hat",
"him"
];
var lv3_ary = [
"baby","bank","bear","bird","book",
"foot","icon","land","liar","ship",
"sing","soup","tire","type","tool",
"tree","vase","ware","west","wind",
"word","yell","milk","carp","bird",
];
var lv4_ary = [
"agree","ahead","airplane","bargain","baseball",
"central","century","certain","depth","element",
"elephant","fever","field","generation","generous",
"helpful","hesitate","peaceful","indeed","knife",
"method","monday","opinion","paint","reaction",
"scale"
];
var lv_all_ary = [
lv1_ary,
lv2_ary,
lv3_ary,
lv4_ary
];
var mondai_code_ary = [];
var mistake_ary = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
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 = -20;
moji_point = 0;
input_mondai = "";
stage = 0;
score = 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>");
my_result();
}
function my_time_over(){
clearInterval(timer);
document.write("TimeOver!!!<br>");
my_result();
}
function my_result(){
document.write("出題数=" + stage + "問<br>");
document.write("正解数=" + (score / 10) + "問<br>");
document.write("間違えた場所<br>");
for(i = 0;i < 26;i++){
if(mistake_ary[i] > 0){
document.write(String.fromCharCode(i + 97) + ":" + mistake_ary[i] + "回 ");
}
}
}
function my_change_lv(){
if(stage == 10){
lv = 2;
}
else if(stage == 20){
lv = 3;
}
else if(stage == 30){
lv = 4;
}
}
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("marubatu_box").innerHTML = "";
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("score_box").innerHTML = (stage + 1) + "st : " + score + "pt";
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)";
}
else if(stage == 30){
document.getElementById("background_img_box").style.backgroundImage = "url(img4.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(mondai_left > 0){
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++;
if(str_length != 1){
mondai_left -= 10;
document.getElementById("mondai_box").style.left = mondai_left + "px";
}
}
else{
input_mondai = input_mondai + String.fromCharCode(key_code + 32);
mistake_ary[mondai_code_ary[moji_point] - 97]++;
document.getElementById("input_mondai_box").innerHTML = input_mondai;
mistake_flag = 1;
}
if(mistake_flag == 1){
clearInterval(timer);
document.getElementById("marubatu_box").innerHTML = "×";
stage++;
my_init2();
}
else if(moji_point == str_length){
clearInterval(timer);
score = score + 10;
document.getElementById("marubatu_box").innerHTML = "〇";
stage++;
my_init2();
}
}
}
}
</script>
<style>
#background_img_box{
background-image: url(img1.jpg);
width: 400px;
height: 288px;
position: relative;
overflow: hidden;
}
#marubatu_box{
width: 400px;
height: 288px;
font-size: 300px;
text-align: center;
line-height: 288px;
color: yellow;
position: absolute;
top: 0px;
left: 0px;
z-index: 20;
}
#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: -20px;
z-index: 11;
}
#score_box{
width: 120px;
height: 20px;
font-size: 15px;
text-align: center;
background-color: white;
color: black;
position: absolute;
top: 184px;
left: 140px;
z-index: 12;
}
</style>
<title>タイピングゲーム</title>
</head>
<body onload="my_init()">
<p>タイピングゲーム<br>何かキーを押すと始まります!</p>
<div id="background_img_box">
<div id="marubatu_box"></div>
<div id="input_mondai_box"></div>
<div id="background_mondai_box"></div>
<div id="mondai_box"></div>
<div id="score_box">1st : 0pt</div>
</div>
</body>
</html>