どうも！LSSです！！
今日はまた即興で、単純なタイピング練習ゲームを作ってみました！
どのぐらい単純かというと「ABCDEFG（中略）XYZ」のアルファベット26文字をキーボードで打つだけですｗ
「A」を打った瞬間から、最後の「Z」を打った瞬間までにかかった時間が表示されます。
※キーをJavaScriptで判定するために、最初だけ一度、画面内のどこかを一度クリックしてください。
自分で何度かやってみた結果
ゆるめにやって１０秒ぐらい。
調子よくて７秒台って感じ。
一回だけ７秒を切りました！！ｗ
この練習方法
本来、Windowsの「メモ帳」とかでひたすらA~Zを繰り返し打ってたら、だんだんキーの位置を覚えますよ、と人からタイピングの練習方法を聞かれた時に答えていたものです。
今日、Twitterで久々にタイピングの上達方法を問うツイートをされている方を見かけたので、リプ（返答）したのですが
「JavaScriptで作ったら実際かかった時間も確認できて上達が実感できるかも」
と思ったので作ってみました。
ぜひ試してみていただき、何秒で打ち終えたかコメント欄で教えてください^^
（遅くても速くても気にしない方向で！！ｗ）
ここから、JavaScriptを学習したい人向け
コード
<div id="gamen" style="background-color: #dddddd; padding: 5px;"> </div>
<script>// <![CDATA[
var rireki='';
var az='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var fs=0;
var stime=0;
var etime=0;
var kaisuu=0;
gamen_w();
document.body.onkeypress=function(ev){
if(ev.keyCode==65+fs || ev.keyCode==97+fs){
if(fs==0){stime=(new Date()).getTime();}
if(fs==25){etime=(new Date()).getTime();}
fs++;
if(fs>25){
fs=0;
kaisuu++;
rireki+=kaisuu+'回目：'+((etime-stime)/1000)+'秒<br/>';
}
gamen_w();
}
}
function gamen_w(){
gamen.innerHTML=rireki+az.substr(0,fs)+'<span style="font-size:35px;text-shadow:0px 0px 3px yellow;">'+az.substr(fs,1)+'</span>'+az.substr(fs+1);
}
// ]]></script>
変数fsは「次に打つべき文字が何文字めか」を示す変数で、a=0、z=25としています。
gamen_w()は、画面描画用に作った関数です。
変数azに「A~Zの２６文字」を入れており、そこからsubstrで
「次に打つべき文字の直前までの文字列 az.substr(0,fs)」
「次に打つべき文字を装飾するためのspanタグ、次に打つべき１文字az.substr(fs,1)、閉じspanタグ」
「それ以降の文字列az.substr(fs+1)」
を書き出しています。
document.body.onkeypress=function(ev){
ページ内でキーボードのキーが押された時に{ }内の処理を実行します。
その際、( )内に書いたevという変数に「キーイベント」が入り、
ev.keyCode
で、押されたキーがどのキーだったかが数値で取り出せます。
if(ev.keyCode==65+fs || ev.keyCode==97+fs){
キーコード65は「A」、キーコード97は「a」です。
||は「or条件」で、キーが大文字でも小文字でも判定が通るようにしています。
(new Date()).getTime();
getTimeは「1970年1月1日 午前0時からの経過ミリ秒」を返す関数です（結構大きい数値ですｗ）
new Date()は使い捨ての「その瞬間」を示す日付オブジェクトで、この記述で「その瞬間の経過ミリ秒」を取得できます。
…ゲーム中のほとんどの処理が、document.body.onkeypress=function(ev){の中で済んでいる、単純な構造ですねｗｗｗ
作りながら思ったんですが
一般的な（？）タイピング練習ゲームみたいに「既定の単語がランダムに出題されて、それをタイプする」ゲーム。
あれをCSSやJavaScriptで使う関数名・プロパティ名で作ったら、馴染みやすくなるのかなぁ？と。
position relative absolute、
function document width height weight innerHTML、
background-color transition transform…と、イマイチ馴染みのない英単語がたくさん出てくるのでｗｗｗ
てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
