JavaScriptでタイピング練習ゲームを作成しよう！その４　ランキング画面などの修正(ほぼ完成)　

概要

「クリプトタイピング咲耶」は、「クリプトニンジャ咲耶」のアニメのタイトル全25問からランダムで出題されるタイピングゲームです。表示された日本語をローマ字で正確に入力し、スコアを稼ぎましょう。ゲーム終了後にはランキングに登録し、他のプレイヤーと競い合うことができます。このブログでは、「クリプトタイピング咲耶」のインストール方法からゲームの遊び方、注意点まで詳しく解説します。

これまでの制作経緯とコードは下記になります。

ゲームは下記のリンクから試せます。

https://chemtoollab.com/game/sakuya-typev1.2/index.html

使用例

1. ゲームを開始すると、ランダムな日本語と対応するローマ字が表示されます。
2. ローマ字を入力し、正確に入力できると次の単語に進みます。
3. 10問の単語を入力し終えるとゲーム終了です。スコアとタイムが表示されます。
4. 高得点の場合は、名前とコメントを入力してランキングに登録できます。

必要なプログラムとインストール方法

このゲームを動作させるために必要なプログラムは以下の通りです。

必要なファイル

• index.html
• style.css
• script.js
• create_db.php
• save_ranking.php
• get_rankings.php

インストール方法

1. ファイルの配置 上記のファイルをサーバーの同じディレクトリに配置します。
2. データベースの作成 create_db.php をサーバーで一度実行してデータベースを作成します。
   php create_db.php
3. 必要なパーミッションの設定 データベースファイル (rankings.db) が書き込み可能であることを確認してください。
   chmod 777 rankings.db

使用手順

1. ゲームの開始

1. ゲームを開く
   • ブラウザで index.html を開きます。
2. ローマ字入力方法の選択
   • ゲーム開始前に、ローマ字の入力方法をラジオボタンで選択します。
3. ゲームスタート
   • タイトル画面で「ゲームを開始」ボタンをクリックします。

2. タイピングのルール

1. 単語の入力
   • 表示された日本語に対応するローマ字を入力します。
   • 正しいローマ字を入力すると次の単語が表示されます。
2. スコアの計算
   • 1文字正確に入力するごとに10点が加算されます。
   • 間違えた文字を入力すると5点減点されます。

3. ゲームの終了

1. ゲーム終了後
   • 10問入力し終えるとゲーム終了です。
   • スコアとタイムが表示されます。
2. ランキング登録
   • 高得点の場合は、名前とコメントを入力してランキングに登録できます。
   • 登録後は「送信」ボタンを押してください。

4. ランキングの確認

1. ランキング表示
   • タイトル画面で「ランキング表示」ボタンをクリックすると、現在のランキングが表示されます。
   • ランキングはスクロールして全体を確認できます。

注意点

• 入力モードの確認
  • ゲームを開始する前に、キーボードの入力モードが半角英数字になっていることを確認してください。
• ランキング登録の制限
  • 名前は最大50字、コメントは最大100字まで入力できます。
• ランキングの更新
  • ランキングが反映されるまでには約1分かかります。登録後はしばらく待ってからランキングを確認してください。

プログラム

下記のコードをメモ帳などに丸々コピーしてそれぞれファイル名を指定してください。

sakuya-typev2

1 ファイル 9.97 KB

ダウンロード

あるいは、下のテキストファイルをダウンロードし、「.txt」を「.py」に変えることでそのまま使えます。

まとめ

「クリプトタイピング咲耶」は、タイピングスキルを楽しみながら向上させることができるゲームです。ランキング機能を利用して、他のプレイヤーと競い合うことで、さらにモチベーションが高まります。是非プレイして、タイピングスキルを磨いてください。