这篇文章主要为大家详细介绍了射流研究…实现鼠标跟随小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了射流研究…实现鼠标跟随小游戏的具体代码，供大家参考，具体内容如下

在创建项目的时候，记得要引入jquery.min.js的库，也可以引入别的版本的jquery库

在脚本里的代码：

脚本类型=文本/javascript

$(文档).准备好了(函数())。

var canvas=文档。getelement byid( c )；

var CTX=画布。获取上下文(“2d”)；

var c=$(# c)；

变量x、y、w、h、cx、cy、l；

var y=[]:

var b=>

n:100，

c:假，///

BC:“# 000”//”

答：0.9,

o:0.05，

答：1,

斯：20分，

}

var bx=0 . by=0 . VX=0 . vy=0；

var TD=0；

变量p=0；

var hs=0；

re()；

var颜色，颜色2个；

如果(公元前)}

颜色2=直流；

}否则

颜色=数学。random()* 360；

}

$(窗口)。resize(函数())函数[

re()；

});

var tp1=真，tp2=假，tp3=假，tp4=假，tp5=假，tp6=假，tp7=假，tp8=假，tp9=假，tp0=假；

函数开始()

if(TP 1)}

如果(!公元前。]

颜色=.1;

color2=hsl( color ，100%，80%)；

}

CTX。全局alpha=1；

ctx。fillstyle=b . bc

CTX。fillrect(0.0、w、h)；

S7-1200可编程控制器：iy。长度；>

CTX。全局alpha=y[I]。o；

ctx.fillStyle=颜色2:

ctx.beginPath():

ctx.arc(y[i].x，y[i]。y，y[i]。r，0，数学。pi * 2)；

CTX。close path()；

ctx.fill():

y[I]。r=b . r

和【我】。o-=b . o。

如果(y[I]。o=0)}

y型拼接(一、一);

我.I-；

}:

}

} else if(tp2)}

如果(!公元前。]

颜色=.1;

color2=hsl( color ，100%，80%)；

}

CTX。全局alpha=1；

ctx。fillstyle=b . bc

CTX。fillrect(0.0、w、h)；

S7-1200可编程控制器：iy。长度；>

CTX。全局alpha=y[I]。o；

ctx.fillStyle=颜色2:

ctx.beginPath():

y[I]。r=10

ctx。暗影模糊=20

ctx.shadowColor=color2:

ctx.arc(y[i].x，y[i]。y，y[i]。r，0，数学。pi * 2)；

CTX。close path()；

ctx.fill():

ctx。阴影模糊=0

和【我】。o-=b . o。

y[I]。v=b . a。

y[I]。y=y[I]。五；

if(y[i]。y=h和【我】。r |，y[i]。o=0)>

y型拼接(一、一);

我.I-；

}:

}

} else if(tp3)}

如果(!公元前。]

颜色=.1;

color2=hsl( color ，100%，80%)；

}

td=5

CTX。全局alpha=1；

ctx。fillstyle=b . bc

CTX。fillrect(0.0、w、h)；

S7-1200可编程控制器：iy。长度；>

CTX。全局alpha=y[I]。o；

ctx.fillStyle=颜色2:

ctx.beginPath():

ctx。暗影模糊=20

ctx.shadowColor=color2:

y[I]。r=(1-(y[I])。y/h))* 20；

ctx.arc(y[i].x，y[i]。y，y[i]。r，0，数学。pi * 2)；

CTX。close path()；

ctx.fill():

ctx。阴影模糊=0

和【我】。o=y[I]。y/h；

y[I]。v=b . a。

和【我】。y-=b . s。

y[I]。x=(数学。cos((y[I])。y TD)/100)* 10)；

if(y[i]。y=0-y[i]。r |，y[i]。o=0)>

y型拼接(一、一);

我.I-；

}:

}

} else if(tp4)}

如果(!公元前。]

颜色=.1;

color2=hsl( color ，100%，80%)；

}

CTX。全局alpha=1；

ctx。fillstyle=b . bc

CTX。fillrect(0.0、w、h)；

S7-1200可编程控制器：iy。长度；>

CTX。全局alpha=y[I]。o；

ctx.fillStyle=颜色2:

ctx.beginPath():

ctx。暗影模糊=20

ctx.shadowColor=color2:

y[I]。vx2=(CX-y[I])。wx)/1000；

y[I]。vy 2=(cy-y[I]。wy)/1000；

y[I]。wx=y[I]。vx2

y[I]。wy=y[I]。vy 2；

和【我】。o-=b . o/2；

y[I]。r=10

ctx.arc(y[i].wx，y[i]。wy，y[i]。r，0，数学。pi * 2)；

CTX。close path()；

ctx.fill():

ctx。阴影模糊=0

如果(y[I]。o=0)}

y型拼接(一、一);

我.I-；

}:

}

} else if(tp5)}

如果(!公元前。]

颜色=.1;

color2=hsl( color ，100%，80%)；

}

ctx全局阿尔法=。18;

ctx。fillstyle=b . bc

ctx.fillRect(0，0，w，h)；

p=5；

CTX。全局alpha=1；

CTX。填充样式=颜色2；

CTX。begin path()；

ctx.shadowBlur=20

ctx。暗影颜色=颜色2

ctx.arc(cx 50*Math.cos(p*Math .PI/180)，cy 50*Math.sin(p*Math ./180)，10，0，数学.* 2)；

CTX。关闭路径()；

CTX。fill()；

CTX。begin path()；

CTX。arc(CX 50 *数学。cos((第180页)*数学.PI/180)，cy 50*Math.sin((p 180)*Math ./180)，10，0，数学.* 2)；

CTX。关闭路径()；

CTX。fill()；

CTX。begin path()；

CTX。arc(CX 50 *数学。cos((第90页)*数学.PI/180)，cy 50*Math.sin((p 90)*Math ./180)，10，0，数学.* 2)；

CTX。关闭路径()；

CTX。fill()；

CTX。begin path()；

CTX。arc(CX 50 *数学。cos((第270页)*数学.PI/180)，cy 50*Math.sin((p 270)*Math ./180)，10，0，数学.* 2)；

CTX。关闭路径()；

CTX。fill()；

CTX。阴影模糊=0；

}else if(tp6){

如果(!公元前){

颜色=.1;

color2=hsl( color ，100%，80%)；

}

ctx.globalAlpha=0.2

CTX。填充样式=b . BC

ctx.fillRect(0，0，w，h)；

for(var I=0；长度；i ){

ctx.globalAlpha=y[i].o；

CTX。笔画样式=颜色2；

CTX。begin path()；

CTX。线宽=2；

ctx.moveTo(y[i].x，y[i].y)；

ctx.lineTo((y[i].wx y[i].x)/2 Math.random()*20，(y[i].喂，喂，喂.y)/2数学。random()* 20)；

ctx.lineTo(y[i].wx，y[i].wy)；

CTX。关闭路径()；

CTX。笔画()；

y[i].o-=b . o；

if(y[i]).o=0){

y.splice(i，1)；

I-；

};

}

}else if(tp7){

如果(!公元前){

颜色=.1;

color2=hsl( color ，100%，80%)；

}

ctx.globalAlpha=0.2

CTX。填充样式=b . BC

ctx.fillRect(0，0，w，h)；

if(y.lengthb.n*2){

hs=Math.random()*2*Math .PI；

y。推({ x:CX((数学。random()-。5)* 100 *数学。cos(hs))，y:cy((数学。random()-。5)* 100 *数学。cos(hs))、o:1、h:hs })；

}

for(var I=0；长度；i ){

ctx.globalAlpha=y[i].o；

CTX。填充样式=颜色2；

CTX。begin path()；

y[i].x=(cx-y[i].x)/10；

y[i].y=(cy-y[i]).y)/10；

ctx.arc(y[i].x，y[i].y，1，0，数学.* 2)；

CTX。关闭路径()；

CTX。fill()；

y[i].o-=b . o；

if(y[i]).o=0){

y[i].h=Math.random()*2*Math .PI；

y[i].x=CX((数学。random()-。5)* 100 *数学。因为(y[I]).h))；

y[i].y=cy((数学。random()-。5)* 100 *数学。罪恶.h))；

y[i].o=1；

};

}

}else if(tp8){

如果(!公元前){

颜色=.1;

color2=hsl( color ，100%，80%)；

}

ctx.globalAlpha=0.2

CTX。填充样式=b . BC

ctx.fillRect(0，0，w，h)；

CTX。填充样式=颜色2；

if(cx%4==0){

CX=1；

}else if(cx%4==2){

cx-=1

}

else if(cx%4==3){

cx-=2

}

if(cy%4==0){

cy=1；

}else if(cy%4==2){

cy-=1

}

else if(cy%4==3){

cy-=2

}

for(var I=CX-60；icx 60i=4){

for(var j=cy-60；jcy 60j=4){

if(Math.sqrt(Math.pow(cx-i，2) Math.pow(cy-j，2))=60){

CTX。全局alpha=1-(数学。sqrt(数学。pow(CX-I，2) Math.pow(cy-j，2))/60)；

如果(数学。random()2){

ctx.fillRect(i，j，3，3)；

}

}

}

}

}else if(tp9){

如果(!公元前){

颜色=.1;

color2=hsl( color ，100%，80%)；

}

ctx.globalAlpha=0.2

CTX。填充样式=b . BC

ctx.fillRect(0，0，w，h)；

CTX。填充样式=颜色2；

if(cx%4==0){

CX=1；

}else if(cx%4==2){

cx-=1

}

else if(cx%4==3){

cx-=2

}

if(cy%4==0){

cy=1；

}else if(cy%4==2){

cy-=1

}

else if(cy%4==3){

cy-=2

}

if(y.lengthb.n){

y.push({x:cx，y:cy，xv:0，yv:0，o:1 })；

}

for(var I=0；长度；i ){

if(y[i]).xv==0 y[i].yv==0){

如果(数学。随机()5){

如果(数学。随机()5){

y[i].XV=3；

}否则{

y[i].XV=-3；

}

}否则{

如果(数学。随机()5){

y[i].yv=3；

}否则{

y[i].yv=-3；

}

}

}否则{

if(y[i]).xv==0){

如果(数学。random()(66){

y[i].yv=0；

如果(数学。随机()5){

y[i].XV=3；

}否则{

y[i].XV=-3；

}

}

}else if(y[i].yv==0){

如果(数学。random()(66){

y[i].XV=0；

如果(数学。随机()5){

y[i].yv=3；

}否则{

y[i].yv=-3；

}

}

}

}

y[i].o-=b . o/2；

ctx.globalAlpha=y[i].o；

y[i].x=y[i].十五；

y[i].y=y[i].yv；

ctx.fillRect(y[i].x，y[i].y，3，3)；

if(y[i]).o=0){

y.splice(i，1)；

I-；

};

}

}else if(tp0){

如果(!公元前){

颜色=.1;

color2=hsl( color ，100%，80%)；

}

ctx.globalAlpha=0.2

CTX。填充样式=b . BC

ctx.fillRect(0，0，w，h)；

CTX。填充样式=颜色2；

y.push({x:cx，y:cy，xv:2，yv:1，o:1 })；

for(var I=0；长度；i ){

y[i].o-=b . o/10；

ctx.globalAlpha=y[i].o；

y[i].x=(数学。random()-。5)* 4;

y[i].y-=1；

ctx.fillRect(y[i].x，y[i].y，2，2)；

if(y[i]).o=0){

y.splice(i，1)；

I-；

};

}

}

窗户。requestanimationframe(begin)；

}

函数re(){

w=window.innerWidth

h=window.innerHeight

画布。宽度=w；

画布。高度=h；

CX=w/2；

cy=h/2；

};

鼠标移动(函数(e){

cx=e.pageX-c.offset().左；

cy=e.pageY-c.offset().顶；

如果(tp4){

if(Math.random()=.5){

if(Math.random()=.5){

bx=-10；

}否则{

bx=w 10

}

by=数学。random()* h；

}否则{

if(Math.random()=.5){

by=-10；

}否则{

by=h 10

}

bx=数学。random()* w；

}

VX=(数学。random()-。5)* 8;

vy=(数学。random()-。5)* 8;

}

if(tp1 || tp2 || tp3){

y.push({x:cx，y:cy，r:b.r，o:1，v:0 })；

}else if(tp4){

y.push({x:cx，y:cy，r:b.r，o:1，v:0，wx:bx，wy:by，vx2:vx，vy2:vy })；

}else if(tp6){

y。推({ x:CX((数学。random()-。5)* 30)，y:cy ((Math.random()-.5)*30)，o:1，wx:cx，wy:cy}).

}

});

/*c.mousedown(function(){

c.on(鼠标移动，函数(e){

cx=e.pageX-c.offset().左；

cy=e.pageY-c.offset().顶；

y.push({x:cx，y:cy，r:b.r，o:1 })；

});

c.on(mouseup ，function(){

c。off(“mouseup”)；

c。off(“鼠标移动”)；

c。off(" moseleave ")；

});

c.on(mouseleave ，function(){

c。off(“mouseup”)；

c。off(“鼠标移动”)；

c。off(" moseleave ")；

});

});*/

$(#btn1 ).单击（函数(){

tp1=真；

tp2=假；

tp3=假；

tp4=假；

tp5=假；

tp6=假；

tp7=假；

tp8=假；

tp9=假；

tp0=假；

y=[]；

});

$(#btn2 ).单击（函数(){

tp1=假；

tp2=真；

tp3=假；

tp4=假；

tp5=假；

tp6=假；

tp7=假；

tp8=假；

tp9=假；

tp0=假；

y=[]；

});

$(#btn3 ).单击（函数(){

tp1=假；

tp2=假；

tp3=真；

tp4=假；

tp5=假；

tp6=假；

tp7=假；

tp8=假；

tp9=假；

tp0=假；

y=[]；

});

$(#btn4 ).单击（函数(){

tp1=假；

tp2=假；

tp3=假；

tp4=真；

tp5=假；

tp6=假；

tp7=假；

tp8=假；

tp9=假；

tp0=假；

y=[]；

});

$(#btn5 ).单击（函数(){

tp1=假；

tp2=假；

tp3=假；

tp4=假；

tp5=真；

tp6=假；

tp7=假；

tp8=假；

tp9=假；

tp0=假；

y=[]；

});

$(#btn6 ).单击（函数(){

tp1=假；

tp2=假；

tp3=假；

tp4=假；

tp5=假；

tp6=真；

tp7=假；

tp8=假；

tp9=假；

tp0=假；

y=[]；

});

$(#btn7 ).单击（函数(){

tp1=假；

tp2=假；

tp3=假；

tp4=假；

tp5=假；

tp6=假；

tp7=真；

tp8=假；

tp9=假；

tp0=假；

y=[]；

});

$(#btn8 ).单击（函数(){

tp1=假；

tp2=假；

tp3=假；

tp4=假；

tp5=假；

tp6=假；

tp7=假；

tp8=真；

tp9=假；

tp0=假；

y=[]；

});

$(#btn9 ).单击（函数(){

tp1=假；

tp2=假；

tp3=假；

tp4=假；

tp5=假；

tp6=假；

tp7=假；

tp8=假；

tp9=真；

tp0=假；

y=[]；

});

$(#btn0 ).单击（函数(){

tp1=假；

tp2=假；

tp3=假；

tp4=假；

tp5=假；

tp6=假；

tp7=假；

tp8=假；

tp9=假；

tp0=真；

y=[]；

});

（函数(){

var last time=0；

var vendors=[webkit ， moz ]；

for(var xx=0；xx厂商。长度！window . requestanimationframexx){

窗户。RequestAnimationFrame=window[vendors[xx] RequestAnimationFrame ]；

窗户。CancelAnimationFrame=window[vendors[xx] CancelAnimationFrame ]| |

window[vendors[xx] CancelRequestAnimationFrame ]；

}

如果(!window.requestAnimationFrame) {

窗户。requestanimationframe=function(callback，element) {

var currTime=新日期()。getTime()；

var timeToCall=Math.max(0，16.7-(当前时间-上次时间))；

var id=窗口。settimeout(function(){

回调(curr time通话时间)；

}，打电话的时间)；

last time=curr time调用时间；

返回id；

};

}

如果(!window.cancelAnimationFrame) {

窗户。cancelanimationframe=函数(id){

清除超时(id)；

};

}

}());

begin()；

});

/脚本

在超文本标记语言里的代码：

！DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/XHTML 1/DTD/XHTML 1-Transitional。 DTD

html xmlns=鼠标跟随我

头

meta http-equiv= Content-Type Content= text/html；charset=utf-8 /

style type=text/css

* {边距：0;填充：0;}

身体{位置：相对；宽度：100%;身高：100%;溢出：隐藏；}

按钮{ color:# 222；字体大小：20px填充：5px 20px宽度：120px}

# Bt n1 {位置：绝对；top:10px；左：10px}

#btn2 {位置：绝对；顶配：60px左：10px}

#btn3 {位置：绝对；top:110 px；左：10px}

# BTN 4 {位置：绝对；顶配：160像素左：10px}

# BTN 5 {位置：绝对；顶配：210 px左：10px}

#btn6 {位置：绝对；顶配：260像素左：10px}

#btn7 {位置：绝对；顶配：310 px左：10px}

#btn8 {位置：绝对；顶配：360像素左：10px}

#btn9 {位置：绝对；顶配：410 px左：10px}

#btn0 {位置：绝对；顶配：460像素左：10px}

/风格

脚本src=js/jquery.min.js/script

标题光标/标题

/头

身体

画布id=c/canvas

div class= btn _ left

按钮id=btn1 效果1/按钮

按钮id=btn2 效果2/按钮

按钮id=btn3 效果3/按钮

按钮id=btn4 效果4/按钮

按钮id=btn5 效果5/按钮

按钮id=btn6 效果6/按钮

按钮id=btn7 效果7/按钮

按钮id=btn8 效果8/按钮

按钮id=btn9 效果9/按钮

按钮id=btn0 效果10/按钮

/div

/body

/html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。