H5学习之制作大名鼎鼎的汤姆猫游戏

黄良钵

分类: 程序开发 884 1

汤姆猫

大名鼎鼎的汤姆猫,用HTML5制作的。

html代码:

<html>

<head>

    <meta charset="UTF-8">

    <title>汤姆猫</title>

    <style>

        body,img{

            margin: 0;

            height: 100%;

            width: 100%;

        }

    </style>

</head>

<body onclick="action(event)">

    <img id="tom" src="angry/angry_00.jpg" alt="">

    <audio id="player"></audio>

    <script src="index.js"></script>

</body>

</html>

js代码:

// 获取img的DOM节点

var img = document.getElementById('tom')

var player = document.getElementById('player')

// 获取html文档可视窗口的宽高

var w = document.documentElement.clientWidth

var h = document.documentElement.clientHeight

// 当窗口大小发生变化时重新获取HTML文档的可视窗口的宽和高

window.onresize = function(){

    w = document.documentElement.clientWidth

    h = document.documentElement.clientHeight

}

function play(name,total,startAt){

    var i = 0

    animate()

    function animate(){

        // 插入图片的路径 图片一直在更换 造成连贯性的动作

        var src = name + '/' + name + '_' + (i < 10 ? + '0':'') + i + '.jpg'

                                            //i < 10 ? true:false

                                            //三元运算符

                                            //?号前面是一个判断语句 ?号后面是值1:值2

                                            //如果条件为真 得到第一个值(值1)

                                            //如果条件为假 得到第二个值(值2)

        img.src = src

        if(i < total){

            // 延时100毫秒之后执行动画

            setTimeout(animate, 100);

            if(i == startAt){

                player.src = 'sounds/' + name + '.m4a'

                player.play()

            }

            if(name == 'knockout' && i == 0){

                player.src = "sounds/fall.m4a"

                player.play()

            }

            if(name == 'drink' && i == 11){

                player.src = 'sounds/pour.m4a'

                player.play()

            }

        }

        i++

    }

}

function action(event){

    // event.pageX和event.pageY来表示鼠标相对于文档的位置

    var x = event.pageX*360 / w

    var y = event.pageY*640 / h

    console.log(x)

    console.log(y)

    if(x > 80 && x < 120 && y > 110 && y < 200){

        play('scratch',55,20)

    }

    if(x > 240 && x < 290 && y > 110 && y < 200){

        play('pie',23,13)

    }

    if(x > 124 && x < 240 && y > 160 && y < 190){

        play('cymbal',12,0)

    }

    if(x > 155 && x < 210 && y > 190 && y < 230){

        play('knockout',80,19)

    }

    if(x > 137 && x < 235 && y > 250 && y < 280){

        if(x < 185){

            play('eat',39,0)

        }

        else{

            play('drink',80,34)

        }

    }

    if(x > 140 && x < 225 && y > 400 && y < 450){

        play('angry',25,0)

    }

    if(x > 119 && x < 245 && y > 460 && y < 560){

        play('stomach',33,0)

    }

    if(x > 125 && x < 175 && y > 570 && y < 620){

        play('foot_right',29,0)

    }

    if(x > 175 && x < 220 && y > 570 && y < 620){

        play('foot_left',29,0)

    }

    if(x > 246 && x < 280 && y > 490 && y < 580){

        play('fart',27,0)

    }

}

素材下载:2017-04-05 tangmumao.tar.gz

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
H5学习、汤姆猫

作者简介: 黄良钵

打赏

博客站长,前端开发工程师

共 1 条评论关于 “H5学习之制作大名鼎鼎的汤姆猫游戏”

Loading...