guess the pronunciation of a kanji's game

Click here for free DL of the app version that can save data.

No:1484

234

←

Prev Next

→

guess the pronunciation of a kanji
Developer sayaensm｜Date and time 23/6/18 17:20:07
Build time 47.593 sec｜Game capacity 3.042KB｜

Script

拾い物ゲームというゲームを実装しました。スマホで遊べるように作成し、絵文字も多用しています。ゲームの概要は、画面に出現する絵柄の漢字の読みを当てるというものです。制限時間内により多くの問題に正解することが目的です。以下が実際のプログラムになります。

残り時間:

正解:

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>拾い物ゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body{
			text-align: center;
			font-size: 3rem;
		}
		button{
			background-color: #FFC107;
			border: none;
			color: white;
			padding: 20px;
			text-align: center;
			font-size: 2.5rem;
			margin: 10px;
			border-radius: 20px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="question"></div>
	<div>残り時間:<span id="time_left"></span></div>
	<div>正解:<span id="score"></span></div>
	<button id="start_btn">START</button>

let time_left = 30;
		let score = 0;
		let is_playing = false;

let start_btn = document.getElementById("start_btn");
		let question_div = document.getElementById("question");
		let time_left_div = document.getElementById("time_left");
		let score_div = document.getElementById("score");

start_btn.onclick = function(){
			if(!is_playing){
				is_playing = true;
				score = 0;
				time_left = 30;
				start_btn.innerHTML = "RESTART";

run_game();
			}
			else{
				alert("もう一度遊ぶ場合はリロードしてください");
			}
		}

function run_game(){
			update_game();

let timer = setInterval(function(){
				time_left--;
				update_game();

if(time_left <= 0){
					clearInterval(timer);
					game_over();
				}
			}, 1000);

let kanji_index = Math.floor(Math.random() * kanji_list.length);
			question_div.innerHTML = kanji_list[kanji_index].kanji;
			let answer = kanji_list[kanji_index].yomi;

document.onkeydown = function(event){
				let key = event.key;
				let input_str = question_div.innerText + key;

if(input_str.length === answer.length){
					if(input_str === answer){
						score++;
						update_game();
					}
					else{
						game_over();
					}

kanji_index = Math.floor(Math.random() * kanji_list.length);
					question_div.innerHTML = kanji_list[kanji_index].kanji;
					answer = kanji_list[kanji_index].yomi;
				}
			}
		}

function update_game(){
			time_left_div.innerHTML = time_left;
			score_div.innerHTML = score;
		}

function game_over(){
			is_playing = false;
			alert("ゲームオーバー\nスコア:" + score);
			start_btn.innerHTML = "START";
		}
	</script>
</body>
</html>