【JavaScript】【タイピングゲーム】6日目レベル・背景の切り替え

2022.10.10更新

【JavaScript】【タイピングゲーム】のタイトル画像になります

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

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

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

レベル・背景の切り替え

今回はレベルを切り替えるとともに背景も切り替えていきます。

簡単なのでさらっといきたいと思います。

レベルアップ条件は正誤の数にかかわらず１０ステージごとに切り替えていきます。

事前にステージ最大数である「MAX_STAGE」を「30」にして、レベルを表す変数「lv」を「1」に、背景用の画像を「img2.jpg」・「img3.jpg」という名前で２枚追加しておいてください。

レベルの切り替え

レベルの切り替え用の関数になります。


function my_change_lv(){
	if(stage == 10){
		lv = 2;
	}
	else if(stage == 20){
		lv = 3;
	}
}

ステージ数に応じてレベルを切り替えているだけです。

これを「my_get_key()」の前半に設置します。


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

これで「10」ステージごとにレベルを切り替えることができます。

問題の配列もレベルに連動してるので、自動的に切り替わります。

背景の切り替え

あとは背景の切り替えを「my_set_stage()」に加えるだけです。


function my_set_stage(){
	document.getElementById("input_mondai_box").innerHTML = "";
	document.getElementById("mondai_box").style.left = mondai_left + "px";
	document.getElementById("mondai_box").innerHTML = lv_all_ary[lv - 1][ransuu];
	document.getElementById("marubatu_box").innerHTML = 
		"結果：　　　　　残り問題数：" + (MAX_STAGE - stage);
	if(stage == 10){
		document.getElementById("background_img_box").style.backgroundImage = "url(img2.jpg)";
	}
	else if(stage == 20){
		document.getElementById("background_img_box").style.backgroundImage = "url(img3.jpg)";
	}
}

さきほどと同じようにステージ数に応じて「background_img_box」の「.style.backgroundImage」を書き換えれば背景の切り替えも完了です！