広告
【JavaScript】【タイピングゲーム】2日目 一文字タイピングゲーム
JavaScriptを使ってオリジナルの単語タイピングゲームを作っていきます。
単語タイピングゲーム作りを通してリアルタイム入力、文字列の操作、タイマーによるプログラムの自動実行、簡単なアニメーションなど実践的なプログラミング技術を学んでいきます。
「JavaScriptでプログラミング入門」の応用編になりますので、まだ終えてない方はそちらを先にご覧ください。
一文字タイピングゲーム
手始めに一文字だけをタイプするとても簡単なタイピングゲームを作ります。
こんなのです。
「html」部分
まず「html」部分を書きます。
■2日目 プログラム１■
<html> <head> <title>タイピングゲーム</title> </head> <body> <p>タイピングゲーム</p> <p>出てきた文字を入力してね！</p> <div id="mondai_block">問題部分</div> <div id="count_block">カウント部分</div> </body> </html>
■実行結果■
■説明■
見たままですが、問題部分の「div」に問題を表示して、カウント部分の「div」に残り問題数を表示したいと思います。
JavaScript部分
続いてJavaScript部分を書いていきます。
今回使う変数になります。
/*変数*/ var key; var ransuu; var count; var alphabet = [ "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 key;
入力されたキーのキーコードを保存します。
var ransuu;
問題用の乱数を保存します。
アルファベット26文字分なので「0～25」の乱数を保存します。
var count;
残り問題数のカウント用です。
var alphabet = [ "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" ];
アルファベット26文字の配列です。
今回は一文字だけなのでわざわざ配列にするまでもないですが、今後の説明にわかりやすいので配列にしました。
初期化用の関数「my_init()」
それでは初期化していきます。
「body onload」を使って「my_init()」という関数を実行してページを開くとともに初期化を同時に行います。
プログラム１に少し加えます。
■2日目 プログラム２■
<html>
<script>
/*変数*/
var key;
var ransuu;
var count;
var alphabet = [
"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"
];
/*初期化用の関数*/
function my_init(){
count = 10;
alert("初期化しました！");
my_mondai();
}
/*問題用の関数*/
function my_mondai(){
}
</script>
<head>
<title>タイピングゲーム</title>
</head>
<body onload="my_init()">
<p>タイピングゲーム</p>
<p>出てきた文字を入力してね！</p>
<div id="mondai_block">問題部分</div>
<div id="count_block">カウント部分</div>
</body>
</html>
■実行結果■
■説明■
きちんと関数が実行されているかどうか「alert」関数を使って確かめます。
function my_init(){
count = 10;
alert("初期化しました！");
my_mondai();
}
こちらが初期化用関数の「my_init()」です。
真ん中に書いてある「alert」関数が実行されているのが確認できるかと思います。
慣れないウチはこの「alert」などを使ってきちんと実行できているかどうか？変数の値は大丈夫か？などを細かく確認しながら進めましょう。
残り問題数の「count」のみ初期化しました。
そして問題を出題する為の関数「my_mondai()」を実行します。
広告
問題を出題する関数「my_mondai()」
function my_mondai(){
ransuu = Math.floor(Math.random() * 26);
document.getElementById("mondai_block").innerHTML = "<p>[" + alphabet[ransuu] + "]</p>";
document.getElementById("count_block").innerHTML = "<p>残り" + count + "問</p>";
}
問題の出題と書き換えを行う関数「my_mondai()」になります。
先に関数の説明をします。
ransuu = Math.floor(Math.random() * 26);
こちらが乱数発生部分ですね。
先ほども説明しましたが、アルファベット26文字なので「0～25」の乱数を発生させます。
この乱数とアルファベット用の配列を使って問題部分を書き換えます。
document.getElementById("mondai_block").innerHTML =
"<p>[" + alphabet[ransuu] + "]</p>";
こちらですね。
先ほどの配列の添え字に乱数を使えばランダムにアルファベットを表示できますね！
試しに乱数を使ってランダムに問題部分を表示させるまでのプログラムを書いてみます。
■2日目 プログラム３■
<html>
<script>
/*変数*/
var key;
var ransuu;
var count;
var alphabet = [
"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"
];
/*初期化用の関数*/
function my_init(){
count = 10;
my_mondai();
}
/*問題用の関数*/
function my_mondai(){
ransuu = Math.floor(Math.random() * 26);
document.getElementById("mondai_block").innerHTML = "<p>[" + alphabet[ransuu] + "]</p>";
document.getElementById("count_block").innerHTML = "<p>残り" + count + "問</p>";
}
</script>
<head>
<title>タイピングゲーム</title>
</head>
<body onload="my_init()">
<p>タイピングゲーム</p>
<p>出てきた文字を入力してね！</p>
<div id="mondai_block"></div>
<div id="count_block"></div>
</body>
</html>
■実行結果■
ページを開いて「f5」キーで更新を繰り返してみてください。
更新するたびにアルファベットがランダムに表示されるのを確認できるかと思います。
キー入力を受け取る関数「my_get_key()」
ここまでくればあとは入力判定を加えるだけですね。
流れとしては入力の受け取り→正誤の判定→残り問題数が0なら終了、そうでなければ再び問題を出すみたいな感じになります。
まずキー入力の受け取りと判定です。
document.onkeydown = my_get_key;
キー入力の受け取りは「document.onkeydown」でしたね！
この「document.onkeydown」でキーを受け取った場合は大文字入力・小文字入力関係なく「a」なら「65」、「b」なら「66」・・・「z」なら「90」というように入力を受け取ります。
これを頭に入れておきましょう。
今回は「my_get_key()」という関数で受け取ったキー入力を処理します。
function my_get_key(){
key = event.keyCode;
if(key == (ransuu + 65)){
alert("正解");
}
else{
alert("不正解");
}
count--;
if(count == 0){
document.write("<p>おしまい！</p>");
}
else{
my_mondai();
}
}
判定部分からいきます。
key = event.keyCode;
if(key == (ransuu + 65)){
alert("正解");
}
else{
alert("不正解");
}
「key = event.keyCode」で変数「key」にキーコードを保存します。
ではそのキーコードと何を比べるのかといいますと、そうです、先ほどの問題を出題するのに使った乱数ですね。
if(key == (ransuu + 65))
この部分ですね！
ここでさっきの「文字コードの「A」は「65」から始まる」という話が出てきます。
問題用の乱数は「0～25」で発生させているので、そこに「65」を足せば文字コードと同じ値になるというワケです。
最後に残り問題数の判定です。
if(count == 0){
document.write("<p>おしまい！</p>");
}
else{
my_mondai();
}
残り問題数「count」が「0」なら終了、そうでなければ再び「my_mondai()」関数を実行すれば繰り返して出題する事ができますね！
一文字タイピングゲームの完成です！
ここまでの中間ソースになります。
ではこちらのタイピングゲームに毛をはやすような感じで、次回より見た目、動きなどを加えていきたいと思います。
次回
広告
広告
Copyright 2016 K.N/petitetech.com