打字连连看游戏

连连看打字游戏

界面：

默认状态

开始游戏后

css:

<style type="text/css"> * { margin: 0; padding: 0; font-size: 100%; } #container { width: 100%; height: 655px; position: relative; background: url(img/bg.jpg) no-repeat; background-size: cover; } #btns { width: 1366px; height: 555px; position: fixed; top: 0; left: 0; } button { position: absolute; width: 100px; height: 100px; /*border: none;*/ background-size: contain; color: transparent; outline: none; border: 0 solid black; } #scoreCount { width: 300px; height: 300px; background: url(img/score.png) no-repeat; background-size: cover; position: absolute; right: 20px; bottom: 10px; line-height: 300px; font-size: 50px; } #start { width: 200px; height: 60px; background: url(img/stop.png) no-repeat; background-size: contain; line-height: 60px; position: absolute; left: 20px; bottom: 0; cursor: pointer; } #stop { width: 200px; height: 60px; background: url(img/stop.png) no-repeat; background-size: contain; line-height: 60px; position: absolute; left: 250px; bottom: 0; cursor: pointer; } #sGame { width: 100%; height: 60px; position: absolute; left: 0; bottom: 0; background: #98c931; } style>

js:

<script> var letterArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]; var container = $("container"); var btns = $("btns"); //用于存储移动字母按钮的时间函数 var removeBtns = []; //用于存储生成字母按钮的时间函数  var proLetters = []; //记录分数 var count = ""; //模拟jquery用$表示通过id寻找指定元素 function $(id){ return document.getElementById(id); } //生产字母按钮 function productionLetter() { //生成一个按钮 var btn = document.createElement("button"); //随机产生字母，并随机出现在屏幕顶部 var rndIdx = Math.floor(Math.random() * 26); btn.innerHTML = letterArr[rndIdx]; btn.style.background = 'url(img/letters/' + letterArr[rndIdx] + '.png) no-repeat'; btn.style.top = 0; btn.style.left = (Math.floor(Math.random() * 1200)) + 'px'; //追加字母按钮 btns.appendChild(btn); //初始化字母下移位置 var top1 = 0; //字母下移的时间函数 function test() { top1 = top1 + 1; btn.style.top = top1 + 'px'; if(top1 > 510) { console.log(btn); alert("游戏结束"); closeAll(); initGame(); } }; //产生字母下移的时间函数，并存储带对应集合中 removeBtns.push(window.setInterval(test, 8)); } function initGame() { //清除字母按钮集合 btns.innerHTML = ''; //用于存储移动字母按钮的时间函数 removeBtns = []; //用于存储生成字母按钮的时间函数  proLetters = []; //记录分数 count = 0; $('scoreCount').innerText = count; } //开始游戏 function startGame() { //清除所有时间函数 closeAll(); //初始化全局变量 initGame(); //启动产生字母的时间函数，并存储到集合中 proLetters.push(window.setInterval(productionLetter, 500)); //按键事件 window.onkeyup=keyups; } //暂停游戏 function stopGame() { //清除所有时间函数 closeAll(); //暂停按键事件 window.onkeyup=function(){return false;}; } //清除所有的字母的时间函数的定时执行操作 function closeAll() { var len = proLetters.length; for(var i = 0; i < len; i++) { //消除时间函数的定时执行操作 clearInterval(proLetters[0]); //消除集合中的时间函数对象 proLetters.splice(0, 1); } var len2 = removeBtns.length; for(var i = 0; i < len2; i++) { //消除时间函数的定时执行操作 clearInterval(removeBtns[0]); //消除集合中的时间函数对象 removeBtns.splice(0, 1); } } //addEventListener(keyup,onkeyup,false); //启动键盘弹起事件， function keyups(e) { //用于存储字母节点的集合 var nodes = btns.childNodes; //用于判断是否找到指定字母 var flag = false; //循环所有字母节点寻找是否有键盘指定字母 for(var i = 0; i < nodes.length; i++) { if(String.fromCharCode(e.keyCode) == nodes[i].innerText) { flag = true; //清除该字母的时间函数 clearInterval(removeBtns[i]); //在按钮移动的集合中移除该字母的 removeBtns.splice(i, 1); //在屏幕中移除指定字母按钮 btns.removeChild(nodes[i]); //消除第一个出现的对应字母 break; } } //对分数进行操作 if(flag == true) { count++; flag = false; } else { count--; } //将分数同步到屏幕上 $('scoreCount').innerText = count; }; script>

html:

<div id="container">
    
    <div id="sGame">
        <div id="start" align="center" onclick="startGame()">
            <b>开始游戏b>
        div>
        <div id="stop" align="center" onclick="stopGame();">
            <b>暂停游戏b>
        div>
    div>

    <div id="scoreCount" align="center">div>
    <div id="btns">div>
div>