JavaScript でドラッグ スライダー パズルの検証機能を実装します (html5、canvas)

//画像オブジェクト ImageDraw コンストラクタ関数 ImageDraw(o,obj){
		this.id=''、
		this.image=0, //画像オブジェクト（必須）
		this.sx=0, //画像スライスの開始x位置（画像全体を表示する場合は必要ありません）
		this.sy=0, //画像スライスの開始y位置（画像全体を表示する場合は必要ありません）
		this.sWidth=0, //画像スライスの開始幅（画像全体を表示する場合は入力する必要はありません）
		this.sHeight=0, //画像スライスの開始高さ（画像全体を表示する場合は入力する必要はありません）
		this.dx=0, //画像ターゲットのx位置（必須）
		this.dy=0, //画像ターゲットのy位置（必須）
		this.dWidth=0, //画像ターゲットの表示幅（幅が拡大縮小されていない場合は入力する必要はありません）
		this.dHeight=0 //画像のターゲットの高さ（高さが拡大縮小されない場合は入力する必要はありません）
		
		これをinit(o,obj);
	}
	ImageDraw.prototype.init=関数(o,obj){
		for(var key in o){
			this[キー]=o[キー];
		}
		これを返します。
	}
	ImageDraw.prototype.render=関数(コンテキスト){
		描画(コンテキスト、これ);
		関数draw(コンテキスト,obj) {
			var ctx =コンテキスト;
			ctx.save();
			
			if(!obj.image || getType(obj.dx)=='undefined' || getType(obj.dy)=='undefined'){
				throw new Error("画像を描画するためのパラメータが見つかりません");	
				戻る;
			} 
			ctx.translate(obj.dx,obj.dy);
			if(getType(obj.sx)!='undefined' && getType(obj.sy)!='undefined' && obj.sWidth && obj.sHeight && obj.dWidth && obj.dHeight){
				// 表示時に画像を切り取って拡大縮小します ctx.drawImage(obj.image, obj.sx, obj.sy, obj.sWidth, obj.sHeight, 0, 0, obj.dWidth, obj.dHeight);
			}それ以外の場合(obj.dWidth && obj.dHeight){
				ctx.drawImage(obj.image, 0, 0, obj.dWidth, obj.dHeight); // 元の画像、表示時に拡大縮小されます }else{
				ctx.drawImage(obj.image,0, 0); // 元の画像、表示時にスケーリングなし }
			ctx.restore();
		}
	}
	ImageDraw.prototype.isPoint=関数(pos){
		//マウス位置の x と y はそれぞれ dx と dy より大きく、x と y はそれぞれ dx+dWidth と dy+dHeight より小さくなければなりません
		if(pos.x>this.dx && pos.y>this.dy && pos.x<this.dx+this.dWidth && pos.y<this.dy+this.dHeight ){//現在の画像オブジェクトの範囲内であることを示します。true を返します。
		}
		false を返します。
	}

関数 Rect(o){
		this.x=0,​​//x座標 this.y=0,//y座標 this.width=100,//幅 this.height=40,//高さ this.thin=true,//細い線		
		これをinit(o);
	}
	
	Rect.prototype.init = 関数 (o) {
		for(var key in o){
			this[キー]=o[キー];
		}
	}
	Rect.prototype.render = 関数 (コンテキスト) {
		this.ctx=コンテキスト;
		innerRender(これを);
			
		関数innerRender(obj){
			var ctx = obj.ctx;
			ctx.save()
			ctx.beginPath();
			ctx.translate(obj.x,obj.y);
			
			if(obj.lineWidth){
				ctx.lineWidth = obj.lineWidth;
			}
			if(obj.thin){
				ctx.translate(0.5,0.5);
			}
			ctx.rect(0,0,obj.width,obj.height);
			if(obj.fill){//塗りつぶされていますか? obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;
				ctx.fill();
			}
			if(obj.stroke){//ストロークするかどうか obj.strokeStyle?(ctx.strokeStyle=obj.strokeStyle):null;
				ctx.stroke();
			}	
		 	ctx.restore();
		}
	 	これを返します。
	}

関数 Text(o){
		this.x=0,​​//x座標 this.y=0,//y座標 this.text='',//コンテンツ this.font=null;//フォント this.textAlign=null;//配置		
		これをinit(o);
	}
	
	Text.prototype.init=function(o){
		for(var key in o){
			this[キー]=o[キー];
		}
	}
	Text.prototype.render=function(context){
		this.ctx=コンテキスト;
		innerRender(これを);
			
		関数innerRender(obj){
			var ctx = obj.ctx;
			ctx.save()
			ctx.beginPath();
			ctx.translate(obj.x,obj.y);
			
			フォントサイズは、
				ctx.font=obj.font;
			}
			（obj.textAlign）の場合{
				ctx.textAlign=obj.textAlign;
			}
			if(obj.fill){//塗りつぶされていますか? obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;
				ctx.fillText(obj.text,0,0);
			}
		 	ctx.restore();
		}
	 	これを返します。
	}

var img = new ImageDraw({image:this.imgObj[0],dx:0, dy:0 ,dWidth:640,dHeight:360},this);
		this.renderArr.push(画像);
 
var x = _.getRandom (100, 580); // x は 100 ～ 580 の間 var y = _.getRandom (0, 300); // y は 0 ～ 300 の間		
		this.validPos={x:x,y:y};
		//不足しているブロックを描画する var rect = new Rect({
			x:x、
			y:y、
			幅:60,
			高さ:60,
			塗りつぶし:true、
			塗りつぶしスタイル: 'グレー'
		})
		this.renderArr.push(rect);
		
		//検証ブロックストリップを描画する var rect = new Rect({
				x:0,
				y:360,
				幅:640,
				高さ:40,
				塗りつぶし:true、
				塗りつぶしスタイル:'#E8E8E8'
		})
		this.renderArr.push(rect);
		
		//テキストを描画する var text = new Text({
			x:300,
			y:390,
			テキスト:「スライダーをドラッグして確認します」
			フォント:'18px セリフ',
			テキスト配置:'center',
			塗りつぶし:true、
			// 塗りつぶしスタイル: '白'
		});
		this.renderArr.push(テキスト);

var pos = this.validPos; // 前のステップで描画された欠落ブロックの座標。検証画像はこの座標に従ってインターセプトされる必要があります。 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);
this.renderArr2.push(画像);
		
var img1 = new ImageDraw({image:this.imgObj[1],dx:0, dy:360,dWidth:40,dHeight:40},this);
this.renderArr2.push(img1);

//キャンバスにクリック イベントを追加します。canvas2.addEventListener('mousedown',this.mouseDown.bind(this));
canvas2.addEventListener('mouseup',this.mouseUp.bind(this));
canvas2.addEventListener('mousemove',this.mouseMove.bind(this));

Slider.prototype.mouseDown=function(e){
			var pos = _.getOffset(e); //マウスの位置を取得します if(!this.block) return;
			if(this.block.isPoint(pos)){//押された位置がスライダーの位置になります this.move=true;//移動可能であることを示します this.downX=pos.x;//マウスが押された位置を記録し、移動し続けます }
	}

Slider.prototype.mouseMove = 関数(e) {
		if(!this.move) return ;//移動マークがfalseの場合は直接戻ります var pos = _.getOffset(e);
		pos.x -= this.downX; //マウスの初期クリック位置を減算する if(pos.x>580){
			戻る ;
		}
		this.update(pos);//移動 }
	//更新 Slider.prototype.update=function(pos){
		//スライダーと検証チャートの座標を変更する _.each(this.renderArr2,function(item){
			if(アイテム){
				アイテム.dx = pos.x;
			}
		});
		
		// 描画 this.render();
	}

Slider.prototype.mouseUp=function(e){
		this.move = false;
		var pos = _.getOffset(e);
			pos.x -= this.downX;
		var validPos = this.validPos; // 座標を検証します if(Math.abs(pos.x-validPos.x )<=10){ // 検証に合格しました (x 位置の差は一定の範囲内に収まります)
			コンソールログ('pass')
			this.suc();
		}else{//検証に失敗しました this.update({x:0});
		}
		これをレンダリングします。
	}
	
	スライダー.prototype.suc=関数(){
		this.renderArr.splice(2,1);//不足しているブロックをクリアします this.block=null;
		//スライダーと検証チャートをクリアします。this.renderArr2.length=0;
		//ストリップの色を変更します。this.renderArr[1].fillStyle='#78C430';
		
		var テキスト = this.renderArr[2];
		//プロンプトコンテンツの変更 text.fillStyle='white';
		text.text="検証に成功しました";
	}