js zur Realisierung des Mausverfolgungsspiels

js zur Realisierung des Mausverfolgungsspiels

In diesem Artikel wird der spezifische Code von js zur Implementierung des Mausverfolgungsspiels zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Denken Sie beim Erstellen eines Projekts daran, die Bibliothek jquery.min.js zu importieren. Sie können auch andere Versionen der jquery-Bibliothek importieren.

Code im Skript:

<Skripttyp="text/javascript">
  $(Dokument).bereit(Funktion() {
            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, // Wenn die Farbe falsch ist, wird es eine zufällige Farbverlaufsfarbe sein bc:'#000', // Hintergrundfarbe r:0.9, 
    o:0,05,
    eine:1,
    s:20,
   }
   var bx = 0, by = 0, vx = 0, vy = 0;
   var td = 0;
   var p = 0;
   var hs = 0;
   Re();
   var Farbe, Farbe2;
   wenn(bc){
    Farbe2 = bc;
   }anders{
    Farbe = Math.random()*360;
   }
   
   $(Fenster).Größe ändern(Funktion(){
    Re();
   });
   var tp1 = wahr, tp2 = falsch, tp3 = falsch, tp4 = falsch, tp5 = falsch, tp6 = falsch, tp7 = falsch, tp8 = falsch, tp9 = falsch, tp0 = falsch;
   Funktion begin(){
    wenn(tp1){
     wenn(!bc){
      Farbe+=.1;
      Farbe2 = 'hsl('+Farbe+',100%,80%)';
     }
     ctx.globalAlpha = 1;
     ctx.fillStyle = b.bc;
     ctx.fillRect(0,0,w,h);
     für(var i=0;i<y.Länge;i++){
      ctx.globalAlpha = y[i].o;
      ctx.fillStyle = Farbe2;
      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;
      wenn(y[i].o<=0){
       y.spleißen(i,1);
       ich--;
      };
     }
    }sonst wenn(tp2){
     wenn(!bc){
      Farbe+=.1;
      Farbe2 = 'hsl('+Farbe+',100%,80%)';
     }
     ctx.globalAlpha = 1;
     ctx.fillStyle = b.bc;
     ctx.fillRect(0,0,w,h);
     für(var i=0;i<y.Länge;i++){
      ctx.globalAlpha = y[i].o;
      ctx.fillStyle = Farbe2;
      ctx.beginPath();
      y[i].r=10;
      ctx.shadowBlur=20;
      ctx.shadowColor=Farbe2;
      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;
      wenn(y[i].y>=h+y[i].r || y[i].o<=0){
       y.spleißen(i,1);
       ich--;
      };
     }
    }sonst wenn(tp3){
     wenn(!bc){
      Farbe+=.1;
      Farbe2 = 'hsl('+Farbe+',100%,80%)';
     }
     td+=5;
     ctx.globalAlpha = 1;
     ctx.fillStyle = b.bc;
     ctx.fillRect(0,0,w,h);
     für(var i=0;i<y.Länge;i++){
      ctx.globalAlpha = y[i].o;
      ctx.fillStyle = Farbe2;
      ctx.beginPath();
      ctx.shadowBlur=20;
      ctx.shadowColor=Farbe2;
      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);
      wenn(y[i].y<=0-y[i].r || y[i].o<=0){
       y.spleißen(i,1);
       ich--;
      };
     }
    }sonst wenn(tp4){
     wenn(!bc){
      Farbe+=.1;
      Farbe2 = 'hsl('+Farbe+',100%,80%)';
     }
     ctx.globalAlpha = 1;
     ctx.fillStyle = b.bc;
     ctx.fillRect(0,0,w,h);
     für(var i=0;i<y.length;i++){
      ctx.globalAlpha = y[i].o;
      ctx.fillStyle = Farbe2;
      ctx.beginPath();
      ctx.shadowBlur=20;
      ctx.shadowColor=Farbe2;
      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;
      wenn(y[i].o<=0){
       y.spleißen(i,1);
       ich--;
      };
     }
    }sonst wenn(tp5){
     wenn(!bc){
      Farbe+=.1;
      Farbe2 = 'hsl('+Farbe+',100%,80%)';
     }
     ctx.globalAlpha = .18;
     ctx.fillStyle = b.bc;
     ctx.fillRect(0,0,w,h);
     p+=5;
     ctx.globalAlpha = 1;
     ctx.fillStyle = Farbe2;
     ctx.beginPath();
     ctx.shadowBlur=20;
     ctx.shadowColor=Farbe2;
     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;
    }sonst wenn(tp6){
     wenn(!bc){
      Farbe+=.1;
      Farbe2 = 'hsl('+Farbe+',100%,80%)';
     }
     ctx.globalAlpha = 0,2;
     ctx.fillStyle = b.bc;
     ctx.fillRect(0,0,w,h);
     für(var i=0;i<y.Länge;i++){
      ctx.globalAlpha = y[i].o;
      ctx.strokeStyle = Farbe2;
      ctx.beginPath();
      ctx.Linienbreite = 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;
      wenn(y[i].o<=0){
       y.spleißen(i,1);
       ich--;
      };
     }
    }sonst wenn(tp7){
     wenn(!bc){
      Farbe+=.1;
      Farbe2 = 'hsl('+Farbe+',100%,80%)';
     }
     ctx.globalAlpha = 0,2;
     ctx.fillStyle = b.bc;
     ctx.fillRect(0,0,w,h);
     wenn(y.Länge<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});
     }
     für(var i=0;i<y.Länge;i++){
      ctx.globalAlpha = y[i].o;
      ctx.fillStyle = Farbe2;
      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;
      wenn(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;
      };
     }
    }sonst wenn(tp8){
     wenn(!bc){
      Farbe+=.1;
      Farbe2 = 'hsl('+Farbe+',100%,80%)';
     }
     ctx.globalAlpha = 0,2;
     ctx.fillStyle = b.bc;
     ctx.fillRect(0,0,w,h);
     ctx.fillStyle = Farbe2;
     wenn(cx%4 == 0){
      cx+=1;
     }sonst wenn(cx%4 == 2){
      cx-=1
     }
     sonst wenn(cx%4 == 3){
      cx-=2
     }
     wenn(cy%4 == 0){
      cy+=1;
     }sonst wenn(cy%4 == 2){
      cy-=1
     }
     sonst wenn(cy%4 == 3){
      cy-=2
     }
     für (var i=cx-60;i<cx+60;i+=4){
      für (var j=cy-60;j<cy+60;j+=4){
       wenn(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);
        wenn(Math.random()<.2){
         ctx.fillRect(i,j,3,3);
        }
       }
      }
     }
    }sonst wenn(tp9){
     wenn(!bc){
      Farbe+=.1;
      Farbe2 = 'hsl('+Farbe+',100%,80%)';
     }
     ctx.globalAlpha = 0,2;
     ctx.fillStyle = b.bc;
     ctx.fillRect(0,0,w,h);
     ctx.fillStyle = Farbe2;
     wenn(cx%4 == 0){
      cx+=1;
     }sonst wenn(cx%4 == 2){
      cx-=1
     }
     sonst wenn(cx%4 == 3){
      cx-=2
     }
     wenn(cy%4 == 0){
      cy+=1;
     }sonst wenn(cy%4 == 2){
      cy-=1
     }
     sonst wenn(cy%4 == 3){
      cy-=2
     }
     wenn(y.Länge<bn){
      y.push({x:cx,y:cy,xv:0,yv:0,o:1});
     }
     für(var i=0;i<y.Länge;i++){
      wenn(y[i].xv==0 && y[i].yv==0){
       wenn(Math.random()<.5){
        wenn(Math.random()<.5){
         y[i].xv = 3;
        }anders{
         y[i].xv = -3;
        }
       }anders{
        wenn(Math.random()<.5){
         y[i].yv = 3;
        }anders{
         y[i].yv = -3;
        }
       }
      }anders{
       wenn(y[i].xv == 0){
        wenn (Math.random()<.66) {
         y[i].yv = 0;
         wenn(Math.random()<.5){
          y[i].xv = 3;
         }anders{
          y[i].xv = -3;
         }
        }
       }sonst wenn(y[i].yv == 0){
        wenn (Math.random()<.66) {
         y[i].xv = 0;
         wenn(Math.random()<.5){
          y[i].yv = 3;
         }anders{
          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);
      wenn(y[i].o<=0){
       y.spleißen(i,1);
       ich--;
      };
     }
    }sonst wenn(tp0){
     wenn(!bc){
      Farbe+=.1;
      Farbe2 = 'hsl('+Farbe+',100%,80%)';
     }
     ctx.globalAlpha = 0,2;
     ctx.fillStyle = b.bc;
     ctx.fillRect(0,0,w,h);
     ctx.fillStyle = Farbe2;
     y.push({x:cx,y:cy,xv:2,yv:1,o:1});
 
     für(var i=0;i<y.Länge;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);
      wenn(y[i].o<=0){
       y.spleißen(i,1);
       ich--;
      };
     }
    }
    Fenster.requestAnimationFrame(Beginn);
   }
   Funktion re(){
    w = Fenster.innereBreite;
    h = Fenster.innereHöhe;
    Leinwand.Breite = b;
    Leinwand.Höhe = h;
    cx = mit/2;
    cy = h/2;
   };
   c.mousemove(Funktion(e){
    cx = e.SeiteX-c.Offset().links;
    cy = e.pageY-c.offset().top;
    wenn(tp4){
     wenn(Math.random()<=.5){
      wenn(Math.random()<=.5){
       bx = -10;
      }anders{
       bx = b+10;
      }
      von = Math.random()*h;
     }anders{
      wenn(Math.random()<=.5){
       um = -10;
      }anders{
       durch = h+10;
      }
      bx = Math.random()*w;
     }
     vx = (Math.random()-.5)*8;
     vy = (Math.random()-.5)*8;
    }
    wenn(tp1 || tp2 || tp3){
     y.push({x:cx,y:cy,r:br,o:1,v:0});
    }sonst wenn(tp4){
     y.push({x:cx,y:cy,r:br,o:1,v:0,wx:bx,wy:by,vx2:vx,vy2:vy});
    }sonst wenn(tp6){
     y.push({x:cx+((Math.random()-.5)*30),y:cy+((Math.random()-.5)*30),o:1,wx:cx,wy:cy});
    }
   });
   /*c.mousedown(Funktion(){
    c.on('Mausbewegung',Funktion(e){
     cx = e.SeiteX-c.Offset().links;
     cy = e.pageY-c.offset().top;
     y.push({x:cx,y:cy,r:br,o:1});
    });
    c.on('Maus hoch',Funktion(){
     c.aus('Maus hoch');
     c.off('Mausbewegung');
     c.off('moseleave');
    });
    c.on('Maus verlassen',Funktion(){
     c.aus('Maus hoch');
     c.off('Mausbewegung');
     c.off('moseleave');
    });
   });*/
   $("#btn1").klick(function(){
    tp1 = wahr;
    tp2 = falsch;
    tp3 = falsch;
    tp4 = falsch;
    tp5 = falsch;
    tp6 = falsch;
    tp7 = falsch;
    tp8 = falsch;
    tp9 = falsch;
    tp0 = falsch;
    y=[];
   });
   $("#btn2").klick(function(){
    tp1 = falsch;
    tp2 = wahr;
    tp3 = falsch;
    tp4 = falsch;
    tp5 = falsch;
    tp6 = falsch;
    tp7 = falsch;
    tp8 = falsch;
    tp9 = falsch;
    tp0 = falsch;
    y=[];
   });
   $("#btn3").klick(function(){
    tp1 = falsch;
    tp2 = falsch;
    tp3 = wahr;
    tp4 = falsch;
    tp5 = falsch;
    tp6 = falsch;
    tp7 = falsch;
    tp8 = falsch;
    tp9 = falsch;
    tp0 = falsch;
    y=[];
   });
   $("#btn4").klick(function(){
    tp1 = falsch;
    tp2 = falsch;
    tp3 = falsch;
    tp4 = wahr;
    tp5 = falsch;
    tp6 = falsch;
    tp7 = falsch;
    tp8 = falsch;
    tp9 = falsch;
    tp0 = falsch;
    y=[];
   });
   $("#btn5").klick(function(){
    tp1 = falsch;
    tp2 = falsch;
    tp3 = falsch;
    tp4 = falsch;
    tp5 = wahr;
    tp6 = falsch;
    tp7 = falsch;
    tp8 = falsch;
    tp9 = falsch;
    tp0 = falsch;
    y=[];
   });
   $("#btn6").klick(function(){
    tp1 = falsch;
    tp2 = falsch;
    tp3 = falsch;
    tp4 = falsch;
    tp5 = falsch;
    tp6 = wahr;
    tp7 = falsch;
    tp8 = falsch;
    tp9 = falsch;
    tp0 = falsch;
    y=[];
   });
   $("#btn7").klick(function(){
    tp1 = falsch;
    tp2 = falsch;
    tp3 = falsch;
    tp4 = falsch;
    tp5 = falsch;
    tp6 = falsch;
    tp7 = wahr;
    tp8 = falsch;
    tp9 = falsch;
    tp0 = falsch;
    y=[];
   });
   $("#btn8").klick(function(){
    tp1 = falsch;
    tp2 = falsch;
    tp3 = falsch;
    tp4 = falsch;
    tp5 = falsch;
    tp6 = falsch;
    tp7 = falsch;
    tp8 = wahr;
    tp9 = falsch;
    tp0 = falsch;
    y=[];
   });
   $("#btn9").klick(function(){
    tp1 = falsch;
    tp2 = falsch;
    tp3 = falsch;
    tp4 = falsch;
    tp5 = falsch;
    tp6 = falsch;
    tp7 = falsch;
    tp8 = falsch;
    tp9 = wahr;
    tp0 = falsch;
    y=[];
   });
   $("#btn0").klick(function(){
    tp1 = falsch;
    tp2 = falsch;
    tp3 = falsch;
    tp4 = falsch;
    tp5 = falsch;
    tp6 = falsch;
    tp7 = falsch;
    tp8 = falsch;
    tp9 = falsch;
    tp0 = wahr;
    y=[];
   });
   (Funktion() {
    var letzteZeit = 0;
    var Anbieter = ['webkit', 'moz'];
    für(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {
     window.requestAnimationFrame = Fenster[Anbieter[xx] + 'RequestAnimationFrame'];
     window.cancelAnimationFrame = Fenster[Anbieter[xx] + 'CancelAnimationFrame'] ||
              Fenster [Anbieter [xx] + 'CancelRequestAnimationFrame'];
    }
   
    wenn (!window.requestAnimationFrame) {
     window.requestAnimationFrame = Funktion(Rückruf, Element) {
      var currTime = neues Date().getTime();
      var timeToCall = Math.max(0, 16.7 - (aktuelleZeit - letzteZeit));
      var id = Fenster.setTimeout(Funktion() {
       Rückruf(aktuelleZeit + Anrufzeit);
      }, Anrufzeit);
      letzteZeit = aktuelleZeit + Anrufzeit;
      Rückgabe-ID;
     };
    }
    wenn (!window.cancelAnimationFrame) {
     window.cancelAnimationFrame = Funktion(ID) {
      Zeitüberschreitung löschen(id);
     };
    }
   }());
   beginnen();
        });
</Skript>

Code in HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="Maus folgen l">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<style type="text/css">
* { Rand:0; Polsterung:0; }
body { Position:relativ; Breite:100%; Höhe:100%; Überlauf:versteckt; }
Schaltfläche { Farbe: #222; Schriftgröße: 20px; Polsterung: 5px 20px; Breite: 120px; }
#btn1 { position:absolut; oben:10px; links:10px; }
#btn2 { position:absolut; oben:60px; links:10px; }
#btn3 { position:absolut; oben:110px; links:10px; }
#btn4 { position:absolut; oben:160px; links:10px; }
#btn5 { position:absolut; oben:210px; links:10px; }
#btn6 { position:absolut; oben:260px; links:10px; }
#btn7 { position:absolut; oben:310px; links:10px; }
#btn8 { position:absolut; oben:360px; links:10px; }
#btn9 { position:absolut; oben:410px; links:10px; }
#btn0 { position:absolut; oben:460px; links:10px; }
</Stil>
<script src="js/jquery.min.js"></script>
 
<title>Cursor</title>
</Kopf>
 
<Text>
 <canvas id="c"></canvas>
    <div Klasse="btn_left;">
     <button id="btn1">Effekt 1</button>
        <button id="btn2">Effekt 2</button>
        <button id="btn3">Effekt 3</button>
        <button id="btn4">Effekt 4</button>
        <button id="btn5">Effekt 5</button>
        <button id="btn6">Effekt 6</button>
        <button id="btn7">Effekt 7</button>
        <button id="btn8">Effekt 8</button>
        <button id="btn9">Effekt 9</button>
        <button id="btn0">Effekt 10</button>
    </div>
 
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • So implementieren Sie einen einfachen Mausverfolgungseffekt in js
  • Einfache Implementierung des JS-Mausverfolgungseffekts
  • js Mausverfolgungsbewegungseffekt
  • Javascript-Maus folgt Bewegung 3 Effekte (Augeneffekt, Apple-Menü, Richtungsverfolgung)
  • Js-Maus folgt Code kleine Handklick-Instanzmethode
  • Ein vollständiges Beispiel für einen einfachen, von JS implementierten DiV-Ebeneneffekt, der der Maus folgt
  • Mit JS implementierter Mausverfolgungscode (Cartoon-Handklickeffekt)
  • js, um einen Effekt der Mausverfolgungsbewegung zu erzielen
  • Natives JS zum Erreichen eines Mausverfolgungseffekts
  • Beispiele für mit JavaScript implementierte Mausverfolgungseffekte [2 Beispiele]

<<:  Detaillierte Erläuterung der Linux-Textverarbeitungstools

>>:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18 unter Win10 (Windows-Version)

Artikel empfehlen

So implementieren Sie „insert if none“ und „update if yes“ in MySql

Zusammenfassung In einigen Szenarien kann eine so...

Linux /etc/network/interfaces Konfigurationsschnittstellenmethode

Die Datei /etc/network/interfaces wird in Linux z...

js verwendet die Reduce-Methode, um Ihren Code eleganter zu gestalten

Vorwort In tatsächlichen Projekten kann die häufi...

MySQL verwendet Aggregatfunktionen zum Abfragen einer einzelnen Tabelle

Aggregatfunktionen Wirkt auf einen Datensatz ein ...

Analyse des Unterschieds zwischen absolutem und relativem Pfad in HTML

Wie in der Abbildung gezeigt: Mit einer einzelnen ...

Das Lazy-Loading-Attributmuster in JavaScript verstehen

Traditionell erstellen Entwickler Eigenschaften i...

Beispielcode zum Implementieren schöner Uhranimationseffekte mit CSS

Ich suche einen Job!!! Vorbereitung: Zunächst ein...

Anwendungsszenarien für React useMemo und useCallback

Inhaltsverzeichnis verwendenMemo useCallback verw...

Umfassende Zusammenfassung der MySQL-Tabellen

Inhaltsverzeichnis 1. Erstellen Sie eine Tabelle ...

Verständnis und Anwendung des Destrukturierungsoperators von JavaScript ES6

Inhaltsverzeichnis Vorwort Die Rolle von Dekonstr...

Anwendungsbeispiele für die try_files-Direktive von Nginx

Die Konfigurationssyntax von Nginx ist flexibel u...

So erreichen Sie die maximale Anzahl von Verbindungen in MySQL

Inhaltsverzeichnis Was ist der Grund für den plöt...