この記事の最終更新日: 2021年3月16日

はじめに
今回もTOEFLタイピングアプリの進捗を報告していきます。
今回はなかなか良い機能を追加できました。
タイピングアプリはこちらから遊ぶことができます。
タイピングゲーム
2021年3月16日追記
最新のタイピングアプリはこちらです。
Heroku | Application Error
前回の記事はこちら
スクリーンショット



追加機能
今回は以下の機能を追加しました。
- 音声読み上げ機能の追加
- スタートボタンの追加
- コースごとの総単語数を追加
- スペースキーを押下時に画面スクロールしないように修正
- メニュー画面のレイアウト修正
音声読み上げ機能を追加するには
英語学習で必須ともいえる、音声を追加しました。
タイピングしながらリスニングできるようになりました。
これでかなり実用性が上がったのではないでしょうか。
読み上げにはブラウザのAPIを呼び出して使っています。
const speech = new SpeechSynthesisUtterance();
speech.lang = 'en-US';
speechSynthesis.cancel();
speech.text = text;//読み上げたい単語を代入
speechSynthesis.speak(speech);
ただし、呼び出す際はユーザー操作(ボタン押下などのイベント)からでないと警告が発生するようです。
このアプリも警告が出ているので、今後修正していきます。
スタートボタンの配置
ゲーム開始時のボタンを用意しました。
音声の注意喚起などが目的です。
ボタンの位置は、cssで直接変えられないので<div>タグで囲んで領域を設定するなど、
レイアウトの工夫が必要です。
メニュー画面のレイアウト
リストタグ<ul><li>を使って整えました。
今後cssファイルから、デザインを整えていく予定です。
スペースキー押下時に画面スクロールしないようにするには
一通りの単語をタイピングし終わったら、スペースキーで最初に戻るようにしていました。
しかし、スペースキーを押すと画面がスクロールしてしまうという問題があります。
そこで、以下のコードをタイピング後の処理に書くことで解決しました。
window.onkeydown = function(e) {
return !(e.keyCode == 32);
}
今後について
タイピングゲームの本機能をもう少し修正したら、コースを増やしていきたいです。
イラストや写真も一緒に見れるようにすることも検討中です。
以上、daigoroでした。
次の記事はこちら

大阪のエンジニアが書いているブログ。
コメント