JavaScript タイピングゲーム

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • クリックナンバーゲームを実装するネイティブJS
  • js でパズルゲームを実装する
  • コメント付きのスネークゲームを実装する js
  • 2048 ゲームを実装するためのネイティブ js
  • JavaScript ジグソーパズルゲーム
  • ネイティブ js でカスタム難易度のマインスイーパ ゲームを実装する
  • Gobangゲームを実現するためのjsキャンバス
  • JavaScript を使って格闘ゲームを書く方法
  • JavaScript ベースのシンプルなマインスイーパ ゲームの実装
  • ライフゲームの JavaScript 実装

<<:  CentOSにDockerをインストールする方法

>>:  MySQL で行を列に変換したり、列を行に変換したりする詳細な例

推薦する

JavaScript における var と let の違い

目次1. スコープはさまざまな方法で表現されます2. 変動昇進と非昇進の違い3. 一時的なデッドゾー...

Tomcat サーバーの応答が遅い場合の解決策

1. 分析的思考1. 機械自身の理由を排除する2. サーバーパフォーマンス分析3. プロジェクト自体...

フレックスレイアウトを使用してページレイアウトを簡単に実装するためのサンプルコード

では、早速コードを見てみましょう。 1. 上部、中央、下部のレイアウト: <!DOCTYPE ...

Nginx ロケーション設定のチュートリアル (ゼロから)

基礎位置の一致順序は、「最初に正規表現に一致し、次に共通表現に一致」です。実際のロケーションの一致順...

Reactはページング効果を実装する

この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的...

Linux での感嘆符コマンド (!) の使用の概要

序文最近、弊社では mbp の設定をしており、ssh を使うことが多くなりました。複雑なコマンドを書...

Windows 上で Nginx+Tomcat クラスタを実装するプロセスの分析

導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...

TypeScript における列挙型の理解と応用シナリオ

目次1. 何ですか2. 使用数値列挙文字列列挙異種列挙自然3. 応用シナリオ要約する1. 何ですか列...

jsはクリックしてカードを切り替える機能を実現します

この記事の例では、クリックしてカードを切り替える機能を実現するためのjsの具体的なコードを共有してい...

テキストまたはJSONを返すようにnginxを設定する方法

特定のインターフェースをリクエストするときに、指定されたテキスト文字列または JSON 文字列を返す...

Linuxでポートが開いているかどうかを確認する方法のまとめ

方法1: lsofコマンドを使用するlsof コマンドを使用して、ポートが開いているかどうかを確認で...

Linux でのマルチスレッドにおけるフォークの紹介

目次質問:ケース(1)子スレッドを作成する前にフォークするケース(2)子スレッドを作成した後にフォー...

Linux システムでのスケジュールされたタスクの紹介

目次1. 計画タスクをカスタマイズする2. 時間を同期する3. 練習する4. セキュリティの問題1....

HTMLの基礎を徹底解説(第1部)

1. WEBを理解するWeb ページは主にテキスト、画像、ハイパーリンクなどの要素で構成されていま...

MySQL mysqladmin クライアントの使用の概要

目次1. サーバーの状態を確認します。 2. ルートパスワードを変更します。 3. mysqlser...