js實(shí)現(xiàn)打字小游戲

更新時(shí)間：2019年12月17日 09:13:22 作者：weixin_45789779

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)打字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今日閑來(lái)無(wú)事，想試一試模擬打字游戲，下面是效果圖，會(huì)記錄判斷打字，如果在外圍添加setInterval函數(shù)，可以實(shí)現(xiàn)測(cè)試打字速度的功能。

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;
 }

var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
var text = document.getElementById('text') 
var ipt = document.getElementById('ipt')
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 = '';
  }else{
   alert('game over' + '   ' +'您的得分是'+ ':' + count)
   count = 0;
   ipt.value = '';
  }

 }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
打字

相關(guān)文章

JavaScript實(shí)現(xiàn)獲取設(shè)備網(wǎng)絡(luò)連接信息
作為前端開發(fā)，做好用戶體驗(yàn)是很重要的，日常開發(fā)中我們經(jīng)?？梢杂龅接脩艟W(wǎng)速慢導(dǎo)致靜態(tài)資源加載慢，從而給影響用戶體驗(yàn)，所以本文來(lái)和大家分享一個(gè)有趣的API，可以實(shí)現(xiàn)獲取網(wǎng)絡(luò)信息
2023-05-05
Openlayers測(cè)量距離與面積的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Openlayers測(cè)量距離與面積的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
JavaScript事件學(xué)習(xí)小結(jié)(五）js中事件類型之鼠標(biāo)事件
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)(五）js中事件類型之鼠標(biāo)事件的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
通過DOM腳本去設(shè)置樣式信息
在大多數(shù)場(chǎng)合，我們都用CSS去設(shè)置樣式，但在某些特殊情況下，例如要根據(jù)元素在節(jié)點(diǎn)樹里的位置來(lái)設(shè)置節(jié)點(diǎn)樣式信息時(shí)，目前CSS還沒辦法做到這一點(diǎn)。但利用DOM就可以很輕易的完成。
2010-09-09
JavaScript+Canvas模擬實(shí)現(xiàn)支付寶畫年兔游戲
接近過年了，支付寶的集福的活動(dòng)又開始了，集美們的五福集齊了沒有。每年的集?；顒?dòng)都有一些小游戲，今年也不例外，畫年畫就是其中之一，本篇用canvas來(lái)寫一個(gè)畫年兔的游戲
2023-01-01
ES6 迭代器 Iterator使用總結(jié)
ES6引入了Iterator（迭代器）接口,用于順序訪問可迭代對(duì)象,Iterator接口提供統(tǒng)一的訪問接口,并通過for...of循環(huán)供消費(fèi),本文給大家介紹ES6 迭代器 Iterator使用總結(jié),感興趣的朋友跟隨小編一起看看吧
2025-02-02
JavaScript實(shí)現(xiàn)圖形驗(yàn)證碼完整代碼
很多小伙伴都在學(xué)習(xí)JavaScript,可能也會(huì)有老師提出這樣一個(gè)問題,如何用js編寫一個(gè)簡(jiǎn)單的驗(yàn)證碼,這里就和大家分享一下,這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)圖形驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下
2024-01-01
js實(shí)現(xiàn)接收表單的值并將值拼在表單action后面的方法
這篇文章主要介紹了js實(shí)現(xiàn)接收表單的值并將值拼在表單action后面的方法,涉及JavaScript動(dòng)態(tài)操作字符串及表單元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
JavaScript 異步時(shí)序問題
這篇文章主要介紹了JavaScript 異步時(shí)序問題,幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下
2020-11-11
在IE中調(diào)用javascript打開Excel的代碼(downmoon原作)
在IE中調(diào)用javascript打開Excel的代碼(downmoon原作)...
2007-04-04