スポンサーリンク

【JaveScript】タイピングゲームの制作

typewriterCode

ブラウザ上で動くミニアプリです。
表示された文字列をタイピングすると、ランダムに次の単語が出てきます。

  

  • SUSHI!

body内には以下のタグのみ記述します。

<div id="game">
   <ul>
     <li>SUSHI!</li>
     <li id="target"></li>
     <li id="result"></li>
   </ul>
 </div>

CSSの記述

CSSは文字の大きさや配置の物です。

JavaScriptの記述

6つのワードをランダムに表示して、タイプするごとに消えて次のワードに進みます。
終了後は「Finished!」が表示されます。

検討事項

ランダムも無くしてしまえば、さらにシンプルなタイピングゲームになります。
配列の中の言葉を変えていけば、カスタマイズができます。
この辺りを変えていくところから、プログラミングに興味を持たせられるといいですね。
そういえば、最後にボタンが出てきて最初に戻れるとさらにゲームっぽくなります。
今後の課題ですね。

コメント

タイトルとURLをコピーしました