汤姆猫小游戏

<style>
        #box{
            margin: 100px auto;
            width: 320px;
            height: 512px;
            /* border: 1px solid skyblue; */
            background-size: 320px 512px;
            /* 火狐浏览器的私有前缀 */
            -moz-user-select: none;
            /* 谷歌和safair浏览器的私有前缀 */
            -webkit-user-select: none;
            /* ie浏览器的私有前缀 */
            -ms-user-select: none;
            /* 用户不能选择内容 */
            user-select: none;
        }
        img{
            width: 100%;
            height: 100%;
        }
    </style>

<div id="box">
        <img src="./angry/angry_00.jpg" />
        <audio id="music"></audio>
    </div>

 <script>
        // 获取盒子
        var box = document.getElementById("box");
        // 获取图片
        var img = document.querySelector("img");
        // 获取音乐
        var music = document.getElementById("music");
        // 判断音乐是否播放完
        var flag = true;
        // 鼠标点击动作
        box.onclick = function(event) {
            //console.log(1);
            // 获取鼠标按下坐标
            var x = event.clientX - box.offsetLeft;
            var y = event.clientY - box.offsetTop;
            // console.log(x);
            // console.log(y);
            if (x>=137&&x<=187&&y>=168&&y<=191){//鼻子-----生气
                fn("angry",25,12);
            }else if((x>=66&x<=87)&&(y>=84&&y<=153)||(x>=212&&x<=252)&&(y>=84&&y<=153)){//两只耳朵-----敲锣
                fn("cymbal",12,1);
            }else if(x>=122&&x<=208&&y>=209&&y<=220){//嘴-------喝奶
                fn("drink",80,20);
            }else if(x>=123&&x<=195&&y>=224&&y<=251){//下巴------吃
                fn("eat",39,10);
            }else if(x>=211&&x<=235&&y>=377&&y<=462){//尾巴----放屁
                fn("fart",27,5);
            }else if(x>=161&&x<=198&&y>=464&&y<=491){//左脚
                fn("foot_left",29,1);
            }else if(x>=117&&x<=151&&y>=464&&y<=491){//右脚
                fn("foot_right",29,1);
            }else if(x>=128&&x<=196&&y>=89&&y<=124){//脑门---晕倒
                fn("knockout",80,20);
            }else if(x>=199&&x<=241&&y>=163&&y<=201){//左脸颊----扔蛋糕
                fn("pie",23,14);
            }else if(x>=79&&x<=114&&y>=163&&y<=201){//右脸颊----划玻璃
                fn("scratch",55,21);
            }else if(x>=123&&x<=202&&y>=353&&y<=431){//肚子----肚子疼
                fn("stomach",33,0)
            }
        }

        // 封装函数 名字 图片数量 从哪开始播放声音
        var fn = function(name,j,k) {
            //console.log(22);
            // 定义从0张开始
            var i = 0;
            // 判断动画是否结束 true结束  false没有结束
            if (flag==true) {
                // 播放完才能进入  此时不能再点击
                flag = false;
                // 执行动画
                animation();
                // 封装动画
                function animation() {
                    // 图片地址格式
                    i = i<10?"0"+i:i;
                    img.src = "./"+name+"/"+name+"_"+i+".jpg";
                    if (i<j) {
                        // 切换图片
                        setTimeout(animation,65);
                        if (i==k) {
                            // 开始播放声音位置
                            music.src = "./sounds/"+name+".m4a";
                            music.play();
                        }
                        // 切换图片
                        i++;
                    }else{
                        // 执行完
                        flag = true;
                    }
                }
            }else{
                // 还在动画时，不能点击
                return;
            }
            
        }

    </script>