<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<div id="qaq">最终分数是：<span id='A0.0A'>0</span>
</div>
<script>
/**气球游戏
* 1.定义数组存储气球，每隔一段时间，添加一个气球
* 2.绑定键盘事件，获取按下的字母，判断与气球字母是否一致
* 3.一致的话，移除气球加1分；
* 4.不一致的话，扣一分
* 5.气球移出了视图，未被移除，扣2分
* 6.规定时间内，终止游戏
* **/
var width = document.documentElement.clientWidth;//获取视口宽度
var height = document.documentElement.clientHeight;//获取视口高度
var letter = 'abcdegfhijklmnopqrstuvwxyz';//定义26个字母
var arr = []; //定义数组，存储气球
var time = 0; //定义执行的次数
var score = 0; //定义分数
//随机创建一个气球从页面中滑过
function Balloon(id, top, speed) {
//存储基本数据
this.id = id;
this.speed = speed;//移动速度
this.col = parseInt(id / 4);//或者Math.floor(id/4)//列
this.row = id % 4;//行
this.top = top;
this.left = -113;
this.dom = document.createElement('div'); //创建元素
this.container = document.getElementById('app'); //容器元素
this.remove = true; //是否可以移动
this.letter = letter[parseInt(Math.random() * letter.length)];//随机生成一个字母
//让气球运动
this.move = function () {
if (!this.check()) {//边界方法
this.left += this.speed; //更改left值
this.dom.style.left = this.left + 'px';//修改样式
}
}
//边界判断方法
this.check = function () {
if (this.left >= width - 113) {//如果超出右边
this.remove = false;//停止移动
}
}
//让气球从页面中消失
this.die = function () {
this.remove = false; //不能移动
this.container.removeChild(this.dom);//从父元素中移除这个元素
}
this.init = function (dom) {
//设置图片样式
this.dom.style.position = 'absolute';
this.dom.style.height = '150px';
this.dom.style.width = '113px';
this.dom.style.top = this.top + 'px';
this.dom.style.backgroundImage = 'url(./图片/气球.jpg)';
this.dom.style.backgroundRepeat = 'no-repeat';
//显示字母
this.dom.innerHTML = this.letter;
this.dom.style.fontSize = '60px';
this.dom.style.lineHeight = '103px';
this.dom.style.textAlign = 'center';
this.dom.style.color = 'red';
//设置具体的背景图片位置
this.dom.style.backgroundPositionX = this.row * -113 + 'px';
this.dom.style.backgroundPositionY = this.col * -150 + 'px';
this.container.appendChild(this.dom);
}
}
//定时器
var timebar = setInterval(function () {
//每隔一段时间生成一个气球
if (time % 80 === 0) {
var num = Math.floor(Math.random() * 12);//加入气球
var speed = 1 + Math.floor(Math.random() * 5); //随机一个1~6之间的速度
var b1 = new Balloon(num, Math.random() * (height - 200), speed); //实例化
b1.init();//初始化样式
arr.push(b1);//放入数组中
}
//倒着（法一：放在数组塌陷）遍历数组并移动
for (var i = arr.length - 1; i >= 0; i--) {
arr[i].check();//对每个气球校验
arr[i].move()//让每一个气球移动
if (!arr[i].remove) {//如果该气球移出页面
arr[i].die();//移除元素
arr.splice(i, 1);//数组中移除该气球
//纠正（法二）：i--;
score -= 2;//更改分数
}
}
time++; //下一次
if (time > 1000) {//超过1000次，停止游戏
clearInterval(timebar);
console.log('分数是:' + score);//提示分数
document.getElementById('A0.0A').innerText = score;
}
}, 30)
//绑定键盘事件
document.onkeydown = function (e) { //获取键值e.key
//比较有无气球的字母与之对应
for (var i = 0; i < arr.length; i++) {
if (e.key.toUpperCase() === arr[i].letter.toUpperCase()) {//如果字母相等
score++;//找到了
arr[i].die();//停止移动(移除气球后，该气球就不能移动了)
arr.splice(i, 1);//将气球从arr中移除
return;
}
}
score--;//寻找一轮没有找到对应气球，说明点击错误
}
</script>
</body>
</html>
|