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 で行を列に変換したり、列を行に変換したりする詳細な例

推薦する

CSS の inline-block の最小幅値の詳細な説明

序文最近、私は夜に時間を取って「CSS World」という本を読んでいます。この本は非常に興味深く、...

MySQL 5.7.17 最新インストールチュートリアル(画像とテキスト付き)

mysql-5.7.17-winx64 は MySQL の最新バージョンです。インストールは無料で...

MySQL 8.0.18はデータベースにユーザーを追加し、権限を付与します

1. データベースにログインするには、rootユーザーを使用することをお勧めします。 mysql -...

ミニプログラムの基本的な使用方法の知識ポイント(非常に包括的で、お勧めです!)

目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...

IE、Firefox、Chromeブラウザではスペースの表示が異なります

&nbsp;&nbsp;IE、Firefox、Chrome ブラウザでの表示効果は、...

div が隠しテキストを超え、div 部分の向こうの CSS コードを隠します

隠れる前に:隠れた後: CS: ...コードをコピーコードは次のとおりです。オーバーフロー:非表示;...

CSS の ::before と ::after 疑似要素について知らないこと

CSS には、一般的には使用されない 2 つの疑似クラス、before と :after があります...

CSS でフッターの「下部吸収」効果を実現

よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...

MySQLクエリ最適化プロセスを理解する

目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...

W3C チュートリアル (13): W3C WSDL アクティビティ

Web サービスは、アプリケーション間の通信に関係します。 WSDL は、XML ベースの Web ...

Centos 7 64 ビット デスクトップ バージョンのインストール グラフィック チュートリアル

システムが遅いと感じてソースを変更したい場合は、別の記事で整理しました https://blog.c...

CSS3 フィルターの違いと応用の詳しい説明:ドロップシャドウフィルターとボックスシャドウ

標準 CSS3 を使用して要素の影の効果を実現するには、2 つの手順があります。1 つ目は一般的なb...

JavaScript は、マウスがテーブル行を通過するときに色の識別を実装します。

この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方...

Linux クラウド サーバー上に SFTP サーバーとイメージ サーバーを構築する方法

まず、SFTP プロトコルと FTP プロトコルの違いを理解してください。ここでは詳細には触れません...

Linux で MySQL データベースのスケジュールされたバックアップを実装する簡単な方法

詳細な手順は次のとおりです。 1. ディスク容量を確認します。 [root@localhost バッ...