js實(shí)現(xiàn)打字小游戲
今日閑來(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;
}
js
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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js入門(mén)之Function函數(shù)的使用方法【新手必看】
本篇文章主要介紹js Function函數(shù)的使用方法,應(yīng)該對(duì)初學(xué)Js的朋友們會(huì)有所幫助,下面就隨小編一起來(lái)看下吧2016-11-11
JS+CSS實(shí)現(xiàn)仿觸屏手機(jī)撥號(hào)盤(pán)界面及功能模擬完整實(shí)例
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿觸屏手機(jī)撥號(hào)盤(pán)界面及功能模擬完整實(shí)例,可以實(shí)現(xiàn)逼真模擬手機(jī)撥號(hào)盤(pán)界面并實(shí)現(xiàn)點(diǎn)擊輸入對(duì)應(yīng)號(hào)碼的功能,需要的朋友可以參考下2015-05-05
使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫(huà)效果的示例代碼(前端組件化)
這篇文章主要介紹了使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫(huà)效果的示例代碼(前端組件化),本文重點(diǎn)給大家介紹基礎(chǔ)的動(dòng)畫(huà)類(lèi)實(shí)現(xiàn)時(shí)間軸,通過(guò)示例代碼給大家介紹的很詳細(xì),需要的朋友可以參考下2021-04-04
js 單引號(hào)替換成雙引號(hào),雙引號(hào)替換成單引號(hào)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 單引號(hào)替換成雙引號(hào),雙引號(hào)替換成單引號(hào)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02

