web前端 打地鼠小游戏

 
<body>
    
    <audio src="music.mp3" autopplay loop>audio>
    
    <audio id="dazhong">audio>

    
    <p id="score">分数:0分p>

    <table>
        <tr>
            <td><img src="image/mouse.png" alt="">td>
            <td><img src="image/mouse.png" alt="">td>
            <td><img src="image/mouse.png" alt="">td>
            <td><img src="image/mouse.png" alt="">td>
        tr>
        <tr>
            <td><img src="image/mouse.png" alt="">td>
            <td><img src="image/mouse.png" alt="">td>
            <td><img src="image/mouse.png" alt="">td>
            <td><img src="image/mouse.png" alt="">td>
        tr>
        <tr>
            <td><img src="image/mouse.png" alt="">td>
            <td><img src="image/mouse.png" alt="">td>
            <td><img src="image/mouse.png" alt="">td>
            <td><img src="image/mouse.png" alt="">td>
        tr>
        <tr>
            <td><img src="image/mouse.png" alt="">td>
            <td><img src="image/mouse.png" alt="">td>
            <td><img src="image/mouse.png" alt="">td>
            <td><img src="image/mouse.png" alt="">td>
        tr>


    table>
    body>
<script src="jquery.js"></script>
    <script>
        // 随机出现一个地鼠
        function show() {
            // 先随机一个0-15之间的数字
            var index = Math.random()*16
            index = Math.floor(index)

            // 把index集合找到所有的img的索引
            // eq(index)匹配指定索引的元素
            $("img").eq(index).addClass("up").removeClass("down")

            // 过一段时间地鼠下去 添加down类,移除up类
            setTimeout(function () {
                $("img").eq(index).addClass("down").removeClass("up")
            },5000)
        }
        setInterval(function () {
            for (let i = 0; i < 2; i++) {
                show()
            }
           
        },1000)
        // 鼠标按下设置鼠标的样式
        $("body").mousedown(function () {
            $(this).css("cursor","url(image/cursor-down.png),auto")
        })
        // 鼠标松开的时候 鼠标样式改成原来的图片
        $("body").mouseup(function () {
            $(this).css("cursor","url(image/cursor.png),auto")
        })

        // 得分
        var score = 0

        // 点击地鼠的时候
        $("img").click(function () {
            // 播放打中声音
            $("#dazhong").attr("src","audio/dazhong.wav").get(0).play()
            // 分数加10
            score+=10
            // 显示p标签上
            $("#score").text("分数:"+score+"分")

            // 点击的时候地鼠下去
            $(this).addClass("down").removeClass("up")
        })
    </script>

你可能感兴趣的:(web前端 打地鼠小游戏)