js to realize the mouse following game

js to realize the mouse following game

This article shares the specific code of js to implement the mouse following game for your reference. The specific content is as follows

When creating a project, remember to import the jquery.min.js library. You can also import other versions of the jquery library.

Code in 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, // If the color is false, it will be a random gradient color bc:'#000', // Background color 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(bc){
    color2 = bc;
   }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(!bc){
      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+=br;
      y[i].o-=bo;
      if(y[i].o<=0){
       y.splice(i,1);
       i--;
      };
     }
    }else if(tp2){
     if(!bc){
      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-=bo;
      y[i].v+=ba;
      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(!bc){
      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+=ba;
      y[i].y-=bs;
      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(!bc){
      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-=bo/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(!bc){
      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(!bc){
      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-=bo;
      if(y[i].o<=0){
       y.splice(i,1);
       i--;
      };
     }
    }else if(tp7){
     if(!bc){
      color+=.1;
      color2 = 'hsl('+color+',100%,80%)';
     }
     ctx.globalAlpha = 0.2;
     ctx.fillStyle = b.bc;
     ctx.fillRect(0,0,w,h);
     if(y.length<bn*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-=bo;
      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(!bc){
      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(!bc){
      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<bn){
      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-=bo/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(!bc){
      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-=bo/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:br,o:1,v:0});
    }else if(tp4){
     y.push({x:cx,y:cy,r:br,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:br,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>

Code in HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="mouse follow 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="js/jquery.min.js"></script>
 
<title>Cursor</title>
</head>
 
<body>
 <canvas id="c"></canvas>
    <div class="btn_left;">
     <button id="btn1">Effect 1</button>
        <button id="btn2">Effect 2</button>
        <button id="btn3">Effect 3</button>
        <button id="btn4">Effect 4</button>
        <button id="btn5">Effect 5</button>
        <button id="btn6">Effect 6</button>
        <button id="btn7">Effect 7</button>
        <button id="btn8">Effect 8</button>
        <button id="btn9">Effect 9</button>
        <button id="btn0">Effect 10</button>
    </div>
 
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • How to implement simple mouse following effect in js
  • Simple implementation of js mouse following effect
  • js mouse following motion effect
  • javascript mouse following motion 3 effects (eyeball effect, Apple menu, direction following)
  • Js mouse following code small hand click instance method
  • A complete example of a simple mouse following DiV layer effect implemented by JS
  • Mouse following code implemented by JS (cartoon hand click effect)
  • js to achieve mouse following motion effect
  • Native js to achieve mouse following effect
  • Examples of mouse following effects implemented with JavaScript [2 examples]

<<:  Detailed explanation of Linux text processing tools

>>:  MySQL 8.0.18 installation and configuration method graphic tutorial under win10 (windows version)

Recommend

Summary of MySQL lock knowledge points

The concept of lock ①. Lock, in real life, is a t...

How to ensure the overall user experience

Related Articles: Website Design for User Experien...

Example of exporting and importing Docker containers

Table of contents Exporting Docker containers Imp...

How to set directory whitelist and IP whitelist in nginx

1. Set a directory whitelist: Do not set restrict...

CSS Problems with Using Position:fixed and Margin-top Together on Same-Level Elements

Problem Description I want to use CSS to achieve ...

Vue2.0 implements adaptive resolution

This article shares the specific code of Vue2.0 t...

Example of how to set up a third-level domain name in nginx

Problem Description By configuring nginx, you can...

Use personalized search engines to find the personalized information you need

Many people now live on the Internet, and searchin...

What does the n after int(n) in MySQL mean?

You may already know that the length 1 of int(1) ...

jQuery+swiper component realizes the timeline sliding year tab switching effect

Result: Implementation code: Need to be used with...

Nginx installation error solution

1. Unzip nginx-1.8.1.tar.gz 2. Unzip fastdfs-ngin...

How to install and configure MySQL 8.0.12 decompressed version under Windows 10 with graphic tutorials

This article records the installation and configu...

Steps to deploy multiple tomcat services using DockerFile on Docker container

1. [admin@JD ~]$ cd opt #Enter opt in the root di...

Mysql example of querying all lower-level multi-level sub-departments based on a certain department ID

Simulation tables and data scripts Copy the follo...

Introduction to the Enctype attribute of the Form tag and its application examples

Enctype : Specifies the type of encoding the brows...