溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了javascript實現簡單打字游戲的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體內容如下
<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;
//創建隨機字母
function createCode(){
//0-25
var index = parseInt(Math.random()*26);
return CODE.charAt(index);
};
//創建顯示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;
//所有label標簽的x坐標
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標簽
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標簽慢慢的從上向下移動
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;
//判斷label是否已經超過頁面的高度
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(){
//創建要顯示的字符
var code =createCode();
//創建一個label顯示字符
var label = createLabel(code);
//讓label標簽慢慢向下移動,修改標簽的style.top屬性
runLabelTop(label);
//把label標簽節加入到頁面中
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;
}感謝你能夠認真閱讀完這篇文章，希望小編分享的“javascript實現簡單打字游戲的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
