• 当前标签:汤姆猫

程序开发 H5学习之制作大名鼎鼎的汤姆猫游戏

大名鼎鼎的汤姆猫,用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

2017-04-06 00:48:12 118 1 0
阅读详情
  • 1
前往