连连看打字游戏

界面：

默认状态

开始游戏后

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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！