首頁 > web前端 > js教程 > 用JavaScript模擬實作打字小遊戲!

用JavaScript模擬實作打字小遊戲!

藏色散人
發布: 2022-08-07 10:34:42
轉載
1986 人瀏覽過

今日閒來無事,想試試模擬打字遊戲,下面是效果圖,會記錄判斷打字,如果在外圍添加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中文網其他相關文章!

相關標籤:
來源:jb51.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板