汤姆猫

汤姆猫

说明：点击汤姆猫的不同部位会做不同的动作发出不同的声音

素材： https://download.csdn.net/download/lollipop_sun/10282500

代码：

<! DOCTYPE html >

< html lang = "en" >

< head >

< meta charset = "UTF-8" >

< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >

< title > 汤姆猫 </ title >

< style >

html,

body {

height : 100% ;

margin : 0px ;

overflow : hidden;

}

img {

width : 100% ;

height : 100% ;

}

< / style >

</ head >

<!-- 添加点击事件 -->

< body onclick = "action(event)" >

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

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

< script >

// 使用变量记录当前动画状态，false表示没做动画

var playing = false ;

var tom = document.getElementById( 'tom' )

var player = document.getElementById( 'player' )

var width = document.body.clientWidth

var height = document.body.clientHeight

// console.log(width)

// console.log(height)

// 当窗口大小改变的时候 会调用方法 重新获取宽高

window.onresize = function () {

width = document.body.clientWidth;

height = document.body.clientHeight;

}

// 动画名称 图片张数 播放声音张数

function play(animationName, count, startAt) {

// 如果正在做动画，就返回

if (playing == true ) {

return ;

}

// 如果点击tom而且点击时没有做动画，说明现在是可以做动画的，状态改成true

playing = true

// 声明一个变量作为初始图片的编号

var i = 0 ;

// 切换图片

function doAnimation() {

// var image = 'img/pie/pie_' + (i < 10 ? '0' + i : i) + '.jpg';

var image = 'img/' + animationName + '/' + animationName + '_' + (i < 10 ? '0' + i : i) + '.jpg' ;

// 将图片添加到img标签上

tom.src = image;

i++

if (i == startAt) {

// player.src = 'img/sounds/pie.m4a'

player.src = 'img/sounds/' + animationName + '.m4a'

player.play()

}

if (animationName == 'drink' && i == 16 ) {

player.src = 'img/sounds/pour.m4a'

player.play()

}

if (animationName == 'knockout' && i == 1 ) {

player.src = 'img/sounds/fall.m4a'

}

if (i < count) {

setTimeout(doAnimation, 100 );

}

else {

playing = false ;

}

}

doAnimation();

}

function action(event) {

// event.pageX鼠标的X坐标

// event.pageY鼠标的Y坐标

// 1440 1080 屏幕的宽一般是360的倍数

var pointX = event.pageX * 360 / width;

var pointY = event.pageY * 640 / height;

console.log(pointX);

console.log(pointY);

if (pointX > 140 && pointX < 225 && pointY > 400 && pointY < 450 ) {

// 将参数对应的传到play函数中

play( 'angry' , 25 , 0 )

}

if (pointX > 119 && pointX < 245 && pointY > 465 && pointY < 565 ) {

play( 'stomach' , 33 , 0 )

}

if (pointX > 155 && pointX < 210 && pointY > 190 && pointY < 230 ) {

play( 'knockout' , 80 , 13 )

}

if (pointX > 137 && pointX < 235 && pointY > 250 && pointY < 280 ) {

if (pointX < 185 )

play( 'eat' , 39 , 0 )

else

play( 'drink' , 80 , 30 )

}

if (pointX > 124 && pointX < 240 && pointY > 160 && pointY < 190 ) {

play( 'cymbal' , 12 , 0 )

}

if (pointX > 246 && pointX < 280 && pointY > 490 && pointY < 580 ) {

play( 'fart' , 27 , 0 )

}

if (pointX > 80 && pointX < 120 && pointY > 110 && pointY < 195 ) {

play( 'scratch' , 55 , 15 )

}

if (pointX > 240 && pointX < 290 && pointY > 110 && pointY < 200 ) {

play( 'pie' , 24 , 12 )

}

if (pointX > 125 && pointX < 175 && pointY > 570 && pointY < 620 ) {

play( 'foot_right' , 29 , 0 )

}

if (pointX > 180 && pointX < 230 && pointY > 570 && pointY < 620 ) {

play( 'foot_left' , 29 , 3 )

}

}

< / script >

</ body >

</ html >