拼图点击bug

src/custom/pictures/debug/app.js

@@ -56,14 +56,14 @@ function launchWithCustomModule(customModule) {
 			engine.gameStage.sceneContainer.getChildAt(0).y = (d.stage.height-props.H)/2;
 		}, 1000);
 
-		setTimeout(() => {
-			engine.globalEvent.dispatchEvent('pictures-start', {
-				picUrl: "http://yun.duiba.com.cn/aurora/assets/e1593b97c27077b85b92f7eaaeae1ed64a1eb79a.png",
-				// picUrl: "http://yun.duiba.com.cn/aurora/assets/d23e73d37ec01931e48cbd0a4095367044c5675c.png"
-				blockUrl: "888"
-			});
+		// setTimeout(() => {
+		// 	engine.globalEvent.dispatchEvent('pictures-start', {
+		// 		picUrl: "http://yun.duiba.com.cn/aurora/assets/e1593b97c27077b85b92f7eaaeae1ed64a1eb79a.png",
+		// 		// picUrl: "http://yun.duiba.com.cn/aurora/assets/d23e73d37ec01931e48cbd0a4095367044c5675c.png"
+		// 		blockUrl: "888"
+		// 	});
 
-		}, 5*1000);
+		// }, 5*1000);
 	});
 	engine.globalEvent.addEventListener('pictures-time-update', (e) => {
 		// console.log(e.type, e.data);

src/custom/pictures/debug/main.js

@@ -183,39 +183,43 @@
 	        this.addChild(parent);
 	    };
 	    GameView.prototype.onDown = function (e) {
+	        var stageLeft = (750 - props.W) / 2;
+	        var stageTop = (this.stage.height - props.H) / 2;
 	        this.dragPic = e.target;
 	        this.picturesWrapper.addChild(this.dragPic);
 	        this.localPicX = e.localX / MAX_COL;
 	        this.localPicY = e.localY / MAX_ROW;
 	        this.distanceX = this.dragPic.x;
 	        this.distanceY = this.dragPic.y;
-	        this.indexJ = Math.floor(this.distanceX / (w + GAP));
-	        this.indexI = Math.floor(this.distanceY / (h + GAP));
+	        this.indexJ = Math.floor((this.distanceX) / (w + GAP));
+	        this.indexI = Math.floor((this.distanceY) / (h + GAP));
 	        this.index = (this.indexI) * MAX_COL + this.indexJ;
-	        this.centerX = Math.floor(e.clientX / w) * w + w / 2;
-	        this.centerY = Math.floor(e.clientY / h) * h + h / 2;
+	        this.centerX = Math.floor((e.clientX - stageLeft) / w) * w + w / 2;
+	        this.centerY = Math.floor((e.clientY - stageTop) / h) * h + h / 2;
 	        this.stage.addEventListener(engine.MouseEvent.MOUSE_MOVE, this.onMove, this);
 	        this.stage.addEventListener(engine.MouseEvent.MOUSE_UP, this.stageOnUp, this);
 	    };
 	    GameView.prototype.stageOnUp = function (e) {
+	        var stageLeft = (750 - props.W) / 2;
+	        var stageTop = (this.stage.height - props.H) / 2;
 	        this.stage.removeEventListener(engine.MouseEvent.MOUSE_MOVE, this.onMove, this);
 	        this.stage.removeEventListener(engine.MouseEvent.MOUSE_UP, this.stageOnUp, this);
-	        if (this.centerY < 0 || this.centerX < 0) {
+	        if (this.centerY < stageTop || this.centerX < stageLeft) {
 	            this.dragPic.x = this.distanceX;
 	            this.dragPic.y = this.distanceY;
 	        }
-	        this.picturesWrapper.addChild(this.guideHole);
 	        var curJ = Math.floor(this.centerX / (w + GAP));
 	        var curI = Math.floor(this.centerY / (h + GAP));
-	        if (curJ < (MAX_COL) && curI < (MAX_ROW)) {
+	        this.picturesWrapper.addChild(this.guideHole);
+	        if (0 <= curJ && curJ < (MAX_COL) && 0 <= curI && curI < (MAX_ROW)) {
 	            var index = getIndexFromRC(curI, curJ, MAX_COL);
 	            var dropPic = this.pictures[index];
-	            var dropPicX = dropPic.x;
-	            var dropPicy = dropPic.y;
+	            var dropPicX = dropPic.x + stageLeft;
+	            var dropPicy = dropPic.y + stageTop;
 	            dropPic.x = this.distanceX;
 	            dropPic.y = this.distanceY;
-	            this.dragPic.x = dropPicX;
-	            this.dragPic.y = dropPicy;
+	            this.dragPic.x = dropPicX - stageLeft;
+	            this.dragPic.y = dropPicy - stageTop;
 	            var dropPicIndex = this.pictures.indexOf(dropPic);
 	            var dragPicIndex = this.pictures.indexOf(this.dragPic);
 	            this.pictures[dropPicIndex] = this.dragPic;
@@ -248,12 +252,13 @@
 	    GameView.prototype.onMove = function (e) {
 	        this.dragPic.x = e.stageX - this.localPicX - (750 - props.W) / 2;
 	        this.dragPic.y = e.stageY - this.localPicY - (this.stage.height - props.H) / 2;
-	        console.log('fuck on this.stage.height', this.stage.height);
 	        this.centerX = this.dragPic.x + w / 2;
 	        this.centerY = this.dragPic.y + h / 2;
+	        console.log(this.centerX, this.centerY, "center");
 	    };
 	    return GameView;
 	}(engine.Container));
+	//# sourceMappingURL=GameView.js.map
 
 	var GameWrapper = (function (_super) {
 	    tslib.__extends(GameWrapper, _super);

src/custom/pictures/src/game/GameView.ts

@@ -151,8 +151,6 @@ export default class GameView extends engine.Container {
   indexJ: number;
   rightList: engine.Sprite[];
 
-
-
   private picturesWrapper: engine.Sprite;
   private guideHole: engine.Image;
 
@@ -197,16 +195,20 @@ export default class GameView extends engine.Container {
   onDown(e: engine.MouseEvent) {
     // console.log(e);
 
+    let stageLeft = (750 - props.W) / 2
+    let stageTop = (this.stage.height - props.H) / 2;
+
     // 创建一个图片对象接收当前位置信息
     this.dragPic = e.target;
     this.picturesWrapper.addChild(this.dragPic);
 
+
     // 鼠标的偏移量
     this.localPicX = e.localX / MAX_COL;
     this.localPicY = e.localY / MAX_ROW;
 
     // 最开始图片的位置
-    this.distanceX = this.dragPic.x;
+    this.distanceX = this.dragPic.x ;
     this.distanceY = this.dragPic.y;
 
     // 最开始点击的图片的索引值
@@ -215,8 +217,8 @@ export default class GameView extends engine.Container {
     // this.index = (this.indexI - 1) * MAX_COL + this.indexJ;
 
 
-    this.indexJ = Math.floor(this.distanceX / (w + GAP));
-    this.indexI = Math.floor(this.distanceY / (h + GAP));
+    this.indexJ = Math.floor((this.distanceX) / (w + GAP));
+    this.indexI = Math.floor((this.distanceY) / (h + GAP));
     this.index = (this.indexI) * MAX_COL + this.indexJ;
 
 
@@ -224,9 +226,13 @@ export default class GameView extends engine.Container {
     // this.centerX = e.clientX + w / 2;
     // this.centerY = e.clientY + h / 2;
 
-    this.centerX = Math.floor(e.clientX / w) * w + w / 2;
-    this.centerY = Math.floor(e.clientY / h) * h + h / 2
+    
 
+    // this.centerX = Math.floor(e.clientX / w) * w + w / 2;
+    // this.centerY = Math.floor(e.clientY / h) * h + h / 2;
+
+    this.centerX = Math.floor((e.clientX - stageLeft) / w) * w + w / 2;
+    this.centerY = Math.floor((e.clientY - stageTop) / h) * h + h / 2;
 
     this.stage.addEventListener(
       engine.MouseEvent.MOUSE_MOVE,
@@ -245,6 +251,9 @@ export default class GameView extends engine.Container {
 
   stageOnUp(e) {
 
+    let stageLeft = (750 - props.W) / 2
+    let stageTop = (this.stage.height - props.H) / 2;
+
     this.stage.removeEventListener(
       engine.MouseEvent.MOUSE_MOVE,
       this.onMove,
@@ -258,22 +267,23 @@ export default class GameView extends engine.Container {
     );
 
     // 拖动的图片的中心位置在图片之外,回到原来的位置
-    if (this.centerY < 0 || this.centerX < 0) {
-      this.dragPic.x = this.distanceX
-      this.dragPic.y = this.distanceY
+    if (this.centerY < stageTop || this.centerX < stageLeft) {
+      this.dragPic.x = this.distanceX ;
+      this.dragPic.y = this.distanceY ;
     }
+    let curJ = Math.floor(this.centerX / (w + GAP));
+    let curI = Math.floor(this.centerY / (h + GAP));
 
     this.picturesWrapper.addChild(this.guideHole);
 
     // 判断图片是否进入另一张图片的范围内
     // 要交换的图片第几行第几列
-    let curJ = Math.floor(this.centerX / (w + GAP));
-    let curI = Math.floor(this.centerY / (h + GAP));
-
+    
+    
 
     // 点击图片的位置
 
-    if (curJ < (MAX_COL) && curI < (MAX_ROW)) {
+    if ( 0 <= curJ && curJ < (MAX_COL) && 0 <= curI && curI < (MAX_ROW)) {
 
       // 获取交互图片的索引值
       let index = getIndexFromRC(curI, curJ, MAX_COL);
@@ -282,14 +292,14 @@ export default class GameView extends engine.Container {
       //要交换的图片
       let dropPic = this.pictures[index];
 
-      let dropPicX = dropPic.x;
-      let dropPicy = dropPic.y;
+      let dropPicX = dropPic.x + stageLeft;
+      let dropPicy = dropPic.y + stageTop;
 
       dropPic.x = this.distanceX;
       dropPic.y = this.distanceY;
 
-      this.dragPic.x = dropPicX;
-      this.dragPic.y = dropPicy;
+      this.dragPic.x = dropPicX - stageLeft;
+      this.dragPic.y = dropPicy - stageTop;
 
       // 交换之后索引也需要交换
 
@@ -335,13 +345,13 @@ export default class GameView extends engine.Container {
     // 当前图片的位置
     this.dragPic.x = e.stageX - this.localPicX - (750 - props.W) / 2;
     this.dragPic.y = e.stageY - this.localPicY - (this.stage.height - props.H) / 2;
-    console.log('fuck on this.stage.height', this.stage.height)
+    // console.log('fuck on this.stage.height', this.stage.height)
     // console.log(this.dragPic.x, this.dragPic.y)
 
     // 当前图片的中心位置
     this.centerX = this.dragPic.x + w / 2;
     this.centerY = this.dragPic.y + h / 2;
-
+    console.log(this.centerX,this.centerY,"center")
   }
 
   // onClk(e){