JavaScript implementiert die Drag-Slider-Puzzle-Verifizierungsfunktion (html5, Canvas)

//Bildobjekt ImageDraw Konstruktorfunktion ImageDraw(o,obj){
		diese.id='',
		this.image=0, //Bildobjekt (erforderlich)
		this.sx=0, //Start-x-Position des Bildausschnitts (nicht erforderlich bei Anzeige des gesamten Bildes)
		this.sy=0, //Start-Y-Position des Bildausschnitts (nicht erforderlich bei Anzeige des gesamten Bildes)
		this.sWidth=0, //Startbreite des Bildausschnitts (muss nicht ausgefüllt werden, wenn das gesamte Bild angezeigt wird)
		this.sHeight=0, //Starthöhe des Bildausschnitts (muss nicht ausgefüllt werden, wenn das gesamte Bild angezeigt wird)
		this.dx=0, //Ziel-X-Position des Bildes (erforderlich)
		this.dy=0, //Ziel-Y-Position des Bildes (erforderlich)
		this.dWidth=0, //Zielanzeigebreite des Bildes (muss nicht ausgefüllt werden, wenn die Breite nicht skaliert ist)
		this.dHeight=0 //Zielhöhe des Bildes (muss nicht ausgefüllt werden, wenn die Höhe nicht skaliert ist)
		
		dies.init(o,obj);
	}
	ImageDraw.prototype.init=Funktion(o,obj){
		für (var Schlüssel in o) {
			dies[Schlüssel]=o[Schlüssel];
		}
		gib dies zurück;
	}
	ImageDraw.prototype.render=Funktion(Kontext){
		zeichnen(Kontext, dies);
		Funktion zeichnen(Kontext,Objekt) {
			var ctx=Kontext;
			ctx.speichern();
			
			if(!obj.image || getType(obj.dx)=='undefined' || getType(obj.dy)=='undefined'){
				throw new Error("Fehlende Parameter zum Zeichnen von Bildern");	
				zurückkehren;
			} 
			ctx.translate(obj.dx,obj.dy);
			wenn(getType(obj.sx)!='undefined' && getType(obj.sy)!='undefined' && obj.sWidth && obj.sHeight && obj.dWidth && obj.dHeight){
				//Bild zuschneiden und bei der Anzeige skalieren ctx.drawImage(obj.image, obj.sx, obj.sy, obj.sWidth, obj.sHeight, 0, 0, obj.dWidth, obj.dHeight);
			}sonst wenn(obj.dBreite && obj.dHöhe){
				ctx.drawImage(obj.image, 0, 0, obj.dWidth, obj.dHeight); //Originalbild, bei Anzeige skaliert }else{
				ctx.drawImage(obj.image,0, 0); //Originalbild, keine Skalierung bei der Anzeige }
			ctx.wiederherstellen();
		}
	}
	ImageDraw.prototype.isPoint=Funktion(pos){
		//Die x- und y-Werte der Mausposition müssen größer als dx bzw. dy sein, und x und y müssen kleiner als dx+dWidth bzw. dy+dHeight sein.
		if(pos.x>this.dx && pos.y>this.dy && pos.x<this.dx+this.dWidth && pos.y<this.dy+this.dHeight ){//Zeigt an, dass es innerhalb des Bereichs des aktuellen Bildobjekts liegt. return true;
		}
		gibt false zurück;
	}

Funktion Rechteck(o){
		this.x=0,//x-Koordinate this.y=0,//y-Koordinate this.width=100,//Breite this.height=40,//Höhe this.thin=true,//dünnere Linie		
		dies.init(o);
	}
	
	Rect.prototype.init = Funktion (o) {
		für (var Schlüssel in o) {
			dies[Schlüssel]=o[Schlüssel];
		}
	}
	Rect.prototype.render = Funktion (Kontext) {
		dies.ctx=Kontext;
		innerRender(dies);
			
		Funktion innerRender(Objekt){
			var ctx=obj.ctx;
			ctx.speichern()
			ctx.beginPath();
			ctx.translate(Objekt.x,Objekt.y);
			
			wenn(obj.Linienbreite){
				ctx.Linienbreite=obj.Linienbreite;
			}
			wenn(Objekt.dünn){
				ctx.übersetzen(0.5,0.5);
			}
			ctx.rect(0,0,Objektbreite,Objekthöhe);
			if(obj.fill){//Ist es ausgefüllt? obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;
				ctx.fill();
			}
			if(obj.stroke){//Ob obj.strokeStyle gestrichen werden soll?(ctx.strokeStyle=obj.strokeStyle):null;
				ctx.stroke();
			}	
		 	ctx.wiederherstellen();
		}
	 	gib dies zurück;
	}

Funktion Text(o){
		this.x=0,//x-Koordinate this.y=0,//y-Koordinate this.text='',//Inhalt this.font=null;//Schriftart this.textAlign=null;//Ausrichtung		
		dies.init(o);
	}
	
	Text.prototype.init=Funktion(o){
		für (var Schlüssel in o) {
			dies[Schlüssel]=o[Schlüssel];
		}
	}
	Text.prototype.render=Funktion(Kontext){
		dies.ctx=Kontext;
		innerRender(dies);
			
		Funktion innerRender(Objekt){
			var ctx=obj.ctx;
			ctx.speichern()
			ctx.beginPath();
			ctx.translate(Objekt.x,Objekt.y);
			
			wenn(Objekt.Schriftart){
				ctx.font=obj.font;
			}
			wenn (obj.textAlign) {
				ctx.textAlign=obj.textAlign;
			}
			if(obj.fill){//Ist es ausgefüllt? obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;
				ctx.fillText(obj.text,0,0);
			}
		 	ctx.wiederherstellen();
		}
	 	gib dies zurück;
	}

var img = neues ImageDraw({image:this.imgObj[0],dx:0, dy:0 ,dWidth:640,dHeight:360},this);
		dies.renderArr.push(img);
 
var x = _.getRandom (100, 580); // x liegt zwischen 100-580 var y = _.getRandom (0, 300); // y liegt zwischen 0-300		
		diese.validPos={x:x,y:y};
		//Zeichne den fehlenden Block var rect = new Rect({
			x:x,
			j:j,
			Breite: 60,
			Höhe: 60,
			füllen:wahr,
			Füllstil: 'grau'
		})
		dies.renderArr.push(rechteck);
		
		//Zeichne den Verifizierungsblockstreifen var rect = new Rect({
				x:0,
				y:360,
				Breite: 640,
				Höhe: 40,
				füllen:wahr,
				Füllstil: '#E8E8E8'
		})
		dies.renderArr.push(rechteck);
		
		//Text zeichnen var text = new Text({
			x:300,
			y:390,
			text:'Ziehen Sie den Schieberegler zum Überprüfen',
			Schriftart: „18px Serif“,
			Textausrichtung: 'zentriert',
			füllen:wahr,
			//Füllstil:'weiß'
		});
		dies.renderArr.push(text);

var pos = this.validPos; //Die Koordinaten des fehlenden Blocks, der im vorherigen Schritt gezeichnet wurde. Das Verifizierungsbild muss gemäß dieser Koordinate abgefangen werden. var img = new ImageDraw({image:this.imgObj[0],sx:pos.x,sy:pos.y,sWidth:60,sHeight:60,dx:0, dy:pos.y,dWidth:60,dHeight:60},this);
dies.renderArr2.push(img);
		
var img1 = neues ImageDraw({image:this.imgObj[1],dx:0, dy:360 ,dWidth:40,dHeight:40},this);
dies.renderArr2.push(img1);

//Klickereignis zur Leinwand hinzufügen canvas2.addEventListener('mousedown',this.mouseDown.bind(this));
canvas2.addEventListener('mouseup',dieses.mouseUp.bind(dieses));
canvas2.addEventListener('Mausbewegung',dies.Mausbewegung.binden(dies));

Slider.prototype.mouseDown=Funktion(e){
			var pos = _.getOffset(e); //Mausposition abrufen if(!this.block) return;
			if(this.block.isPoint(pos)){//Die gedrückte Position ist die Position des Schiebereglers this.move=true;//Zeigt an, dass er verschoben werden kann this.downX=pos.x;//Zeichne die Position auf, an der die Maus gedrückt wird, und bewege dich weiter }
	}

Slider.prototype.mouseMove = Funktion (e) {
		if(!this.move) return ;//Wenn die Bewegungsmarkierung falsch ist, direkt zurückkehren var pos = _.getOffset(e);
		pos.x -= this.downX; //Subtrahiere die ursprüngliche Mausklickposition if(pos.x>580){
			zurückkehren ;
		}
		this.update(pos);//verschieben }
	//Slider aktualisieren.prototype.update=function(pos){
		//Ändere die Koordinaten des Schiebereglers und des Verifizierungsdiagramms _.each(this.renderArr2,function(item){
			wenn(Artikel){
				Artikel.dx=pos.x;
			}
		});
		
		//Zeichne dies.render();
	}

Slider.prototype.mouseUp=Funktion(e){
		dies.verschieben=false;
		var pos = _.getOffset(e);
			pos.x -= dies.downX;
		var validPos = this.validPos; //Koordinaten überprüfen if(Math.abs(pos.x-validPos.x )<=10){ //Überprüfung bestanden (der Unterschied in der X-Position kann innerhalb eines bestimmten Bereichs liegen)
			console.log('bestanden')
			dies.suc();
		}else{//Überprüfung fehlgeschlagen this.update({x:0});
		}
		dies.render();
	}
	
	Slider.prototype.suc=Funktion(){
		this.renderArr.splice(2,1);//Fehlende Blöcke löschen this.block=null;
		//Schieberegler und Verifizierungsdiagramm löschen this.renderArr2.length=0;
		//Ändern Sie die Farbe des Streifens this.renderArr[1].fillStyle='#78C430';
		
		var text = this.renderArr[2];
		//Änderung des Prompt-Inhalts text.fillStyle='white';
		text.text="Verifizierung erfolgreich";
	}