javascript實(shí)現(xiàn)簡單打字游戲的方法

發(fā)布時(shí)間：2021-04-12 10:14:04 來源：億速云閱讀：419 作者：小新欄目：web開發(fā)

這篇文章主要介紹了javascript實(shí)現(xiàn)簡單打字游戲的方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體內(nèi)容如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>傳智打字游戲</title>
<style type="text/css">
 .label{
 position:absolute;left: 0px;
 }
</style>
<script type="text/javascript" src="game.js"></script>
</head>
<body>
 <div id="msg"></div>
 <input id="startBtn" type="button" value="開始游戲" οnclick="startGame(this)"/>
 <input type="button" value="停止游戲" οnclick="stopGame()"/>
</body>
</html>

var CODE = "QWERTYUIOPASDFGHJKLZXCVBNM";
var codeArray = [];
var number = 0; 
 
//創(chuàng)建隨機(jī)字母 
function createCode(){
 //0-25
 var index = parseInt(Math.random()*26);
 return CODE.charAt(index);
};
 
//創(chuàng)建顯示label方法
function createLabel(code){
 /**
 * <label class="label">
 A
 </label>
 */
 var label = document.createElement("label");
 label.className = "label";
 label.style.top = "50px";
 label.innerHTML = code;
 label.code = code;
 
 var html = document.documentElement;
 
 //所有l(wèi)abel標(biāo)簽的x坐標(biāo)
 var labelX = parseInt(Math.random()*html.clientWidth);
 if(labelX>100){
 labelX-=20;
 }
 
 label.style.left = labelX+"px";
 
 return label;
}
 
window.onload = function(){
 document.getElementById("startBtn").disabled = false;
 
 
 //注冊鍵盤事件
 document.documentElement.οnkeydοwn=function(event){
 var keyCode = event.keyCode; //獲取按下的嗎
 var code = String.fromCharCode(keyCode);//A-Z
 for ( var i = 0; i < codeArray.length; i++) {
 //label標(biāo)簽
 var label = codeArray[i];
 if(label.code==code){
  clearInterval(label.interval_id);
  label.parentNode.removeChild(label);
  codeArray.splice(i,1);
  number+=10;
  
  document.getElementById("msg").innerHTML = number+"分";
 break;
 }
 }
 };
};
 
//讓label標(biāo)簽慢慢的從上向下移動(dòng)
function runLabelTop(label){
 
 //獲取頁面的高度
 var height = Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight);
 
 label.interval_id = setInterval(function(){
 //50px
 var top = parseInt(label.style.top);
 top+=1;
 //判斷l(xiāng)abel是否已經(jīng)超過頁面的高度
 if(top>height-30){
 removeLabel(label,false);
 }else{
 label.style.top = top+"px";
 }
 },10);
}
 
//flag = false用戶沒有按下該字母
function removeLabel(label,flag){
 clearInterval(label.interval_id);
 label.parentNode.removeChild(label);
 codeArray.shift();
 number-=20;
 document.getElementById("msg").innerHTML = number+"分";
}
 
var game_id = null;
 
//開始游戲
function startGame(startButton){
 
 startButton.disabled = true;
 
 game_id = setInterval(function(){
 //創(chuàng)建要顯示的字符
 var code =createCode();
 //創(chuàng)建一個(gè)label顯示字符
 var label = createLabel(code);
 
 //讓label標(biāo)簽慢慢向下移動(dòng),修改標(biāo)簽的style.top屬性
 runLabelTop(label);
 
 //把label標(biāo)簽節(jié)加入到頁面中
 document.body.appendChild(label);
 codeArray.push(label);
 },1000);
}
 
//停止游戲
function stopGame(){
 clearInterval(game_id);
 for ( var i = 0; i < codeArray.length; i++) {
 clearInterval(codeArray[i].interval_id);
 codeArray[i].parentNode.removeChild(codeArray[i]);
 }
 codeArray = [];
 document.getElementById("startBtn").disabled = false;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“javascript實(shí)現(xiàn)簡單打字游戲的方法”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

javascript實(shí)現(xiàn)簡單打字游戲的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽