版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
连连看打字游戏
界面：
默认状态
开始游戏后
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>