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

Example of downloading files with vue+django

Table of contents 1. Overview 2. Django Project 3...

Seven solutions for classic distributed transactions between MySQL and Golan

Table of contents 1. Basic theory 1.1 Transaction...

Vue+Openlayer batch setting flash point implementation code (based on postrender mechanism)

Effect picture: Implementation code: <template...

JavaScript to implement image preloading and lazy loading

This article shares the specific code for impleme...

Implementation code of front-end HTML skin changing function

50 lines of code to change 5 skin colors, includi...

JS realizes picture digital clock

This article example shares the specific code of ...

How to set up ssh password-free login to Linux server

Every time you log in to the test server, you alw...

Detailed explanation of moment.js time and date processing

Monday to Sunday time format conversion (Y --- ye...

Vue's vue.$set() method source code case detailed explanation

In the process of using Vue to develop projects, ...

How to change the system language of centos7 to simplified Chinese

illustrate When you install the system yourself, ...

Steps to export the fields and related attributes of MySQL tables

Need to export the fields and properties of the t...

CSS screen size adaptive implementation example

To achieve CSS screen size adaptation, we must fi...

Detailed explanation of the reasons and solutions for Docker failing to start normally

1. Abnormal performance of Docker startup: 1. The...

Solve the problem of importing Web projects into Idea and publishing them to Tomcat

Idea imports an existing web project and publishe...

The docker prune command can be used to periodically clean up infrequently used data

Table of contents docker system df docker system ...