please make my project more perfect, and add a button to control Turn sound (On / Off) .
and help me change some place that i wrote wrong or not perfect. thanks
thanks
first.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打地鼠</title>
<link rel="stylesheet" href="first.css">
</head>
<body>
<section>
</section>
<!-- 添加积分器 -->
<span id="count">得分 为0</span>
<!-- 添加音频 hidden="true" -->
<audio src="audio/music.mp3" loop="true"autoplay="autoplay"
loop="loop"></audio>
<div id="dazhong"></div>
<script src="jquery.js"></script>
<script src="first.js"></script>
</body>
</html>
得分 为0
first.js
for(var i=1;i<17;i++){
$('section').append('
');
}
$('section div').append("
");
$('section div').append('
');
// 设置初始状态地鼠都没出现
$('.mouse').hide();
//袋鼠出现
// [1,4] [0, 3)
// 随机出现的袋鼠数目 [1 16] (0, 15] 向上取整
var num
//
//袋鼠位置[0 15] 索引 index
var index
var object;
setInterval(function(){
num=Math.ceil(Math.random()*2);
for(var i=1; i<=num ;i++){
//随机出现的袋鼠位置[0 15] 索引
index=Math.floor(Math.random()*16);
object=$('section div:nth-of-type('+(index+1)+') .mouse')
object.slideDown();
object.delay(2000).slideUp();
}
},1000);
$('body').mousedown(function(){
$('body').css({
cursor:'url("./image/cursor-down.png"), auto'
});
}).mouseup(function(){
$('body').css({
cursor:'url("./image/cursor.png") ,auto'
});
});
// score
var score=0;
$('.mouse').click(function(){
$(this).hide();
score+=10;
$(" point="+score+"").replaceAll('span');
$('#dazhong').append('');
setTimeout(function(){
$('#dazhong').empty();
},1000);
});
Do below changes in your first.html and you will get the play/pause and audio on/off buttons.
Replace this tag
<audio src="audio/music.mp3" loop="true"autoplay="autoplay" loop="loop"></audio>
by below tag
<audio controls loop>
<source src="audio/music.mp3" type="audio/mpeg">
</audio>
Please make my project more perfect, and add a button to control Turn sound (On / Off)...