この記事では、タイピングゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 効果画像: 需要分析: 1. char divに入力する文字を大文字で表示する ソースコード: 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL で行を列に変換したり、列を行に変換したりする詳細な例
序文最近、私は夜に時間を取って「CSS World」という本を読んでいます。この本は非常に興味深く、...
mysql-5.7.17-winx64 は MySQL の最新バージョンです。インストールは無料で...
1. データベースにログインするには、rootユーザーを使用することをお勧めします。 mysql -...
目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...
IE、Firefox、Chrome ブラウザでの表示効果は、...
隠れる前に:隠れた後: CS: ...コードをコピーコードは次のとおりです。オーバーフロー:非表示;...
CSS には、一般的には使用されない 2 つの疑似クラス、before と :after があります...
よく遭遇する問題: 下部の要素を「下部に貼り付ける」効果を CSS でどのように実現するか。この記事...
目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...
Web サービスは、アプリケーション間の通信に関係します。 WSDL は、XML ベースの Web ...
システムが遅いと感じてソースを変更したい場合は、別の記事で整理しました https://blog.c...
標準 CSS3 を使用して要素の影の効果を実現するには、2 つの手順があります。1 つ目は一般的なb...
この記事では、マウスがテーブルの行を通過するときにJavaScriptを使用して色ラベルを表示する方...
まず、SFTP プロトコルと FTP プロトコルの違いを理解してください。ここでは詳細には触れません...
詳細な手順は次のとおりです。 1. ディスク容量を確認します。 [root@localhost バッ...