用Html5制作汤姆猫小游戏

快来打我* 2022-09-26 00:21 447阅读 0赞

以下汤姆猫是用html5制作的小游戏；

建议火狐测试，然后把火狐调成  响应式设计模式（以便模拟手机屏幕），设置--->开发者--->响应式设计模式；   如下图

![Center][]

以下是html文件：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>汤姆猫</title>
      <style>
        *{
          margin: 0px;           /**去掉边距*/
          padding: 0px;
        }
        html{
          height: 100%;
        }
        body{
          height: 100%;
        }
        img{
          width: 100%;          /**使图片长宽适应屏幕的大小*/
          height: 100%;
        }
      </style>
    </head>
    
    <body οnclick="action(event)">
    
    
    <img src="./img/angry/angry_00.jpg" alt="" id="tom">
    
    <audio id="player"></audio>
    
    <script src="tom.js"></script>
    
    </body>
    </html>

以下是js文件：tom.js；

/**
     * 为body添加点击事件，以便用于确定用户点击的位置
     * @param event
     */
    function action(event) {
        //获取屏幕宽度
        var w = document.documentElement.clientWidth;
        //获取屏幕高度
        var h = document.documentElement.clientHeight;
    
        //相对坐标位置；因为我是在320*480分辨率的情况下确定坐标的，为了在其他分辨率下位置正确，
        var x = event.pageX / w * 320;
        var y = event.pageY / h * 480;
    
        //在控制台显示当前点击的坐标
        console.log('点击的坐标为x:'+ x + ',y:' + y);
    
        if (x>132 && x<187 && y>371 && y<411) {     //肚子
            play('stomach',33,0);
        }
        if (x>102 && x<201 && y>87 && y<162) {      //头
            play('knockout',80,20);
        }
        if (x>163 && x<195 && y>435 && y<455) {     //左脚
            play('foot_left',29,0);
        }
        if (x>117 && x<148 && y>439 && y<456) {     //右脚
            play('foot_right',29,0);
        }
        if (x>215 && x<242 && y>380 && y<420) {    //尾巴
            play('angry',25,0);
        }
        if (x>83 && x<107 && y>282 && y<300) {     //右手
            play('scratch',55,21);
        }
        if (x>120 && x<200 && y>192 && y<207) {    //嘴巴
            play('eat',39,0);
        }
        if (x>10 && x<60 && y>353 && y<430) {     //左下角
            play('drink',80,35);
        }
        if (x>206 && x<225 && y>262 && y<295) {    //左手
            play('cymbal',12,0);
        }
        if (x>206 && x<250 && y>72 && y<149) {    //左耳朵
            play('fart',27,0);
        }
    }
    
    /**确定当前动作的声音是否播放完，如果没有播放完不执行下一个动作*/
    var playing = false;
    /**获取页面的图片标签*/
    var img = document.getElementById('tom');
    /**获取页面的声音标签*/
    var player = document.getElementById('player');
    
    /**
     *
     * @param name 图片和声音的文件名字
     * @param totle    该动作图片数量
     * @param startAt   从第几张图片开始播放
     */
    function play(name,totle,startAt)
    {
    
        /**确定当前动作是否播放完，如果没有播放完不执行下一个动作*/
        if (playing == false)
        {
            playing = true;
            var i = 0;
            animate();
          //动画
            function animate()
            {
    
                //因为图片名称是angry_01.jpg  、  angry_13.jpg 这种格式，所以小于10要在前面加个0
                var src = './img/'+name + '/' + name + '_' + (i < 10 ? + '0' : '') + i + '.jpg';         //获取图片地址
                img.src = src;    //替换图片，（图片快速替换形成动作）
    
                console.log(name+'：第'+i+'张图片');
    
                if (i < totle)
                {
                    //延时图片替换速度，否则动画瞬间完成（setTimeout是异步的，所以不影响声音不放）
                    setTimeout(animate,65);
    
                    if(i == startAt){
    
                        //播放声音
                        player.src = 'sounds/' + name + '.m4a';
                        player.play();
    
                    }
                    if(name == 'drink' && i == 35)
                    {
                        player.src = 'sounds/' + name + '.m4a';
                        player.play();
                    }
                    if(name == 'scratch' && i == 21)
                    {
                        player.src = 'sounds/' + name + '.m4a';
                        player.play();
                    }
                    if(name == 'knockout' && i == 20)
                    {
                        player.src = 'sounds/' + name + '.m4a';
                        player.play();
                    }
    
                    //i递加，以便更换下一张动作图片
                    i++;
    
                }else{
    
                    playing = false;    //图片播放完成，结束
    
                }
            }
    
        }
        else
        {
            return;     //重复play()方法,形成连贯动作，因为setTimeout是异步处理的，所以要用递归，否则图片无法延时
        }
    }

为了适应不同分辨率的屏幕，所以要使用相对坐标（本测试是在320\*480上测试的）

var x = event.pageX / w * 320;
    var y = event.pageY / h * 480;
    
    
    有童鞋会问怎么知道图片的坐标范围是多少。
    ps：可以借助火狐的控制台查看；   
    即用     console.log('点击的坐标为x:'+ x + ',y:' + y);    显示；   
    如下图，点击图片的某位置就会在控制台输出xy坐标；    （右键---->查看元素----->控制台）
    
    
    
    然后鼠标点击某个范围就执行什么动作，范围确定左上角和右下角的坐标就行；如下图所示，是确定嘴巴的范围
    
    
    
     然后用if判断点击的坐标范围，再执行什么动作；
    
    
    
    
     为了适应在不同分辨率上的位置显示，所以要有 相对位置 确定图片的点击范围；我是在320*480分辨率下确定的；
     var x = event.pageX / w * 320;
    var y = event.pageY / h * 480;
    
    
    资源下载地址： http://download.csdn.net/detail/qq_22078107/9629834

[Center]: /images/20220717/eada9f6a4ad44e5f98f42b7dc7235160.png