汤姆猫游戏demo
emm这里没有上传相关图片及资源，只有html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- 汤姆猫游戏1、屏幕支持动画播放2、图片资源3、播放器：通过点击触发，播放动画--><img id="cat" src="img/Animations/angry/angry_00.jpg"/>
<!-- 点击button --><div id="scratch"></div><div id="stomach"></div>
</body>
<style>*{margin:0px;padding:0px;}#cat{width:100%;height:100%;}/*多选择器语法：#id,#id.....*/#scratch,#stomach{/* background: blueviolet;*/}#scratch{/*依照自己的屏幕分辨率进行设置*/width:300px;height:100px;/* 定位属性：1、固定定位 fixed ：针对窗口定位位置，不会受到滚动条的影响2、绝对定位（优先）：针对于父级标签定位位置，父级要有定位属性3、相对定位：针对于原本自己所在的位置定位*/position:absolute;bottom:700px;left:350px;}#stomach{width:300px;height:250px;position:absolute;bottom:400px;left:350px;//border-radius:50%;}
</style>
<!-- javaScript运行在网页上的脚本-->
<script>//6、增加点击事件 onclick=functiondocument.getElementById("stomach").onclick = function () {StartAnim("stomach", 33);}document.getElementById("scratch").onclick = function () {StartAnim("scratch",55);}var time=null;//1、声明函数：播放动画，StartAnim()function StartAnim(path,count) {//关闭计时器clearInterval(time);var index=0;//1、动态替换img标签的src属性//document对象：文档键树对象，包含了获取、设置、删除标签的函数var cat = document.getElementById("cat");//2、实现 自动轮播图片:间隔时间//setInterval:设置计时器，根据指定间隔时间执行代码块time = setInterval(function () {setInterval(function () {//4、设置index<10 拼接“0”，超出图片范围，关闭计时器if(++index<count){if(++index<10) {index = "0" + index;}//3、设置img标签的src属性cat.src="img/Animations/"+path+"/"+path+"_"+index+".jpg";}else{clearInterval(time);}},200);})}
</script>
</html>
