js实现Tomcat游戏
来源:互联网 发布:java中类的实例化 编辑:程序博客网 时间:2024/05/17 07:58
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
body,html{
width:100%;
height:100%;
}
#cat{
position: absolute;
width: 100%;
height: 100%;
}
img{
position: absolute;
width:50px;
}
#cymbal{
left: 5%;
bottom: 40%;
}
#eat{
left: 5%;
bottom:20%
}
#drink{
left: 5%;
bottom: 30%;
}
#fart{right: 5%;bottom: 40%;}
#pie{right: 5%;bottom: 30%;}
#scratch{right: 5%;bottom: 20%;}
</style>
</head>
<body>
<img id="cat" src="img/angry/angry_00.jpg"/>
<!--加载按钮-->
<img id="cymbal" src="img/cymbal/cymbal.png">
<img id="eat" src="img/eat/eat.png">
<img id="drink" src="img/drink/drink.png">
<img id="pie" src="img/pie/pie.png">
<img id="fart" src="img/fart/fart.png">
<img id="scratch" src="img/scratch/scratch.png">
<script>
var timer;
window.onload=function(){
// 点击相应按钮,播放相应图片。动画名称,图片总数
document.getElementById("cymbal").onclick=function(){
startAnimation("cymbal",12);
}
document.getElementById("eat").onclick=function(){
startAnimation("drink",81);
}
document.getElementById("drink").onclick=function(){
startAnimation("eat",40);
}
document.getElementById("fart").onclick=function(){
startAnimation("fart",28);
}
document.getElementById("pie").onclick=function(){
startAnimation("pie",24);
}
document.getElementById("scratch").onclick=function(){
startAnimation("scratch",56);
}
}
//播放动画的方法,动画名称和图片总数
function startAnimation(name,count){
clearInterval(timer);
var index=0;
var img=document.getElementById("cat");
timer=setInterval(function(){
//判断是否可以继续播放
if(++index<count){
img.src=getImageName(name,index);
}else{
//没有可以播放的图片,清楚定时器
clearInterval(timer);
}
},80);
}
//图片路径
//根据动画名和图片索引返回图片名
function getImageName(name,index){
//img/angry/angry_00.jpg
return "img/"+name+"/"+name+"_"+getIndex(index)+".jpg" ;
}
//实现02功能
function getIndex(index){
//若小于10,拼接一个0
if(index<10){
return "0"+index;
}else{
return index;
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
body,html{
width:100%;
height:100%;
}
#cat{
position: absolute;
width: 100%;
height: 100%;
}
img{
position: absolute;
width:50px;
}
#cymbal{
left: 5%;
bottom: 40%;
}
#eat{
left: 5%;
bottom:20%
}
#drink{
left: 5%;
bottom: 30%;
}
#fart{right: 5%;bottom: 40%;}
#pie{right: 5%;bottom: 30%;}
#scratch{right: 5%;bottom: 20%;}
</style>
</head>
<body>
<img id="cat" src="img/angry/angry_00.jpg"/>
<!--加载按钮-->
<img id="cymbal" src="img/cymbal/cymbal.png">
<img id="eat" src="img/eat/eat.png">
<img id="drink" src="img/drink/drink.png">
<img id="pie" src="img/pie/pie.png">
<img id="fart" src="img/fart/fart.png">
<img id="scratch" src="img/scratch/scratch.png">
<script>
var timer;
window.onload=function(){
// 点击相应按钮,播放相应图片。动画名称,图片总数
document.getElementById("cymbal").onclick=function(){
startAnimation("cymbal",12);
}
document.getElementById("eat").onclick=function(){
startAnimation("drink",81);
}
document.getElementById("drink").onclick=function(){
startAnimation("eat",40);
}
document.getElementById("fart").onclick=function(){
startAnimation("fart",28);
}
document.getElementById("pie").onclick=function(){
startAnimation("pie",24);
}
document.getElementById("scratch").onclick=function(){
startAnimation("scratch",56);
}
}
//播放动画的方法,动画名称和图片总数
function startAnimation(name,count){
clearInterval(timer);
var index=0;
var img=document.getElementById("cat");
timer=setInterval(function(){
//判断是否可以继续播放
if(++index<count){
img.src=getImageName(name,index);
}else{
//没有可以播放的图片,清楚定时器
clearInterval(timer);
}
},80);
}
//图片路径
//根据动画名和图片索引返回图片名
function getImageName(name,index){
//img/angry/angry_00.jpg
return "img/"+name+"/"+name+"_"+getIndex(index)+".jpg" ;
}
//实现02功能
function getIndex(index){
//若小于10,拼接一个0
if(index<10){
return "0"+index;
}else{
return index;
}
}
</script>
</body>
</html>
阅读全文
0 0
- js实现Tomcat游戏
- js实现方格游戏
- js实现推箱子游戏
- js+canvas实现纸牌游戏
- Js实现贪吃蛇游戏
- 用JS实现贪吃蛇游戏
- 实例,js实现的推箱子游戏
- 非html5实现js版弹球游戏
- js实现的简单五子棋游戏
- 使用js实现“别踩白块儿”游戏
- JS实现网页版扫雷游戏
- js、html实现2048游戏源码
- js+canvas实现简单的五子棋游戏
- canvas+js实现贪吃蛇游戏
- 简单的JS实现猜数游戏
- 原生JS+Canvas实现五子棋游戏实例
- 纯js 2048游戏,js 2048游戏实现,无上限的2048游戏,有道具的2048游戏
- 纯js 消灭星星游戏,js 消灭星星游戏实现原理,有道具的消灭星星
- 重命名文件或文件夹
- OpenCV 2.4.10 +VS2013 开发环境配置
- C++作业7
- 《effective c++》读书笔记
- ArrayList
- js实现Tomcat游戏
- Redis
- 实现多线程的三种方法
- my dream
- C++第6次作业
- 集群之rhcs
- java web week_one
- c++第五次作业
- c++实验6-数组操作