溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下js如何實現打字動畫游戲，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
示例代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,button{
margin: 0;
padding: 0;
}
body {
background: #333;
}
#game {
width: 400px;
margin: 0 auto;
}
#start {
width: 80px;
height: 40px;
}
span {
margin: 20px;
color: white;
}
.letter {
position: absolute;
color: yellow;
font: bold 30px "Arial";
}
</style>
<script>
window.onload= function () {
var start = document.getElementById("start");
var scroll = document.getElementById("scroll");
var time = document.getElementById("time");
var g = 1 ;//Gravity
var timenum = 0 ;//時間的計數
var num = 0 ;//成績的計數
var gameover = false ;
var timeandtime = null;
var letters = null ;
//字母放在一個字符串里面，隨機選取
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
//點擊開始按鈕，字母會自動生成，從頂部，以隨機速度落下
//用戶操作：按鈕對應字母的按鈕，然后字母就會消失
//用戶沒有點擊到的按鈕到達底部以后會回到頂上重新落下；
//用戶清除所有字母后，彈出對話框，顯示分數和文字。
//封裝一個對象，里面包含獲取事件對象，頁面位置，清除冒泡，獲取事件目標的兼容性方法
var eventUtil = {
getEvent: function (event) {
return event || window.event;
},
getPageX: function (event) {
return event.pageX || event.clientX + document.documentElement.scrollLeft;
},
getPageY: function (event) {
return event.pageY || event.clientY + document.documentElement.scrollTop;
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
getTarget: function (event) {
return event.target || event.srcElement;
}
};
start.onclick= function () {
for(var i = 0 ;i<26;i++){
new letter();
}
letters = document.body.children;//將頁面中所有的div全部放入一個偽數組中，第一個除外，屬于game，因此遍歷從1開始
//在鍵盤上，按下對應的字母鍵，字母會立即消失，同時分數會增加，并且在上面重新生成；
document.onkeydown = function (event) {
var evt = eventUtil.getEvent(event);
var keychar = String.fromCharCode(evt.keyCode);//將按下的字母鍵盤碼轉換成直接的大寫字母
for(var i = 1 ;i<letters.length;i++){
if(keychar===letters[i].innerHTML){
num++;
scroll.innerHTML = num;
document.body.removeChild(letters[i]);
}
}
}
timeandtime=setInterval(function () {
timenum = timenum + 1 ;
console.log(letters);
if(letters.length==1){//當偽數組的長度只有一個時，那么游戲就結束
gameover = true ;
clearInterval(timeandtime);
alert("用時"+timenum+"秒，再接再厲！突破10秒！");
} else {
time.innerHTML = timenum;
}
},1000)
}
//封裝函數
function letter(){
this.x=Math.random()*900+100; //設置位置在100-1000之間
this.y=0;
this.speedY = Math.random()*4+1; //速度隨機設置在1-5之間
this.value = str[parseInt(Math.random()*25)]; //在26個字母中隨機生成一個字母
var letDiv = document.createElement("div");
letDiv.className = "letter";
letDiv.style.top = this.y+"px";
letDiv.style.left = this.x+ "px";
letDiv.innerHTML = this.value;
document.body.appendChild(letDiv);
//字母往下掉
var that = this ;
this.timer=setInterval(function () {
//leader = leader + step;
that.y = that.y + that.speedY;
if(that.y>=client().height-letDiv.offsetHeight){
that.y = 0;
that.x = Math.random()*900+100;
}
if(!gameover){
letDiv.style.left = that.x + "px";
letDiv.style.top = that.y + "px";
} else {
clearInterval(that.timer);
}
},15)
}
// 獲取可視窗口的寬度和高度窗,兼容性問題
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}
}
</script>
</head>
<body>
<div id="game">
<button id="start">開始</button>
<span>得分:<i id="scroll">0</i></span>
<span>計時:<i id="time">0</i></span>
</div>
</body>
</html>以上是“js如何實現打字動畫游戲”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
