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