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
Vorwort Bei der Entwicklung kleiner Programme müs...
In diesem Artikelbeispiel wird der spezifische Co...
Vorwort Unabhängig davon, ob es sich um eine eige...
Entwicklungstrends: html (Hypertext-Markup-Sprache...
Zuvor haben wir Docker verwendet, um das SpringBo...
1. Zweck Schreiben Sie lokal eine Flask-Anwendung...
Wenn die Wörter in der SQL-Anweisung mit den Schl...
einführen GitLab CE oder Community Edition ist ei...
Inhaltsverzeichnis Benutzerdefinierte Vue-Direkti...
Wenn Sie es nicht durch direktes Klicken auf „Dow...
Dieser Artikel beschreibt anhand von Beispielen d...
Es ist sehr üblich, webpack zum Erstellen einseit...
Wenn Sie Eingabe und Bild in dieselbe Zeile setzen...
Ich habe vor kurzem angefangen, MySQL zu lernen. ...
Hier sind zwei Terminal-Split-Screen-Tools: scree...