这篇文章主要为大家详细介绍了射流研究…实现鼠标跟随小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了射流研究…实现鼠标跟随小游戏的具体代码，供大家参考，具体内容如下
在创建项目的时候，记得要引入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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。