すごくシンプルなタイピングゲームを作ろう #JavaScript

今回は、タイピングゲーム＊くそ　を、作ってみましょう



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="GENERATOR" content="UTF-8 Writer" />
<title>私が作った、タイピングゲーム</title>
<h1>私が作った、タイピングゲーム</h1>
　　　　　
<script>

document.onkeydown = typeGame;  //キー押下時に関数typeGame()を呼び出す



//文字を格納する配列
var moji = new Array("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 kcode = new Array(65,66,67,68,69,70,71,72,73,
                      74,75,76,77,78,79,80,81,82,
                      83,84,85,86,87,88,89,90);

//0～25までの乱数を格納する配列
var rnd = new Array();





//グローバル変数群
var mondai = "";       //問題の文字列を格納
var cnt=0;             //何問目か格納
var typStart,typEnd;   //開始時と終了時の時刻を格納





//0～25までの乱数を200個作成して配列rndに格納する関数
function ransu()
{
  for ( var i = 0 ; i < 200 ; i++ )
  {
    rnd[i] = Math.floor( Math.random() * 26 );
  }
}

//タイピングゲームの問題をセットする関数
function gameSet()
{
  //カウント数をクリアする
  cnt=0;

  //まずは問題文を作る
  ransu();

  //問題文をテーブルを使って表示。各セルはID名「word＋数字」を付す
  mondai="<table class='Q'>";

  for ( var i = 0 ; i < 10 ; i++ )
  {
    mondai += "<tr>";

    for ( var j = 0 ; j < 20 ; j++ )
    {
      var idnum =i*20+j;
      mondai += "<td id='word"+idnum+"'>"+moji[ rnd[idnum] ]+"</td>";
    }

    mondai += "</tr>";
  }
  mondai += "</table>";

  //問題枠に表示する
  document.getElementById("waku").innerHTML = mondai;
}

//キー入力を受け取る関数
function typeGame(evt)
{
  var kc;  //入力されたキーコードを格納する変数

  //入力されたキーのキーコードを取得
  if (document.all)
  {
    kc = event.keyCode;
  }
  else
  {
    kc = evt.which;
  }
  //入力されたキーコードと、問題文のキーコードを比較
  if (kc == kcode[ rnd[cnt] ])
  {
    //以下、キーコードが一致した時の処理
    //最初の1文字が入力された時間を記録する
    if (cnt==0)
    { 
      typStart = new Date();
    }

    //入力されたセルの文字色を灰色にする
    var idName = "word"+cnt;
    document.getElementById(idName).style.color="#dddddd";

    cnt++; //カウント数を＋１にする

    //全文字入力したか確認
    if ( cnt == 200)
    {
      //全文字入力していたら、終了時間を記録する
      typEnd = new Date();

      //終了時間－開始時間で掛かったミリ秒を取得する
      var keika = typEnd - typStart;

      //1000で割って「切捨て」、秒数を取得
      var sec = Math.floor( keika/1000 );

      //1000で割った「余り(%で取得できる）」でミリ秒を取得
      var msec = keika % 1000;

      //問題終了を告げる文字列を作成
      var fin="　GAMECLEAR　GAMESET　時間："+sec+"秒"+msec;

      //問題枠にゲーム終了を表示
      document.getElementById("waku").innerHTML = fin;
    }
  }
}
</script>

<style type="text/css">
<!--
table.Q td
{
  width:20px;
  height:20px;
  font-size:18pt;
  text-align:center;
}

-->
</style>

</head>
<body onload="gameSet()" bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#ff0000" vlink="#800080">
<h1></h1>
<div id="waku"></div>
<form>
<input type="button" value="問題初期化" onclick="gameSet()"><br>
<input type="button" value="好きなことを入力" onclick="location.href='ここに自分のURLを入力'"><br>

</form>
</body>
</html>



<!DOCTYPE html>
<html lang="ja">
<head>
上記で、シンプルすぎるタイピングゲームを作ってみました
いかがでしょう
まだまだ、記事や、質問を、投稿するので、フォローをお願いいたします
フォローをしてくれたら、
私も、フォローさせていただきます