1.作品大概思路：

通過給每一個下落的字母添加定時器，執行的回調函數是改變它的絕對定位的top值。

2.頁面展示

（1）開始頁面

（2）游戲頁面

（3）獲得最高分頁面

3.js代碼實現

<script>window.onload = function(){var gameStart = id_get("gameStart");var game = id_get("game");var start = id_get("start");var describe = id_get("describe");var oprate = id_get("oprate");var des = id_get("des");var cl = id_get("cl");var sel = id_get("sel");var selFir = sel.firstElementChild;var tit = id_get("tit");var cl1 = id_get("cl1");var des = id_get("des");var gameOver = id_get("gameOver");var k = oprate.children[0],t = oprate.children[1],o = oprate.children[2];var advertise = id_get("advertise_div");var flag = 0;var tx_02 = id_get("tx_02");var gameH = 493;var gameW = 662;var x = document.cookie = 0;var max = 0,pjl = id_get("pjl");gameStart.onclick = function(){var e = event || window.event;//這一步是為了兼容性var target = e.srcElement || e.target;//這一步是為了兼容性//下面用到事件的委派//開始if(target.id == "start"){letters = "";gameStart.style.display = "none";game.style.display = "block";sel.style.display = "none";advertise.style.display = "none";}//說明if(target.id == "describe"){des.style.display = "block";cl1.onclick = function(){des.style.display = "none";}}};var timer_kz,letterEles,level = 1,letters = "",score = 0, accu = "0%" ,s = 0,count = 0,startTimeDate = null,endTimeDate = null;oprate.onclick = function(event){var e = event || window.event;var target = e.srcElement || e.target;//下面用到事件的委派//退出按鈕if(target.className == "t"){finished();if(document.getElementsByClassName("k")[0].innerHTML == "暫停"){document.getElementsByClassName("k")[0].innerHTML = "開始";}advertise.style.display = "block";gameStart.style.display = "block";game.style.display = "none";gameOver.style.display = "none";//游戲結束盒子pjl.style.opacity = 0;}//設置按鈕if(target.className == "s"){if(document.getElementsByClassName("s")[0].style.cursor != "not-allowed"){sel.style.display = "block";}}//開始按鈕if(target.className == "k"){target.innerHTML = target.innerHTML == "開始" ? "暫停" : "開始"; if(target.innerHTML == "暫停"){document.getElementsByClassName("s")[0].style.cursor = "not-allowed";if(timer_kz){clearInterval(timer_kz);}startTimeDate = new Date();timer_kz = setInterval(function(){createLetter();letterEles = document.getElementsByClassName("active");},level*1000);zt_after();}else{document.getElementsByClassName("s")[0].style.cursor = "pointer";clearInterval(timer_kz);//關閉創建字母定時器clearAllletteers();//關閉目前game元素中所有字母所在元素的定時器}gameOver.style.display = "none"; advertise.style.display = "none";pjl.style.opacity = 0;}// 結束按鈕if(target.className == "o"){finished();if(document.getElementsByClassName("k")[0].innerHTML == "暫停"){document.getElementsByClassName("k")[0].innerHTML = "開始";}}};//前提：字母對應數組var keyVal = [];function Array_letters(){var str = "abcdefghijklmnopqrstuvwxyz";for(var i=65 ; i <= 90 ; i++ ){keyVal[i] = str.charAt(i - 65);}}Array_letters();//鍵盤按下字母所在元素消失document.onkeydown = function(){//先綁定鍵盤按下事件document.onkeyup = function(){//然后綁定鍵盤松開事件if(k.innerHTML == "暫停"){var codeVal = event.keyCode;if(codeVal >= 65 && codeVal <= 90){count++;}var char = keyVal[codeVal];var exp = eval("/" + char + "/gi");if(char){var index = letters.search(exp);if(index != -1){var top_tx = letterEles[index].style.top;var left_tx = letterEles[index].style.left;game.removeChild(letterEles[index]);tx_02.style.top = top_tx;tx_02.style.left = left_tx;tx_02.style.opacity = 1;setTimeout("tx_02.style.opacity = 0",100);tit.children[0].children[0].innerHTML = ++score;endTimeDate = new Date();if(endTimeDate - startTimeDate <= 60*1000){tit.children[1].firstElementChild.innerHTML = score;}else{tit.children[1].firstElementChild.innerHTML = Math.ceil((score / ((endTimeDate - startTimeDate).toFixed(0) / (60*1000))));}x++;}tit.children[2].firstElementChild.innerHTML = (score / count*100).toFixed(2) + "%";}letters = letters.replace(exp , "");}}}des.onmouseover = function(){id_get("cl1").style.display = "block";}des.onmouseout = function(){id_get("cl1").style.display = "none";}sel.onmouseover = function(){id_get("cl").style.display = "block";}sel.onmouseout = function(){id_get("cl").style.display = "none";}cl.onclick = function(){sel.style.display = "none";level = selFir.value;}//獲取到元素使用樣式的最終值function getStyle(ele,attr){var res = null;if(ele.currentStyle){res = ele.currentStyle[attr];//獲取到元素ele當前的樣式}else{res = window.getComputedStyle(ele,null)[attr];}return parseInt(res);}function startMove(ele){//控制字母落下速度快慢var speed = 1 + Math.ceil(score/100);ele.timer = setInterval(function(){if(parseInt(ele.style["top"]) >= gameH){clearInterval(ele.timer);game.removeChild(ele);letters = letters.replace(letters[0] , "");finished();gameOver.style.display = "block";if(x > max){max = x;gameOver.children[0].innerHTML = "達到最高分"+max;pjl.style.opacity = 1;}else{gameOver.children[0].innerHTML = "最高分數為"+max;}x = 0;document.getElementsByClassName("k")[0].innerHTML = "開始";//這些為點擊事件，點擊按鈕之后初始化游戲得分數據k.onclick = function(){tit.children[0].firstElementChild.innerHTML = 0;tit.children[1].firstElementChild.innerHTML = 0;tit.children[2].firstElementChild.innerHTML = 0 + "%";}t.onclick = function(){tit.children[0].firstElementChild.innerHTML = 0;tit.children[1].firstElementChild.innerHTML = 0;tit.children[2].firstElementChild.innerHTML = 0 + "%";}o.onclick = function(){tit.children[0].firstElementChild.innerHTML = 0;tit.children[1].firstElementChild.innerHTML = 0;tit.children[2].firstElementChild.innerHTML = 0 + "%";} }else{ele.style["top"] = getStyle(ele,"top") + speed + "px";}},10);}//通過id獲取元素function id_get(idName){return document.getElementById(idName);}//創建字母function createLetter(){var span = document.createElement("span");span.className = "active";if(letterEles){for(var i=0;i<letterEles.length;i++){if(letterEles[i].innerHTML == randLetter()){return;}}}var l = randLetter();span.innerHTML = l;letters += l;console.log(letters);span.style["left"] = Math.floor(Math.random()*(gameW - 33)) + "px";span.style.backgroundColor = randBackground();span.style.opacity = 0.8;game.appendChild(span);startMove(span);}//隨機生成字母function randLetter(){var str = "abcdefghijklmnopqrstuvwxyz";return str.charAt(Math.floor(Math.random()*(str.length-1)));}//隨機生成背景顏色function randBackground(){// var bg = ["limegreen","crimson","yellowgreen","skyblue","#666"];// return bg[Math.floor(Math.random()*bg.length)];var str ="0123456789abcde";var colorVal = "#";for(var i=0;i<6;i++){colorVal += str.charAt(Math.floor(Math.random()*(str.length - 1)));}return colorVal;}//清除掉所有字母的元素的定時器function clearAllletteers(){for(var i=0;i<letterEles.length;i++){clearInterval(letterEles[i].timer);}}//暫停之后開始function zt_after(){if(letterEles){for(var i=0 ; i<letterEles.length ; i++){startMove(letterEles[i]);}}}//結束游戲function finished(){clearInterval(timer_kz);timer_kz = undefined;tit.children[0].firstElementChild.innerHTML = 0;tit.children[1].firstElementChild.innerHTML = 0;tit.children[2].firstElementChild.innerHTML = 0 + "%";if(letterEles){for(var i=letterEles.length-1 ; i >= 0 ; i--){game.removeChild(letterEles[i]);}}letters = "";score = 0;count = 0;pjl.style.opacity = 0;}}; </script>

4.所有代碼以及圖片（背景、點擊字母特性，最高分圖片）資源

鏈接: https://pan.baidu.com/s/1LB8TKWoTa0X8eVqFLc3p7g?pwd=1234
提取碼: 1234

總結

以上是生活随笔為你收集整理的JS阶段作品（打字游戏）实现教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。