今回は、タイピングゲーム＊くそ を、作ってみましょう
<!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>
上記で、シンプルすぎるタイピングゲームを作ってみました
いかがでしょう
まだまだ、記事や、質問を、投稿するので、フォローをお願いいたします
フォローをしてくれたら、
私も、フォローさせていただきます