JavaScript を使用してタイピング ゲームをシミュレートします。

藏色散人
リリース: 2022-08-07 10:34:42
転載
1929 人が閲覧しました

今日は何もすることがないので、疑似タイピングゲームをしてみたいと思います。以下はタイピングを記録して判定するレンダリングです。周辺にsetInterval関数を追加すると、タイピング速度をテストすることができます。

html

<div class="wrapper">
  <div id="text">A</div>
  <input type="text" id="ipt">
</div>
ログイン後にコピー

css

body,
html {
  width: 100%;
  height: 100%;
 }

 .wrapper {
  width: 400px;
  margin: 20px auto;
 }

 div {
  font-size: 100px;
  font-weight: 900;
  text-align: center;

 }
 input{
  width: 400px;
  margin: 20px auto;
 }
ログイン後にコピー

js

var str = &#39;ABCDEFGHIJKLMNOPQRSTUVWXYZ&#39;
var text = document.getElementById(&#39;text&#39;) 
var ipt = document.getElementById(&#39;ipt&#39;)
var res;
var newRes;
var random = Math.round(Math.random() * 25);
var count = 0
 window.onkeyup = function (e) {
  var random = Math.round(Math.random() * 25);
  newRes = str[random]
  res = text.innerHTML
  text.innerHTML = newRes
  if(e.keyCode == res.charCodeAt(0)){
   count++;
   ipt.value = &#39;&#39;;
  }else{
   alert(&#39;game over&#39; + &#39;   &#39; +&#39;您的得分是&#39;+ &#39;:&#39; + count)
   count = 0;
   ipt.value = &#39;&#39;;
  }

 }
ログイン後にコピー

関連する推奨事項: [JavaScript ビデオ チュートリアル]

以上がJavaScript を使用してタイピング ゲームをシミュレートします。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:jb51.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!