打袋鼠小游戏

最新推荐文章于 2024-04-12 23:08:35 发布

gfvvfb

最新推荐文章于 2024-04-12 23:08:35 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/gfvvfb/article/details/104315189

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 130px;
            height: 130px;
            /*更改鼠标指针状态*/
            cursor: url("img/chuizi.png"),auto;
        }
        #lovefeng{
            margin: auto;
            text-align: center;
        }
    </style>
    <script>
        //获取每张img元素对象
        var imgs = document.getElementsByTagName("img");
        var index;
        var lastindex=0;
        var flag=false;//用于判断敲打状态
        var count=0;
        window.onload=function () {
            var interval;
            // 点击事件
            document.getElementById("lovefeng").onclick=function () {
                if (this.getAttribute("value")=="开始游戏"){
                    // 设置循环计时器
                    interval = setInterval(start,1000);
                    this.setAttribute("value","游戏中");
                }else {
                    this.setAttribute("value","开始游戏");
                    clearInterval(interval);
                }
            }
            
            //为每一个img元素对象设置点击事件，判断是否击中，击中加分，没有击中减分
            for (var i = 0; i <imgs.length ; i++) {
                imgs[i].onclick=function () {
                    flag=true;
                    if (this.getAttribute("id")==("img"+index)){
                        document.getElementById("music").play();
                        count+=5;
                        document.getElementById("live").innerText=count;
                    }else {
                        count-=5;
                        document.getElementById("live").innerText=count;
                    }
                }
            }
        }

        //定义函数start目的为了响应，切换图片
        function start() {
            //获得随机数，向下取整
            index = Math.floor(Math.random()*9);
            //将上一个img元素的src属性改成"img/shudong.png";
            imgs[lastindex].src="img/shudong.png";
            //将随机数img元素的src属性改成"img/dishu.png";
            imgs[index].src="img/dishu.png";
            //让随机数变成上一个数，再进行下一个随机数
            lastindex=index;
            //不做任何动作，减分
            if (!flag){
                count-=5;
                document.getElementById("live").innerText=count;
            }
            flag=false;
        }
    </script>
</head>
<body>
<center>
    <!--定义音乐标签-->
<audio src="music/shake.wav" id="music"></audio>
    <!--定义按钮-->
<input type="button" id="lovefeng" value="开始游戏">
    <!--记录分数-->
<p><span id="live">0</span></p>
    <!--表格三行三列-->
<table>
    <tr>
        <td><img src="img/shudong.png" id="img0"></td>
        <td><img src="img/shudong.png" id="img1"></td>
        <td><img src="img/shudong.png" id="img2"></td>
    </tr>
    <tr>
        <td><img src="img/shudong.png" id="img3"></td>
        <td><img src="img/shudong.png" id="img4"></td>
        <td><img src="img/shudong.png" id="img5"></td>
    </tr>
    <tr>
        <td><img src="img/shudong.png" id="img6"></td>
        <td><img src="img/shudong.png" id="img7"></td>
        <td><img src="img/shudong.png" id="img8"></td>
    </tr>
</table>
</center>
</body>
</html>

gfvvfb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
打袋鼠小游戏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> img{ width: 130px; hei...
复制链接

扫一扫