javascript趣味钢琴小游戏（附源码）js+css+html
2024-03-31 04:47:43
文章目录
- 源码
- 钢琴小游戏
- 一、代码
- html代码
- css代码
- 实现思路
- 总代码
源码
链接：https://pan.baidu.com/s/1J12cKovz5zx4BxNqpgWXNA
提取码：ug8t
提取码：pvy7
钢琴小游戏
该游戏玩法为：点击中间的按钮，歌曲转盘开始滚动，随即抽到一首歌，抽到的歌曲弹出歌单，点击歌单，歌单会消失，可以继续抽歌曲，底部的黑白钢琴可以弹奏音乐
一、代码
html代码
<!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><link rel="stylesheet" href="./gangqinshi.css">
</head>
<body>
<div class="bg"><img src="./img/bg1.jpg" alt=""><div class="music_list"><div class="playlist1 music">世上只有</div><div class="playlist2 music">两只老虎</div><div class="playlist3 music">小星星</div><div class="playlist4 music">找朋友</div><div class="playlist5 music">新年好</div><div class="playlist6 music">粉刷匠</div><div class="playlist7 music">轨迹</div><div class="playlist8 music">青花瓷</div><div class="playlist9 music" id="start_btn"></div></div><div class="gedan"><ul><li class="img"><img src="./img/世上只有.png" alt=""></li><li class="img"><img src="./img/两只老虎.png" alt=""></li><li class="img"><img src="./img/小星星.png" alt=""></li><li class="img"><img src="./img/找朋友.png" alt=""></li><li class="img"><img src="./img/新年好.png" alt=""></li><li class="img"><img src="./img/粉刷匠.png" alt=""></li><li class="img"><img src="./img/轨迹.png" alt=""></li><li class="img"><img src="./img/青花瓷.png" alt=""></li></ul></div><div class="piano"><div class="keys"><ul><li class="Play">do<audio src="./music/1do.mp3" ></audio></li><li class="Play">re<audio src="./music/2re.mp3"></audio></li><li class="Play">mi<audio src="./music/3mi.mp3"></audio></li><li class="Play">fa<audio src="./music/4fa.mp3"></audio></li><li class="Play">sol<audio src="./music/5so.mp3"></audio></li><li class="Play">la<audio src="./music/6la.mp3"></audio></li><li class="Play">si<audio src="./music/7si.mp3"></audio></li><li class="Play">do<audio src="./music/8do.mp3"></audio></li></ul><span class="heikuai1"></span><span class="heikuai2"></span><span class="heikuai3"></span><span class="heikuai4"></span><span class="heikuai5"></span></div></div>
</div>
<button id="stop_btn">停止</button>
</body>
<script>var start_btn=document.getElementById("start_btn");var music=document.getElementsByClassName("music");//开始转圈start_btn.onclick=function(){//开始转圈timer=setInterval(start,300);}var i=0;var gedan_list=document.getElementsByClassName("img");function start(){//随机数var n=Math.round(Math.random()*10);i++;if(i==8){i = 0;}for(var j=0;j<music.length;j++){music[j].style.boxShadow="none";}if(i==n){gedan_list[i].style.display="block";clearInterval(timer);}music[i].style.boxShadow="2px 5px 10px 5px #000";console.log(i,n);} for(var w=0;w<gedan_list.length;w++){gedan_list[w].onclick=function(){this.style.display="none";}}// 停止转圈var stop_btn=document.getElementById("stop_btn");stop_btn.onclick=function(){clearInterval(timer);}//音乐播放暂停var mp3=document.getElementsByTagName("audio");var Play=document.getElementsByClassName("Play");for(var m=0;m<Play.length;m++){Play[m].onclick=function(){for(var k=0;k<Play.length;k++){Play[k].style.boxShadow="0 7px 8px #000";}this.style.boxShadow="none";this.childNodes[1].play();console.log(this.childNodes[1]);}}</script>
</html>
css代码
*{padding: 0;margin: 0;}
.bg{position: relative;width: 100%;height: 100%;}
.bg>img{width: 100%;height: 100%;z-index: -10;
}
.music_list{position: absolute;left:50%;transform: translateX(-50%);top:50px;width: 340px;height: 340px;background-color: #ccc;}
/* .playlist1{
} */
.music{/* float: left; */position: absolute;width: 100px;height: 100px;background: url("./img/1.png")no-repeat;background-size: 100% 100%;line-height: 100px;text-align: center;font-size: 20px;color: #fff;}
.playlist1{left: 0;top: 0;
}
.playlist2{left: 120px;top: 0;
}
.playlist3{left: 240px;top: 0;
}
.playlist4{right: 0;top: 120px;
}
.playlist5{right: 0;top: 240px;
}
.playlist6{bottom: 0;left: 120px;
}
.playlist7{left: 0;bottom: 0;
}
.playlist8{left: 0px;top:120px;
}
.playlist9{left: 120px;top:120px;
}
#start_btn{background: url("./img/2.jpg");background-size: 100% 100%;
}.piano{position: absolute;
left: 50%;
transform: translateX(-50%);
top: 460px;
width: 640px;
height: 300px;
background-color: #fff;
border:1px solid #000;
}
li{list-style: none;
}
.keys>ul>li{float: left;width: 80px;height: 300px;box-sizing: border-box;border:1px solid #000;color:#000;font-size: 16px;font-weight: 700;padding-left: 35px;/* background-color: pink; */
}
.keys>span{position: absolute;width: 40px;height: 150px;background-color: #000;
}
.heikuai1{left: 60px;
}
.heikuai2{left: 140px;
}
.heikuai3{left: 300px;
}
.heikuai4{left: 380px;
}
.heikuai5{left: 460px;
}
.gedan>ul>li{display: none;
}
.gedan>ul>li>img{width: 700px;height: 550;position: absolute;left: 50%;top:50px;transform: translateX(-50%);/* display: none; */}
.Play{box-shadow: 0 7px 8px #000;
}实现思路
点击play抽歌曲出现歌单： 设置li为九个盒子，ul为相对定位，li设置宽高100，使用绝对定位，js中设置定时器， 获取li标签，然后给获取到的数组标签设置定时器，轮到的下标i设置阴影boxshadow
i++;
if(i==8){i = 0;
}
music[i].style.boxShadow="2px 5px 10px 5px #000";使用随机函数random获取随机数n，当每次轮到一个i就随机一个数n，当n等于i时，清除定时器，并且将对应的歌单显示出来
//随机数
var n=Math.round(Math.random()*10);
if(i==n){gedan_list[i].style.display="block";clearInterval(timer);}
点击歌单后，歌单会消失
for(var w=0;w<gedan_list.length;w++){gedan_list[w].onclick=function(){this.style.display="none";}}
实现钢琴弹奏效果
设置八个li标签，每个标签放置一个audio标签，弹奏时，给点击到的li标签的孩子节点audio添加play属性，并且点击到的li标签阴影消失
//音乐播放暂停var mp3=document.getElementsByTagName("audio");var Play=document.getElementsByClassName("Play");for(var m=0;m<Play.length;m++){Play[m].onclick=function(){for(var k=0;k<Play.length;k++){Play[k].style.boxShadow="0 7px 8px #000";}this.style.boxShadow="none";this.childNodes[1].play();console.log(this.childNodes[1]);}}
以上就是趣味钢琴家的实现思路
总代码
html+javascript
<!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><link rel="stylesheet" href="./gangqinshi.css">
</head>
<body>
<div class="bg"><img src="./img/bg1.jpg" alt=""><div class="music_list"><div class="playlist1 music">世上只有</div><div class="playlist2 music">两只老虎</div><div class="playlist3 music">小星星</div><div class="playlist4 music">找朋友</div><div class="playlist5 music">新年好</div><div class="playlist6 music">粉刷匠</div><div class="playlist7 music">轨迹</div><div class="playlist8 music">青花瓷</div><div class="playlist9 music" id="start_btn"></div></div><div class="gedan"><ul><li class="img"><img src="./img/世上只有.png" alt=""></li><li class="img"><img src="./img/两只老虎.png" alt=""></li><li class="img"><img src="./img/小星星.png" alt=""></li><li class="img"><img src="./img/找朋友.png" alt=""></li><li class="img"><img src="./img/新年好.png" alt=""></li><li class="img"><img src="./img/粉刷匠.png" alt=""></li><li class="img"><img src="./img/轨迹.png" alt=""></li><li class="img"><img src="./img/青花瓷.png" alt=""></li></ul></div><div class="piano"><div class="keys"><ul><li class="Play">do<audio src="./music/1do.mp3" ></audio></li><li class="Play">re<audio src="./music/2re.mp3"></audio></li><li class="Play">mi<audio src="./music/3mi.mp3"></audio></li><li class="Play">fa<audio src="./music/4fa.mp3"></audio></li><li class="Play">sol<audio src="./music/5so.mp3"></audio></li><li class="Play">la<audio src="./music/6la.mp3"></audio></li><li class="Play">si<audio src="./music/7si.mp3"></audio></li><li class="Play">do<audio src="./music/8do.mp3"></audio></li></ul><span class="heikuai1"></span><span class="heikuai2"></span><span class="heikuai3"></span><span class="heikuai4"></span><span class="heikuai5"></span></div></div>
</div>
<button id="stop_btn">停止</button>
</body>
<script>var start_btn=document.getElementById("start_btn");var music=document.getElementsByClassName("music");//开始转圈start_btn.onclick=function(){//开始转圈timer=setInterval(start,300);}var i=0;var gedan_list=document.getElementsByClassName("img");function start(){//随机数var n=Math.round(Math.random()*10);i++;if(i==8){i = 0;}for(var j=0;j<music.length;j++){music[j].style.boxShadow="none";}if(i==n){gedan_list[i].style.display="block";clearInterval(timer);}music[i].style.boxShadow="2px 5px 10px 5px #000";console.log(i,n);} for(var w=0;w<gedan_list.length;w++){gedan_list[w].onclick=function(){this.style.display="none";}}// 停止转圈var stop_btn=document.getElementById("stop_btn");stop_btn.onclick=function(){clearInterval(timer);}//音乐播放暂停var mp3=document.getElementsByTagName("audio");var Play=document.getElementsByClassName("Play");for(var m=0;m<Play.length;m++){Play[m].onclick=function(){for(var k=0;k<Play.length;k++){Play[k].style.boxShadow="0 7px 8px #000";}this.style.boxShadow="none";this.childNodes[1].play();console.log(this.childNodes[1]);}}
</script>
</html>
css代码
*{padding: 0;margin: 0;}
.bg{position: relative;width: 100%;height: 100%;}
.bg>img{width: 100%;height: 100%;z-index: -10;
}
.music_list{position: absolute;left:50%;transform: translateX(-50%);top:50px;width: 340px;height: 340px;background-color: #ccc;}
/* .playlist1{
} */
.music{/* float: left; */position: absolute;width: 100px;height: 100px;background: url("./img/1.png")no-repeat;background-size: 100% 100%;line-height: 100px;text-align: center;font-size: 20px;color: #fff;}
.playlist1{left: 0;top: 0;
}
.playlist2{left: 120px;top: 0;
}
.playlist3{left: 240px;top: 0;
}
.playlist4{right: 0;top: 120px;
}
.playlist5{right: 0;top: 240px;
}
.playlist6{bottom: 0;left: 120px;
}
.playlist7{left: 0;bottom: 0;
}
.playlist8{left: 0px;top:120px;
}
.playlist9{left: 120px;top:120px;
}
#start_btn{background: url("./img/2.jpg");background-size: 100% 100%;
}.piano{position: absolute;
left: 50%;
transform: translateX(-50%);
top: 460px;
width: 640px;
height: 300px;
background-color: #fff;
border:1px solid #000;
}
li{list-style: none;
}
.keys>ul>li{float: left;width: 80px;height: 300px;box-sizing: border-box;border:1px solid #000;color:#000;font-size: 16px;font-weight: 700;padding-left: 35px;/* background-color: pink; */
}
.keys>span{position: absolute;width: 40px;height: 150px;background-color: #000;
}
.heikuai1{left: 60px;
}
.heikuai2{left: 140px;
}
.heikuai3{left: 300px;
}
.heikuai4{left: 380px;
}
.heikuai5{left: 460px;
}
.gedan>ul>li{display: none;
}
.gedan>ul>li>img{width: 700px;height: 550;position: absolute;left: 50%;top:50px;transform: translateX(-50%);/* display: none; */}
.Play{box-shadow: 0 7px 8px #000;
}链接：https://pan.baidu.com/s/1J12cKovz5zx4BxNqpgWXNA
提取码：ug8t
码字不易，喜欢就点个赞吧！
javascript趣味钢琴小游戏（附源码）js+css+html相关推荐
- html实现扫雷小游戏(附源码)
文章目录 实现功能 1.扫雷设计 1.1 主界面 1.2 扫雷难度 1.3 附带功能 2.效果和源码 2.1 动态效果 2.2 源代码 源码下载 作者:xcLeigh 文章地址:https://blo ...
- 【博主推荐】html好看的拼图小游戏(附源码)
拼图目录 html好看的拼图小游戏 1.拼图效果示意图 1.1 第一级 九宫格拼图 1.2 第二级 十六宫格拼图 1.3 第三级 三十二宫格拼图 14 第三级 八十一宫格拼图 2.图片切图说明 3.实 ...
- 【Python游戏】Python基于pygame实现的人机大战的斗兽棋小游戏 | 附源码
前言 有粉丝说要我出一期Python版本的斗兽棋,今天宠粉狂魔的我不就来啦!! 虽然是一个简单的小游戏,但是对于新手小伙伴来说还是有一定的小难度的哟!要是不理解都可以找到小编的哈!! 相关文件 关注小 ...
- 整理了30款Python小游戏附源码，五一有的玩了
快到五一了,整理了 30 款 Python 小游戏源码分享给大家,具体内容可以点击下方视频号查看: 点击上方视频后,源码获取方式:①关注上方视频号.②点赞当前视频.③在当前视频评论区扣1 友情提示:获 ...
- 【Python游戏】基于化学方程式的基础上，用Python实现一个消灭泡泡小游戏 | 附源码
前言 halo,包子们下午好 今天实现的这个小游戏呀,说实话化学不太好的小伙伴可能看起来会有点懵逼 不过不用担心,咱们今天不是来学化学的,我们是来学习Python的 所以呀,不要太担心啦,大家先好好看 ...
- 【Python游戏】用Python 和 Pyglet 编写一个我的世界小游戏 | 附源码
相关文件 想学Python的小伙伴可以关注小编的公众号[Python日志] 有很多的资源可以白嫖的哈,不定时会更新一下Python的小知识的哈!! 需要源码的小伙伴可以在公众号回复我的世界 Pytho ...
- 一口气用Python写了13个小游戏 (附源码)
大家好,今天给大家分享13个游戏源码,可以自己复现玩玩,研究下里面的编程逻辑,对学习编程(特别是初学者)应该会有很大帮助. 由于文章较长,大家记得滑到文末点个赞哈- 1.吃金币 源码分享: impor ...
- 【Python游戏】基于pygame实现的一个Dino Rush 恐龙宝贝冲冲冲的小游戏 | 附源码
前言 halo,包子们晚上好 很久没有更新啦,主要是小编这边最近有点小忙 今天给大家整一个Dino Rush 恐龙宝贝冲冲冲的小游戏 还是一个比较记经典的小游戏,还记这可谷歌浏览器上没有网也能打发时间 ...
- 用C语言easyx库来写一个简单的翻翻乐小游戏(附源码素材)
简明目录 写在前面 easyx库 准备工作 新建项目文件 分析 素材分析 上代码吧 地图表示 开始界面 地图初始化(打乱) 游戏过程实现 主函数的实现 测试 优化 1.游戏分数 2.游戏时间 3.nu ...
- 分享Python开发的13个小游戏(附源码)
导语 哈喽哈喽~铁汁萌!愉快的周末到了天气也变好了不知道大家有没有出去玩吖!小编这几天太累了周末就宅在家里啦
最新文章
- 华为鸿蒙系统2.0发布了！AI人工智能大有可为！
- SQL Server:OA权限管理设计的实现 下
- hibernate中@Entity和@Table的区别
- ubuntu系统下安装docker并部署Springboot+mysql+redis
- di容器_DI容器是代码污染者
- h5 video全屏播放
- 继苏宁京东后 拼多多也宣布下调新款iPhone售价
- en55032最新标准下载_关于欧盟新版EMC标准EN55032的解析
- 伍德里奇计量经济学第六章计算机答案,伍德里奇计量经济学导论计算机习题第六章第13题c_6.13...
- Linux：红帽操作系统介绍
- GetWindowRect，GetClientRect，ScreenToClient MoveWindow SetWindowPos 用法说明
- 手把手 网络爬虫：用爬虫爬取贝壳房租网西安的租房信息
- 专利代理人资格考试怎么准备
- 全面解读Marshmallow
- AutoJs学习-变声器模板
- 计算机和数学专业哪个难,学计算机专业难吗 数学很差能学吗
- Python Loess (Lowess) smooth 曲线平滑
- 「维基解密」：西游记死亡人数
- 面试中sql调优的几种方式_面试方式
- MOSFET反向恢复特性总结-4