javascript趣味钢琴小游戏（附源码）js+css+html

小兔崽啊啊啊

已于 2022-03-21 16:09:47 修改

阅读量3.2k

点赞数 7

文章标签： js css html javascript

于 2021-08-06 15:56:35 首次发布

本文链接：https://blog.csdn.net/yingshuangtu/article/details/119455826

版权

这是一个介绍如何制作一个简单的钢琴小游戏的博客。游戏包含九首儿歌，玩家点击开始按钮后，歌曲转盘随机滚动显示歌曲，点击歌曲图片会消失并可抽取新的歌曲。游戏还实现了钢琴键盘的弹奏功能，点击钢琴键即可播放对应音符。代码主要涉及HTML、CSS和JavaScript，包括音乐播放、元素动画和交互逻辑。

摘要由CSDN通过智能技术生成

源码

链接：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.