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
Detaillierte Erklärung der MySQL information_schema-Datenbank
1. Übersicht Die Datenbank information_schema ist...
Eine kurze Diskussion über MySQL-Ereignisplanungsaufgaben
1. Prüfen Sie, ob das Ereignis aktiviert ist Vari...
MySQL-Indexprinzip und Analyse von Anwendungsbeispielen
Dieser Artikel veranschaulicht anhand von Beispie...
So rufen Sie das VMware Esxi-Root-Passwort erfolgreich ab, wenn Sie es vergessen haben
Bereiten Sie eine CentOS6-Installationsdiskette (...
So verbinden Sie Navicat mit der Docker-Datenbank auf dem Server
Starten Sie den MySQL-Container in Docekr Verwend...
Detaillierte Erklärung des Unterschieds zwischen in und exists in MySQL
1. Bereiten Sie sich im Voraus vor Zu Ihrer Beque...
So stellen Sie mit Navicat eine Remoteverbindung zur Cloud-Server-Datenbank her
Es ist sehr praktisch, eine Verbindung zu einer R...
Detaillierte Erläuterung der Verwendung und Vorsichtsmaßnahmen von Crontab unter Linux
Crontab ist ein Befehl zum Einrichten einer perio...
Oberflächliches Webdesign
<br />Ich war schon immer der Meinung, dass ...
Die Standard-HTML-Schreibmethode unterscheidet sich von der von Dreamweaver automatisch generierten
Code kopieren Der Code lautet wie folgt: <!--d...
Das Vue-Projekt implementiert einen grafischen Überprüfungscode
In diesem Artikelbeispiel wird der spezifische Co...
Erläuterung der Vorsichtsmaßnahmen für die Mysql-Master-Slave-Replikation
1. Fehler beim Verbinden mit Master 'x@xxxx:x...
So verhindern Sie mit Nginx die böswillige Auflösung von IP-Adressen
Zweck der Verwendung von Nginx Lassen Sie uns zun...
So implementieren Sie Zeilenumbrüche im Texteingabebereich von Textarea
Wenn Sie den Text im Textarea-Eingabebereich umbre...
So konfigurieren Sie Nginx zur Rückgabe von Text oder JSON
Manchmal müssen Sie beim Anfordern bestimmter Sch...