大名鼎鼎的汤姆猫，用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)
}
}
谢谢分享，欢迎回访，自助实体店加盟www.makingh.com