js实现让人物走路,点击人物图片实现砍杀

<html>
<head>
<script language =javascript >
var picSub = 0;

var noa = 0;

var time = 150; //时间间隔(毫秒)

var pic1 = "01.png";
var pic2 = "02.png";
var pic3 = "03.png";
var pic4 = "01.png";
var picArr = [pic1, pic2, pic3, pic4]; //定义数组,并将图片的位置所对应的变量放入其中

setInterval(changeImg, time); //使图片按一定时间切换,感官上就是人在行走

function changeImg()
{
 var xElem = document.getElementById("ID_IMG_ROLE");

 if(picSub == picArr.length-1){
  picSub = 0;
 }else{
  picSub += 1;
 } //判断是否超出数组长度,若超出,便使数组下标归0,使其不超出
 
 xElem.src = picArr[picSub]; //切换图片

}

function changeFight()
{
 pic1 = "fight01.png";
 pic2 = "fight02.png";
 pic3 = "fight03.png";
 pic4 = "fight04.png";

 picArr = [pic1, pic2, pic3, pic4];//点击时,picArr数组中的内容改变了。
 
 setTimeout(reduction, 1000);//1秒钟后,恢复数组中的内容
}

function reduction()
{
 pic1 = "01.png";
 pic2 = "02.png";
 pic3 = "03.png";
 pic4 = "01.png";
 picArr = [pic1, pic2, pic3, pic4];
}
</script>
</head>
<body >
<div style="border:10px solid green; height:150px; width:250px; background-color:lightblue;">
<img id="ID_IMG_ROLE" style="margin:50px 0 0 50px;" src ="./01.png" οnclick="changeFight()"/>
</div>
</body>
</html>

所需图片:

(01)(02)(03)(fight01)(fight02)(fight03)(fight04)

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值