js鼠标点击兔子发射爆破特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js鼠标点击兔子发射爆破特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js鼠标点击兔子发射爆破特效</title>

<style>
	
	body{padding:0; margin:0; font-size:9pt; font-family:"Microsoft Yahei",Verdana, Arial, Helvetica, sans-serif; background:url(images/s1.png) right bottom fixed no-repeat; background-color:#F0F0F0 !important;}
</style>
</head>

<body>


<script type="text/javascript" src="js/rabbit.js"></script>
<script>
function create_rabbit(e){
	var s=new HoverRabbit();
	s.start();
}
if(window.attachEvent) window.attachEvent("onload",create_rabbit);
else window.addEventListener("load",create_rabbit,false);
</script>
</body>
</html>

JS代码(rabbit.js):

/*资源来自互联网*/
function HoverRabbit(){
	this.explodeImage=new Image();
	this.explodeImage.src="images/explode.png"for(var i=1;
	i<=6;
	i++){
	this.images[i]=new Image();
	this.images[i].src="images/s"+i+".png";
}
if(typeof(CanvasGradient)!='undefined' && screen.width>1100){
	this.canvas=document.createElement("canvas");
	this.canvas.width=screen.width;
	this.canvas.height=screen.height;
	this.canvas.style.position='absolute';
	this.canvas.style.left='0px';
	this.canvas.style.top='0px';
	this.canvas.style.display='none';
	document.body.appendChild(this.canvas);
	this.canvas.style.position='fixed';
}
}
HoverRabbit.prototype={
	images:[],explodeImage:null,eyePositions:[],current:1,frame:1,canvas:null,interval:null,start:function(){
	var me=this;
	this.eyePositions[1]={
	eye1x:123,eye1y:47,eye2x:104,eye2y:53}
;
	this.eyePositions[2]={
	eye1x:120,eye1y:50,eye2x:101,eye2y:54}
;
	this.eyePositions[3]={
	eye1x:119,eye1y:54,eye2x:97,eye2y:56}
;
	this.eyePositions[4]={
	eye1x:112,eye1y:61,eye2x:90,eye2y:61}
;
	this.eyePositions[5]={
	eye1x:105,eye1y:64,eye2x:85,eye2y:61}
;
	this.eyePositions[6]={
	eye1x:98,eye1y:68,eye2x:79,eye2y:56}
;
	document.onmousemove=function(e){
	me.onmousemove(e);
}
if(this.canvas){
	document.addEventListener("click",function(e){
	me.ondblclick(e);
}
);
}
}
,onmousemove:function(e){
	var event=e||window.event;
	var deg=Math.abs(screen.height-event.screenY)/(Math.abs(screen.width-event.screenX)+1);
	var n=1;
	if(deg>2) n=6;
	else if(deg>1.4) n=5;
	else if(deg>0.7) n=4;
	else if(deg>0.45) n=3;
	else if(deg>0.2) n=2;
	if(this.current!=n){
	document.body.style.backgroundImage="url("+this.images[n].src+")";
	this.current=n;
}
}
,drawBomb:function(ctxt,n,x,y){
	var sx=64*(n%4);
	var sy=64*(Math.floor(n/4));
	ctxt.drawImage(this.explodeImage,sx,sy,64,64,x-32,y-32,64,64);
}
,ondblclick:function(e){
	if(this.canvas.style.display!='none') return;
	var me=this;
	if(e.clientX>window.innerWidth-200 && e.clientY>window.innerHeight-200) return;
	var ctxt=this.canvas.getContext("2d");
	this.frame=1;
	this.interval=setInterval(function(e2){
	ctxt.clearRect(0,0,me.canvas.width,me.canvas.height);
	switch(me.frame){
	case 1:ctxt.strokeStyle='rgba(247,166,71,1)';
	me.canvas.style.display='block';
	case 2:if(me.frame==2){
	ctxt.strokeStyle='rgba(247,166,71,0.5)';
	me.drawBomb(ctxt,0,e.clientX,e.clientY);
	//document.body.style.marginTop='-3px';
	//document.body.style.marginLeft='-3px';
}
case 3:if(me.frame==3){
	ctxt.strokeStyle='rgba(247,166,71,0.1)';
	me.drawBomb(ctxt,1,e.clientX,e.clientY);
	//document.body.style.marginTop='3px';
	//document.body.style.marginLeft='3px';
}
var eye1x=window.innerWidth-me.eyePositions[me.current].eye1x;
	var eye1y=window.innerHeight-me.eyePositions[me.current].eye1y;
	ctxt.lineWidth=3;
	ctxt.beginPath();
	ctxt.moveTo(eye1x,eye1y);
	ctxt.lineTo(e.clientX,e.clientY);
	ctxt.stroke();
	var eye2x=window.innerWidth-me.eyePositions[me.current].eye2x;
	var eye2y=window.innerHeight-me.eyePositions[me.current].eye2y;
	ctxt.beginPath();
	ctxt.moveTo(eye2x,eye2y);
	ctxt.lineTo(e.clientX,e.clientY);
	ctxt.stroke();
	break;
	case 4:me.drawBomb(ctxt,2,e.clientX,e.clientY);
	//document.body.style.marginTop='0px';
	//document.body.style.marginLeft='0px';
	break;
	case 14:me.canvas.style.display='none';
	window.clearInterval(me.interval);
	break;
	default:me.drawBomb(ctxt,me.frame-2,e.clientX,e.clientY);
}
me.frame++;
}
,50);
}
}
;

附件:下载该文件资源,减少时间成本(增值服务)