本文实例为大家分享了js实现鼠标跟随小游戏的具体代码，供大家参考，具体内容如下
在创建项目的时候，记得要引入jquery.min.js 的库，也可以引入别的版本的jquery库
在Script里的代码：
<script type='text/javascript'> $(document).ready(function() { var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); var c = $('#c'); var x,y,w,h,cx,cy,l; var y = []; var b = { n:100, c:false, // 颜色 如果是false 则是随机渐变颜色 bc:’#000’, // 背景颜色 r:0.9, o:0.05, a:1, s:20, } var bx = 0,by = 0,vx = 0,vy = 0; var td = 0; var p = 0; var hs = 0; re(); var color,color2; if(b.c){ color2 = b.c; }else{ color = Math.random()*360; } $(window).resize(function(){ re(); }); var tp1=true,tp2 = false,tp3 = false,tp4 = false,tp5 = false,tp6 = false,tp7 = false,tp8 = false,tp9 = false,tp0 = false; function begin(){ if(tp1){ if(!b.c){ color+=.1; color2 = ’hsl(’+color+’,100%,80%)’; } ctx.globalAlpha = 1; ctx.fillStyle = b.bc; ctx.fillRect(0,0,w,h); for(var i=0;i<y.length;i++){ ctx.globalAlpha = y[i].o; ctx.fillStyle = color2; ctx.beginPath(); ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2); ctx.closePath(); ctx.fill(); y[i].r+=b.r; y[i].o-=b.o; if(y[i].o<=0){ y.splice(i,1); i--; }; } }else if(tp2){ if(!b.c){ color+=.1; color2 = ’hsl(’+color+’,100%,80%)’; } ctx.globalAlpha = 1; ctx.fillStyle = b.bc; ctx.fillRect(0,0,w,h); for(var i=0;i<y.length;i++){ ctx.globalAlpha = y[i].o; ctx.fillStyle = color2; ctx.beginPath(); y[i].r=10; ctx.shadowBlur=20; ctx.shadowColor=color2; ctx.arc(y[i].x,y[i].y,y[i].r,0,Math.PI*2); ctx.closePath(); ctx.fill(); ctx.shadowBlur=0; y[i].o-=b.o; y[i].v+=b.a; y[i].y+=y[i].v; if(y[i].y>=h+y[i].r || y[i].o<=0){ y.splice(i,1); i--; }; } }else if(tp3){ if(!b.c){ color+=.1; color2 = ’hsl(’+color+’,100%,80%)’; } td+=5; ctx.globalAlpha = 1; ctx.fillStyle = b.bc; ctx.fillRect(0,0,w,h); for(var i=0;i<y.length;i++){ ctx.globalAlpha = y[i].o; ctx.fillStyle = color2; ctx.beginPath(); ctx.shadowBlur=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,Math.PI*2); ctx.closePath(); ctx.fill(); ctx.shadowBlur=0; y[i].o=y[i].y/h; y[i].v+=b.a; y[i].y-=b.s; y[i].x+=(Math.cos((y[i].y+td)/100)*10); if(y[i].y<=0-y[i].r || y[i].o<=0){ y.splice(i,1); i--; }; } }else if(tp4){ if(!b.c){ color+=.1; color2 = ’hsl(’+color+’,100%,80%)’; } ctx.globalAlpha = 1; ctx.fillStyle = b.bc; ctx.fillRect(0,0,w,h); for(var i=0;i<y.length;i++){ ctx.globalAlpha = y[i].o; ctx.fillStyle = color2; ctx.beginPath(); ctx.shadowBlur=20; ctx.shadowColor=color2; y[i].vx2 += (cx - y[i].wx)/1000; y[i].vy2 += (cy - y[i].wy)/1000; y[i].wx+=y[i].vx2; y[i].wy+=y[i].vy2; y[i].o-=b.o/2; y[i].r=10; ctx.arc(y[i].wx,y[i].wy,y[i].r,0,Math.PI*2); ctx.closePath(); ctx.fill(); ctx.shadowBlur=0; if(y[i].o<=0){ y.splice(i,1); i--; }; } }else if(tp5){ if(!b.c){ color+=.1; color2 = ’hsl(’+color+’,100%,80%)’; } ctx.globalAlpha = .18; ctx.fillStyle = b.bc; ctx.fillRect(0,0,w,h); p+=5; ctx.globalAlpha = 1; ctx.fillStyle = color2; ctx.beginPath(); ctx.shadowBlur=20; ctx.shadowColor=color2; ctx.arc(cx+50*Math.cos(p*Math.PI/180),cy+50*Math.sin(p*Math.PI/180),10,0,Math.PI*2); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.arc(cx+50*Math.cos((p+180)*Math.PI/180),cy+50*Math.sin((p+180)*Math.PI/180),10,0,Math.PI*2); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.arc(cx+50*Math.cos((p+90)*Math.PI/180),cy+50*Math.sin((p+90)*Math.PI/180),10,0,Math.PI*2); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.arc(cx+50*Math.cos((p+270)*Math.PI/180),cy+50*Math.sin((p+270)*Math.PI/180),10,0,Math.PI*2); ctx.closePath(); ctx.fill(); ctx.shadowBlur=0; }else if(tp6){ if(!b.c){ color+=.1; color2 = ’hsl(’+color+’,100%,80%)’; } ctx.globalAlpha = 0.2; ctx.fillStyle = b.bc; ctx.fillRect(0,0,w,h); for(var i=0;i<y.length;i++){ ctx.globalAlpha = y[i].o; ctx.strokeStyle = color2; ctx.beginPath(); ctx.lineWidth = 2; ctx.moveTo(y[i].x,y[i].y); ctx.lineTo((y[i].wx+y[i].x)/2+Math.random()*20,(y[i].wy+y[i].y)/2+Math.random()*20); ctx.lineTo(y[i].wx,y[i].wy); ctx.closePath(); ctx.stroke(); y[i].o-=b.o; if(y[i].o<=0){ y.splice(i,1); i--; }; } }else if(tp7){ if(!b.c){ color+=.1; color2 = ’hsl(’+color+’,100%,80%)’; } ctx.globalAlpha = 0.2; ctx.fillStyle = b.bc; ctx.fillRect(0,0,w,h); if(y.length<b.n*2){ hs = Math.random()*2*Math.PI; y.push({x:cx+((Math.random()-.5)*100*Math.cos(hs)),y:cy+((Math.random()-.5)*100*Math.cos(hs)),o:1,h:hs}); } for(var i=0;i<y.length;i++){ ctx.globalAlpha = y[i].o; ctx.fillStyle = color2; ctx.beginPath(); 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,Math.PI*2); ctx.closePath(); ctx.fill(); y[i].o-=b.o; if(y[i].o<=0){ y[i].h = Math.random()*2*Math.PI; y[i].x = cx+((Math.random()-.5)*100*Math.cos(y[i].h)); y[i].y = cy+((Math.random()-.5)*100*Math.sin(y[i].h)); y[i].o = 1; }; } }else if(tp8){ if(!b.c){ color+=.1; color2 = ’hsl(’+color+’,100%,80%)’; } ctx.globalAlpha = 0.2; ctx.fillStyle = b.bc; ctx.fillRect(0,0,w,h); ctx.fillStyle = color2; 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;i<cx+60;i+=4){ for(var j=cy-60;j<cy+60;j+=4){ if(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))<=60){ ctx.globalAlpha = 1-(Math.sqrt(Math.pow(cx-i,2)+Math.pow(cy-j,2))/60); if(Math.random()<.2){ ctx.fillRect(i,j,3,3); } } } } }else if(tp9){ if(!b.c){ color+=.1; color2 = ’hsl(’+color+’,100%,80%)’; } ctx.globalAlpha = 0.2; ctx.fillStyle = b.bc; ctx.fillRect(0,0,w,h); ctx.fillStyle = color2; 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.length<b.n){ y.push({x:cx,y:cy,xv:0,yv:0,o:1}); } for(var i=0;i<y.length;i++){ if(y[i].xv==0 && y[i].yv==0){ if(Math.random()<.5){ if(Math.random()<.5){ y[i].xv = 3; }else{ y[i].xv = -3; } }else{ if(Math.random()<.5){ y[i].yv = 3; }else{ y[i].yv = -3; } } }else{ if(y[i].xv == 0){ if(Math.random()<.66){ y[i].yv = 0; if(Math.random()<.5){ y[i].xv = 3; }else{ y[i].xv = -3; } } }else if(y[i].yv == 0){ if(Math.random()<.66){ y[i].xv = 0; if(Math.random()<.5){ y[i].yv = 3; }else{ y[i].yv = -3; } } } } y[i].o-=b.o/2; ctx.globalAlpha = y[i].o; y[i].x+=y[i].xv; 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){ if(!b.c){ color+=.1; color2 = ’hsl(’+color+’,100%,80%)’; } ctx.globalAlpha = 0.2; ctx.fillStyle = b.bc; ctx.fillRect(0,0,w,h); ctx.fillStyle = color2; y.push({x:cx,y:cy,xv:2,yv:1,o:1}); for(var i=0;i<y.length;i++){ y[i].o-=b.o/10; ctx.globalAlpha = y[i].o; y[i].x+=(Math.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--; }; } } window.requestAnimationFrame(begin); } function re(){ w = window.innerWidth; h = window.innerHeight; canvas.width = w; canvas.height = h; cx = w/2; cy = h/2; }; c.mousemove(function(e){ cx = e.pageX-c.offset().left; cy = e.pageY-c.offset().top; if(tp4){ if(Math.random()<=.5){ if(Math.random()<=.5){ bx = -10; }else{ bx = w+10; } by = Math.random()*h; }else{ if(Math.random()<=.5){ by = -10; }else{ by = h+10; } bx = Math.random()*w; } vx = (Math.random()-.5)*8; vy = (Math.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.push({x:cx+((Math.random()-.5)*30),y:cy+((Math.random()-.5)*30),o:1,wx:cx,wy:cy}); } }); /*c.mousedown(function(){ c.on(’mousemove’,function(e){ cx = e.pageX-c.offset().left; cy = e.pageY-c.offset().top; y.push({x:cx,y:cy,r:b.r,o:1}); }); c.on(’mouseup’,function(){ c.off(’mouseup’); c.off(’mousemove’); c.off(’moseleave’); }); c.on(’mouseleave’,function(){ c.off(’mouseup’); c.off(’mousemove’); c.off(’moseleave’); }); });*/ $('#btn1').click(function(){ tp1 = true; tp2 = false; tp3 = false; tp4 = false; tp5 = false; tp6 = false; tp7 = false; tp8 = false; tp9 = false; tp0 = false; y=[]; }); $('#btn2').click(function(){ tp1 = false; tp2 = true; tp3 = false; tp4 = false; tp5 = false; tp6 = false; tp7 = false; tp8 = false; tp9 = false; tp0 = false; y=[]; }); $('#btn3').click(function(){ tp1 = false; tp2 = false; tp3 = true; tp4 = false; tp5 = false; tp6 = false; tp7 = false; tp8 = false; tp9 = false; tp0 = false; y=[]; }); $('#btn4').click(function(){ tp1 = false; tp2 = false; tp3 = false; tp4 = true; tp5 = false; tp6 = false; tp7 = false; tp8 = false; tp9 = false; tp0 = false; y=[]; }); $('#btn5').click(function(){ tp1 = false; tp2 = false; tp3 = false; tp4 = false; tp5 = true; tp6 = false; tp7 = false; tp8 = false; tp9 = false; tp0 = false; y=[]; }); $('#btn6').click(function(){ tp1 = false; tp2 = false; tp3 = false; tp4 = false; tp5 = false; tp6 = true; tp7 = false; tp8 = false; tp9 = false; tp0 = false; y=[]; }); $('#btn7').click(function(){ tp1 = false; tp2 = false; tp3 = false; tp4 = false; tp5 = false; tp6 = false; tp7 = true; tp8 = false; tp9 = false; tp0 = false; y=[]; }); $('#btn8').click(function(){ tp1 = false; tp2 = false; tp3 = false; tp4 = false; tp5 = false; tp6 = false; tp7 = false; tp8 = true; tp9 = false; tp0 = false; y=[]; }); $('#btn9').click(function(){ tp1 = false; tp2 = false; tp3 = false; tp4 = false; tp5 = false; tp6 = false; tp7 = false; tp8 = false; tp9 = true; tp0 = false; y=[]; }); $('#btn0').click(function(){ tp1 = false; tp2 = false; tp3 = false; tp4 = false; tp5 = false; tp6 = false; tp7 = false; tp8 = false; tp9 = false; tp0 = true; y=[]; }); (function() { var lastTime = 0; var vendors = [’webkit’, ’moz’]; for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) { window.requestAnimationFrame = window[vendors[xx] + ’RequestAnimationFrame’]; window.cancelAnimationFrame = window[vendors[xx] + ’CancelAnimationFrame’] || window[vendors[xx] + ’CancelRequestAnimationFrame’]; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16.7 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id); }; } }()); begin(); });</script>
在HTML里的代码：
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' '/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='鼠标跟随l'><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><style type='text/css'>* { margin:0; padding:0; }body { position:relative; width:100%; height:100%; overflow:hidden; }button { color:#222; font-size:20px; padding:5px 20px; width:120px; }#btn1 { position:absolute; top:10px; left:10px; }#btn2 { position:absolute; top:60px; left:10px; }#btn3 { position:absolute; top:110px; left:10px; }#btn4 { position:absolute; top:160px; left:10px; }#btn5 { position:absolute; top:210px; left:10px; }#btn6 { position:absolute; top:260px; left:10px; }#btn7 { position:absolute; top:310px; left:10px; }#btn8 { position:absolute; top:360px; left:10px; }#btn9 { position:absolute; top:410px; left:10px; }#btn0 { position:absolute; top:460px; left:10px; }</style><script src='https://www.6hehe.com/bcjs/js/jquery.min.js'></script> <title>光标</title></head> <body> <canvas id='c'></canvas> <div class='btn_left;'> <button id='btn1'>效果1</button> <button id='btn2'>效果2</button> <button id='btn3'>效果3</button> <button id='btn4'>效果4</button> <button id='btn5'>效果5</button> <button id='btn6'>效果6</button> <button id='btn7'>效果7</button> <button id='btn8'>效果8</button> <button id='btn9'>效果9</button> <button id='btn0'>效果10</button> </div> </body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持乐呵呵网。
