【JavaScript】【タイピングゲーム】5日目 移動とゲームオーバー

JavaScriptを使ってオリジナルの単語タイピングゲームを作っていきます。

単語タイピングゲーム作りを通してリアルタイム入力、文字列の操作、タイマーによるプログラムの自動実行、簡単なアニメーションなど実践的なプログラミング技術を学んでいきます。

「JavaScriptでプログラミング入門」の応用編になりますので、まだ終えてない方はそちらを先にご覧ください。

今回は問題の移動とゲームオーバーを作っていきます。

ステージカウント用の変数と問題ボックスの座標用の変数

var stage;
var mondai_left;

こちらを用意して最初の初期化時に「0」で初期化しておいてください。

プログラム中で変化させたくない数を定数宣言する事により保護する事ができます。

今回は最大ステージ数にこの定数宣言を使います。

const MAX_STAGE = 10;

使い方は「const」というキーワードを頭につけてその定数の名前をつけるだけです。

これでプログラム実行中にプログラム側からは変更できなくなります。

宣言する場所は通常の変数を宣言する手前などで大丈夫です。

小文字でも名前はつけられますが、変数と見分けがつきやすいように大文字でつけるのが慣習となっております。

あとは普通の変数と同じように使いたい場所に書くだけで大丈夫です。

この定数を上手に使うと変更しやすいプログラムを作る事ができます。

それでは問題を移動させてみます。

			
function my_move_timer(){
	if(mondai_left > 400){
		my_time_over();
	}
	else{
		mondai_left = mondai_left + 2;
		document.getElementById("mondai_box").style.left = 
			mondai_left + "px";
	}
}

問題ボックスを左から右に移動させる「my_move_timer()」になります。

座標用の変数「mondai_left」を加算して、その値で問題ボックスの座標を書き換えております。

永遠に動き続けても困るので、画面右端「mondai_left > 400」まで行ったら時間切れ、タイムオーバー用の関数を実行します。

問題ボックスの初期位置も変更します。

まず「my_set_mondai()」内、問題の文字数「str_length」がわかった時点で

mondai_left = -1 * (str_length * 20);

次にこちらの一文を加えます。

「-1」　×　(「文字数」　×　「文字の大きさ(20px)」)

みたいな感じです。

画面の左側に隠すのでマイナスの値にする為「-1」をかけます。

これで問題ボックスの初期座標が決まったので「my_set_stage()」にて

document.getElementById("mondai_box").style.left = 
		mondai_left + "px";

座標を書き換えれば初期位置の変更はおしまいです。

ゲームオーバーとタイムオーバーになります。

function my_game_over(){
	clearInterval(timer);
	document.write("Congratulations!!!<br>");
}

function my_time_over(){
	clearInterval(timer);
	document.write("TimeOver!!!<br>");
}

規定の問題数に達した時はゲームオーバー、入力が間に合わず、問題が画面右端に達した時はタイムオーバーになります。

どちらの場合もゲームが終了するので忘れずにタイマーも止めます。

あとはこれらを適切に配置すれば完了です。

if(init_flag == 0){
	if(stage == MAX_STAGE){
		my_game_over();
	}
	my_set_mondai();
	my_set_stage();
	timer = setInterval("my_move_timer()",10);
	init_flag = 1;
}

「my_get_key()」の前半部分です。

規定の問題数に達した場合、ゲームオーバー関数を実行するのと、問題のセット、画面表示が終わったら「setInterval」関数でタイマーを作動させております。

先ほど宣言した定数「MAX_STAGE」をここで使っております。

このようにポイント、ポイントに定数を上手に使えば、例えばゲームオーバーのステージ数を変更したい時も、いちいちプログラム中を探さずにその定数を宣言したトコロだけ変更すれば大丈夫になります。

タイマーの停止とステージカウント

if(mistake_flag == 1){
	clearInterval(timer);
	document.getElementById("marubatu_box").innerHTML = 
		"結果：　不正解　残り問題数：" + (10 - stage);
	stage++;
	my_init2();
}
else if(moji_point == str_length){
	clearInterval(timer);
	document.getElementById("marubatu_box").innerHTML = 
		"結果：　　正解　残り問題数：" + (10 - stage);
	stage++;
	my_init2();
}

「my_get_key()」の後半部分です。

正誤が確定した時点でタイマーを一度停止して、ステージカウントも増加しております。

ゲームオーバー！

ここまでの中間ソースになります。

中間ソース４

次回はレベル・背景の切り替えを行っていきます。

6日目 レベル・背景の切り替え