JavaScript タイピングゲーム

この記事では、タイピングゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

効果画像:

需要分析:

1. char divに入力する文字を大文字で表示する
2. 結果divに常に98%などの正解率を表示する
3. キーイベントをドキュメントにバインドする
4. 入力内容が文字と一致している場合は、正しいアニメーションが表示されます: アニメーションズームイン、入力文字が置き換えられます。
5. 入力内容が文字と一致しない場合は、エラーアニメーションが表示されます: アニメーションシェイクエラー
6. 正解か不正解かに関わらず、結果の正解率は随時更新されます。

ソースコード:

HTML部分

<ミアン>
 <div id="char">あ</div>
 <div id="result">画面に表示されている文字を押してください</div>
</ミアン>

CSS部分

1. 特殊効果を実現するには、まずanimate.cssファイルを作成し、その中にアニメーション効果をカプセル化します。

/*アニメーション.css*/
.アニメーション{
 -webkit アニメーション期間: 1 秒;
 アニメーション期間: 1秒;
 -webkit-animation-fill-mode: 両方;
 アニメーション塗りつぶしモード: 両方;
}

.アニメーション.無限{
 -webkit-アニメーションの反復回数: 無限;
 アニメーションの反復回数: 無限;
}

.animated.hinge {
 -webkit アニメーション期間: 2 秒;
 アニメーション期間: 2秒;
}

.animated.flipOutX、
.アニメーション.flipOutY,
.animated.bounceIn、
.animated.bounceOut {
 -webkit アニメーション期間: .75 秒;
 アニメーション期間: .75秒;
}
@-webkit-keyframes ズームイン {
 から {
 不透明度: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 変換: scale3d(.3, .3, .3);
 }

 50% {
 不透明度: 1;
 }
}

@keyframes ズームイン {
 から {
 不透明度: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 変換: scale3d(.3, .3, .3);
 }

 50% {
 不透明度: 1;
 }
}

.ズームイン{
 -webkit アニメーション名: zoomIn;
 アニメーション名: zoomIn;
}
  .アニメーション{
 -webkit アニメーション期間: 1 秒;
 アニメーション期間: 1秒;
 -webkit-animation-fill-mode: 両方;
 アニメーション塗りつぶしモード: 両方;
}
@-webkit-keyframes シェイク {
 から、まで
 -webkit-transform: translate3d(0, 0, 0);
 変換: translate3d(0, 0, 0);
 }

 10%、30%、50%、70%、90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 変換: translate3d(-10px, 0, 0);
 }

 20%、40%、60%、80% {
 変換: translate3d(10px, 0, 0);
 変換: translate3d(10px, 0, 0);
 }
}

@keyframes シェイク {
 から、まで
 -webkit-transform: translate3d(0, 0, 0);
 変換: translate3d(0, 0, 0);
 }

 10%、30%、50%、70%、90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 変換: translate3d(-10px, 0, 0);
 }

 20%、40%、60%、80% {
 変換: translate3d(10px, 0, 0);
 変換: translate3d(10px, 0, 0);
 }
}

.シェイク{
 -webkit-アニメーション名: shake;
 アニメーション名: shake;
}

2.cssメインコード、アニメーション効果なしバージョン

<スタイル>
 体 {
  マージン: 0;
  /* エラスティックレイアウトをオンにし、エラスティックレイアウト内のサブ要素を中央に水平および垂直に揃えます */
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  /*テキストを中央揃えにする*/
  テキスト配置: 中央;
  /*背景色のグラデーションを設定する*/
  背景: 放射状グラデーション(円、#444、#111、#000);
 }

 #文字 {
  フォントサイズ: 400px;
  色: ライトグリーン;
  /*テキストの影を設定する*/
  /*text-shadow: 水平位置 垂直位置 ぼかし距離 影の色*/
  /*位置は負の値でも構いません*/
  テキストシャドウ: 0 0 50px #666;
 }

 ＃結果 {
  フォントサイズ: 20px;
  色: #888;
 }

 /*ID 文字とクラス名エラーを持つ div 要素を検索*/
 #char.エラー{
  色: 赤;
 }
</スタイル>

JavaScript

1. コードを簡素化するために、まずよく使われるカスタムコンストラクタをカプセル化します。

<スクリプト>
// 関数を定義する: rand
// パラメータ: 最小整数、最大整数 // 戻り値: 2 つの整数間のランダムな整数 function rand(min, max) {
 parseInt(Math.random() * (max - min + 1)) + min を返します。
} 
</スクリプト>

2. jsのメイン部分では、カプセル化された関数を使用してそれを呼び出す必要があります。

<スクリプト>
 // 関連する要素を取得します。var charDiv = document.getElementById('char');
 var resultDiv = document.getElementById('result');

 // code はページ上の文字のコードを記録するために使用されます。グローバル変数を使用すると、どこでも使用できます。var code, tirme;

 var rightNum = 0;//正しい数値 var wrongNum = 0;//間違った数値 // 1 char div に入力する文字を大文字で表示します showChar();
 // 3 キーイベントをドキュメントにバインドする document.onkeyup = function (e) {
 // イベント オブジェクト e = window.event || e;
 // キーコードを取得します。 var keyCode = e.keyCode || e.which;
 // 4 入力内容がcharと一致する場合 if (keyCode == code) {
  // 正しいアニメーションを表示する: アニメーション化されたズームイン
  charDiv.className = "アニメーションズームイン";
  右数値++;
  表示文字()
 }
 // 5 入力内容がcharと矛盾する場合 else {
  // エラーアニメーションを表示: アニメーション化されたシェイクエラー
  charDiv.className = "アニメーションシェイクエラー";
  間違った数値++
 }
 // 次回アニメーションを実行するには、このアニメーションが終了したらクラス名を削除します setTimeout(function () {
  charDiv.className = "";
 }, 500)
 // 6 正解か不正解かにかかわらず、結果の正解率は随時更新されます // 正解率 = 正解回数 / 合計回数 resultDiv.innerHTML = "正解率:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

 }
 // 関数: char divに入力する文字をランダムに表示する: 大文字 function showChar() {
  // まず文字コードをランダムに選択します code = rand(65, 90);
  // 文字に変換します var char = String.fromCharCode(code);
  // char div に表示します charDiv.innerHTML = char;
 }
</スクリプト>

合計コード

<html>

<ヘッド>
 <メタ文字セット="utf-8">
 <title>タイピングゲーム</title>
 <!--animate.css アニメーション ライブラリの紹介-->
 <link rel="スタイルシート" href="animate.css" >
 <スタイル>
 体 {
  マージン: 0;
  /* エラスティックレイアウトをオンにし、エラスティックレイアウト内のサブ要素を中央に水平および垂直に揃えます */
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  /*テキストを中央揃えにする*/
  テキスト配置: 中央;
  /*背景色のグラデーションを設定する*/
  背景: 放射状グラデーション(円、#444、#111、#000);
 }

 #文字 {
  フォントサイズ: 400px;
  色: ライトグリーン;
  /*テキストの影を設定する*/
  /*text-shadow: 水平位置 垂直位置 ぼかし距離 影の色*/
  /*位置は負の値になる場合があります*/
  テキストシャドウ: 0 0 50px #666;
 }

 ＃結果 {
  フォントサイズ: 20px;
  色: #888;
 }

 /*ID 文字とクラス名エラーを持つ div 要素を検索*/
 #char.エラー{
  色: 赤;
 }
 </スタイル>
</head>

<本文>
 <ミアン>
 <div id="char">あ</div>
 <div id="result">画面に表示されている文字を押してください</div>
 </ミアン>
</本文>

</html>
<スクリプト>
 // 関数を定義する: rand
 // パラメータ: 最小整数、最大整数 // 戻り値: 2 つの整数間のランダムな整数 function rand(min, max) {
 parseInt(Math.random() * (max - min + 1)) + min を返します。
 }
</スクリプト>
<スクリプト>
 // 関連する要素を取得します。var charDiv = document.getElementById('char');
 var resultDiv = document.getElementById('result');

 // code はページ上の文字のコードを記録するために使用されます。グローバル変数を使用すると、どこでも使用できます。var code, tirme;

 var rightNum = 0;//正しい数値 var wrongNum = 0;//間違った数値 // 1 char div に入力する文字を大文字で表示します showChar();
 // 3 キーイベントをドキュメントにバインドする document.onkeyup = function (e) {
 // イベント オブジェクト e = window.event || e;
 // キーコードを取得します。 var keyCode = e.keyCode || e.which;
 // 4 入力内容がcharと一致する場合 if (keyCode == code) {
  // 正しいアニメーションを表示する: アニメーション化されたズームイン
  charDiv.className = "アニメーションズームイン";
  右数値++;
  表示文字()
 }
 // 5 入力内容がcharと矛盾する場合 else {
  // エラーアニメーションを表示: アニメーション化されたシェイクエラー
  charDiv.className = "アニメーションシェイクエラー";
  間違った数値++
 }
 // 次回アニメーションを実行するには、このアニメーションが終了したらクラス名を削除します setTimeout(function () {
  charDiv.className = "";
 }, 500)
 // 6 正解か不正解かにかかわらず、結果の正解率は随時更新されます // 正解率 = 正解回数 / 合計回数 resultDiv.innerHTML = "正解率:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

 }
 // 関数: char divに入力する文字をランダムに表示する: 大文字 function showChar() {
  // まず文字コードをランダムに選択します code = rand(65, 90);
  // 文字に変換します var char = String.fromCharCode(code);
  // char div に表示します charDiv.innerHTML = char;
 }
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: