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.所有代码以及图片（背景、点击字母特性，最高分图片）资源

链接: /s/1LB8TKWoTa0X8eVqFLc3p7g?pwd=1234

提取码: 1234