嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300
本次赞助数额为: 2 元微信扫码支付:2 元
请留下您的邮箱,我们将在2小时内将文件发到您的邮箱
网页小游戏
<script>
// 获取指定的整数范围
// a.先获取页面上所有的地鼠图片
var mouses = document.querySelectorAll('img');
// b.获取数量
var len = mouses.length;
console.log(len);
// 声明基础分数
var score=0;
// 获取页面上显示分数的元素
var span = document.getElementById('score');
// 获取页面上击中的音效
var shutdown = document.getElementById('shutdown');
// 定义一个函数
function one() {
// 从整数范围中随机获取一个整数
// a.先获取一个(0.1)的随机数
var ran = Math.random()
// b.转为指定范围随机数
var index = len * ran;
// c. 向下取整(0,19)之间的整数
index = Math.floor(index);
console.log(index);
// 根据随机的整数选项中对应的地鼠实现上升效果
mouses[index].classList.remove('down')
mouses[index].classList.add('up');
// 从开始上升事件进行计算,在上升结束等待
// 一小段事件再开始下落
// 延迟函数,让某个动作在一定时间后在执行
setTimeout(function () {
// 下降时需要先去除原有的上升动作样式
// 再添加需要的下降的动画样式
mouses[index].classList.remove('up')
mouses[index].classList.add('down')
}, 1500);
}
function play(){
// 使用 for 循环重复执行了7次
for (var i = 0; i < 7; i ) {
one();
}
}
play();
// 设置每隔一段时间出现一批地鼠
setInterval(play,1500);
// 给每一个地鼠都添加点击事件
for (var k = 0; k < len; k ) {
// 遍历地鼠集合,获取一个地鼠
// 然后添加点击事件
//当地鼠图片被鼠标点中后,对应的函数就会执行
mouses[k].onclick = function (e) {
// console.log('你点中我了!');
// console.log(e.target);
// e.表示事件对象,点击事件相关的所有信息集合
// e.target 表示出发时间元素
// 被点中之后,立刻执行下降动画
e.target.classList.remove('up');
e.target.classList.add('down');
// 点中以后计算分数
score =10;
// 将分数显示在页面上 设置为标签内容
span.innerText = score;
// 播放击中音效
shutdown.load();
shutdown.play();
}
}
</script>