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:
|
<<: Detaillierte Erläuterung der Linux-Textverarbeitungstools
Artikel empfehlen
So lösen Sie das Problem der Randüberlappung
1. Zunächst müssen Sie wissen, was den vertikalen ...
Einführung in das Enctype-Attribut des Form-Tags und seine Anwendungsbeispiele
Enctype: Gibt den Kodierungstyp an, der vom Browse...
Detailliertes Tutorial zum Hochladen und Konfigurieren von JDK und Tomcat unter Linux
Vorbereitung 1. Starten Sie die virtuelle Maschin...
So führen Sie MySQL in einer Docker-Umgebung aus und aktivieren Binlog, um die Master-Slave-Synchronisierung zu konfigurieren
Derselbe Server simuliert die Master-Slave-Synchr...
Detaillierte Erklärung zum Zugriff auf die MySQL-Datenbank in der virtuellen Linux-Maschine unter Windows
Virtuelle Linux-Maschine: VMware + Ubuntu 16.04.4...
Bestimmen Sie anhand von Beispielen, ob das MySQL-Update die Tabelle sperrt
Zwei Fälle: 1. Mit Index 2. Ohne Index Voraussetz...
MySQL-Experiment: Verwenden von Explain zur Analyse des Indextrends
Überblick Die Indizierung ist eine Fähigkeit, die...
Was ich beim Aufbau meines eigenen Blogs gelernt habe
<br />In einem Jahr Bloggen habe ich persönl...
Detaillierte Erläuterung der Konfiguration und Optimierung des statischen Nginx-Dateidienstes
Stammverzeichnis und Indexdatei Die Root-Direktiv...
Vue-Methode zum Überprüfen, ob der Benutzername verfügbar ist
In diesem Artikelbeispiel wird der spezifische Co...
So wandeln Sie lokale Variablen in JavaScript in globale Variablen um
Zuerst müssen wir den Selbstaufruf der Funktion k...
Lösen Sie die Probleme, die bei der Installation der Mysql 8.0.17 Winx64-Version aufgetreten sind
1. Manuelles Erstellen und Hinzufügen der Datei m...
Detaillierter Informationsaustausch über das MySQL-Protokollsystem
Jeder, der schon einmal an einem großen System ge...
Das WeChat-Applet implementiert einen Videoplayer, der einen Bullet-Screen sendet
In diesem Artikel wird der spezifische Code für d...
Detaillierte Erläuterung der Nginx-Installation, SSL-Konfiguration und allgemeinen Befehle unter Centos7.x
1. Installation Installation mit yum ##Yum nginx ...