我的编程空间,编程开发者的网络收藏夹
学习永远不晚

js实现鼠标跟随小游戏

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

js实现鼠标跟随小游戏

本文实例为大家分享了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});
    }
   });
   
   $("#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 class="lazy" data-src="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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

js实现鼠标跟随小游戏

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

ES6与canvas如何实现鼠标小球跟随效果

这篇文章将为大家详细讲解有关ES6与canvas如何实现鼠标小球跟随效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先,html部分,目前就一个canvas标签。 2023-06-08

跳舞的小人鼠标跟随事件效果实现

这篇文章主要为大家介绍了跳舞的小人,鼠标跟随事件实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-05-19

JavaScript利用canvas实现鼠标跟随特效

canvas是一个很神奇的玩意儿,比如画表格、画海报图都要用canvas去做。本文就来利用canvas制作个简单的鼠标跟随特效,快跟随小编一起学习一下吧
2022-11-13

javascript文字跟随鼠标移动怎么实现

要实现文字跟随鼠标移动的效果,可以通过以下步骤来实现:创建一个div元素,用于容纳文字。监听鼠标移动事件,获取鼠标当前的位置。将文字的位置设置为鼠标的位置。使用CSS样式来控制文字的样式和位置。以下是一个示例代码:HTML:Fol
2023-10-23

使用canvas怎么实现一个跟随鼠标的小圆特效

这篇文章将为大家详细讲解有关使用canvas怎么实现一个跟随鼠标的小圆特效,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。实现:1.定义标签:

北极光之夜

2023-06-14

Android实现打地鼠小游戏

本文实例为大家分享了Android实现打地鼠小游戏的具体代码,供大家参考,具体内容如下 实现结果代码实现 playmouse.javapackage com.example.playmouse; import android.content
2022-06-06

使用Canvas怎么实现鼠标跟随动画背景

本篇文章给大家分享的是有关使用Canvas怎么实现鼠标跟随动画背景,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。如何制作动画常用的绘图动画的方式有以下几种:CSS3SVGCan
2023-06-09

怎么使用JS实现一个跟随鼠标移动洒落的星星特效

这篇“怎么使用JS实现一个跟随鼠标移动洒落的星星特效”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用JS实现一个跟随鼠
2023-07-05

编程热搜

目录