js實現(xiàn)打字小游戲
更新時間：2019年12月17日 09:13:22 作者：weixin_45789779
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)打字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今日閑來無事，想試一試模擬打字游戲，下面是效果圖，會記錄判斷打字，如果在外圍添加setInterval函數(shù)，可以實現(xiàn)測試打字速度的功能。
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 = '';
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
鼠標(biāo)事件的抓取實現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
這是我在給庫中添加事件的時候?qū)懙奶砑邮录姆椒ǎ∵@個方法實現(xiàn)了跨瀏覽器之間的方法！2009-02-02
js入門之Function函數(shù)的使用方法【新手必看】
本篇文章主要介紹js Function函數(shù)的使用方法，應(yīng)該對初學(xué)Js的朋友們會有所幫助,下面就隨小編一起來看下吧2016-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript快速實現(xiàn)日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
漸進(jìn)式Web應(yīng)用是一種結(jié)合了網(wǎng)頁和原生移動應(yīng)用（Native App）優(yōu)點的新型應(yīng)用開發(fā)模式,這篇文章給大家介紹JS加密解密之保存到桌面書簽的操作方法,感興趣的朋友跟隨小編一起看看吧2024-03-03
一個特帥的展示圖片的js+css...2006-08-08
JS+CSS實現(xiàn)仿觸屏手機(jī)撥號盤界面及功能模擬完整實例
這篇文章主要介紹了JS+CSS實現(xiàn)仿觸屏手機(jī)撥號盤界面及功能模擬完整實例,可以實現(xiàn)逼真模擬手機(jī)撥號盤界面并實現(xiàn)點擊輸入對應(yīng)號碼的功能,需要的朋友可以參考下2015-05-05
使用JavaScript 實現(xiàn)時間軸與動畫效果的示例代碼(前端組件化)
這篇文章主要介紹了使用JavaScript 實現(xiàn)時間軸與動畫效果的示例代碼(前端組件化),本文重點給大家介紹基礎(chǔ)的動畫類實現(xiàn)時間軸，通過示例代碼給大家介紹的很詳細(xì)，需要的朋友可以參考下2021-04-04
js 單引號替換成雙引號,雙引號替換成單引號的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 單引號替換成雙引號,雙引號替換成單引號的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)幻燈片輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08