1

src/custom/pictures/debug/main.js

@@ -69,7 +69,8 @@
 	    return getTexture(engine.getAssetByName(name).uuid);
 	}
 	function getIndexFromRC(row, col, maxCol) {
-	    var index = row * maxCol + col;
+	    var index;
+	    index = row * maxCol + col;
 	    return index;
 	}
 	function getRandomArray(array) {
@@ -96,12 +97,13 @@
 	        return _this;
 	    }
 	    GameView.prototype.start = function () {
-	        var _this = this;
+	        if (this.pictures) {
 	            for (var _i = 0, _a = this.pictures; _i < _a.length; _i++) {
 	                var pic = _a[_i];
 	                if (pic && pic.parent)
 	                    pic.parent.removeChild(pic);
 	            }
+	        }
 	        console.log('on start');
 	        engine.globalEvent.dispatchEvent('pictures-time-update', {
 	            second: this.getSecond(),
@@ -122,9 +124,6 @@
 	            this.dragPic.x = x;
 	            this.dragPic.y = y;
 	        }
-	        this._timer = setInterval(function () {
-	            _this.onTimer();
-	        }, 10);
 	    };
 	    GameView.prototype.onTimer = function () {
 	        this._timeCounter += 0.01;
@@ -179,20 +178,24 @@
 	        this.localPicY = e.localY / MAX_ROW;
 	        this.distanceX = this.dragPic.x;
 	        this.distanceY = this.dragPic.y;
-	        this.indexI = this.distanceX / (w + GAP);
-	        this.indexJ = this.distanceY / (h + GAP);
-	        this.index = (this.indexI - 1) * MAX_COL + this.indexJ;
-	        this.centerX = e.clientX + w / 2;
-	        this.centerY = e.clientY + h / 2;
+	        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 + w / 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) {
 	        this.stage.removeEventListener(engine.MouseEvent.MOUSE_MOVE, this.onMove, this);
+	        if (this.centerY < 0 || this.centerX < 0) {
+	            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) {
+	        if (curJ < (MAX_COL) && curI < (MAX_ROW)) {
 	            var index = getIndexFromRC(curI, curJ, MAX_COL);
 	            var dropPic = this.pictures[index];
 	            var dropPicX = dropPic.x;
@@ -234,6 +237,7 @@
 	    GameView.prototype.onMove = function (e) {
 	        this.dragPic.x = e.stageX - this.localPicX;
 	        this.dragPic.y = e.stageY - this.localPicY;
+	        console.log(this.dragPic.x, this.dragPic.y);
 	        this.centerX = this.dragPic.x + w / 2;
 	        this.centerY = this.dragPic.y + h / 2;
 	    };

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

@@ -21,14 +21,14 @@ export default class GameView extends engine.Container {
   private _timer;
   private _timeCounter = 0;
 
-  // 倒计时时间
-  // private countTime = 20;
-
   start() {
+    if (this.pictures) {
       for (const pic of this.pictures) {
         if (pic && pic.parent)
           pic.parent.removeChild(pic);
       }
+    }
+
     console.log('on start')
     engine.globalEvent.dispatchEvent('pictures-time-update', {
       second: this.getSecond(),
@@ -57,11 +57,12 @@ export default class GameView extends engine.Container {
       const [x, y] = posList[i];
       this.dragPic.x = x;
       this.dragPic.y = y;
+
     }
 
-    this._timer = setInterval(() => {
-      this.onTimer();
-    }, 10)
+    // this._timer = setInterval(() => {
+    //   this.onTimer();
+    // }, 10)
   }
 
 
@@ -112,20 +113,21 @@ export default class GameView extends engine.Container {
 
   //当前图片对象
   dragPic;
-
+  // 鼠标在当前图片上的位置
   localPicX;
   localPicY;
-
+  // 拖动的图片最开始的位置(左上角为准)
   distanceX;
   distanceY;
-
+  // 图片中心的位置
   centerX: number;
   centerY: number;
 
   pictures: engine.Sprite[];
 
-  // 点击图片时的索引
+  // 点击图片时的一维数组索引
   index;
+  // 计算目标图片行和列的位置
   indexI: number;
   indexJ: number;
   rightList: engine.Sprite[];
@@ -156,6 +158,18 @@ export default class GameView extends engine.Container {
     const parent = new engine.Sprite();
     this.picturesWrapper = parent;
     this.addChild(parent);
+
+    // 添加按钮
+    // const btn = new engine.Rect();
+    // btn.width = 200;
+    // btn.height = 100;
+    // // btn.stage.top = 1000;
+    // // btn.stage.left = 350;
+    // btn.fillColor = 'cyan';
+    // this.addChild(btn)
+
+    // btn.addEventListener(engine.MouseEvent.CLICK,this.onClk,this)
+
   }
 
   onDown(e: engine.MouseEvent) {
@@ -174,13 +188,25 @@ export default class GameView extends engine.Container {
     this.distanceY = this.dragPic.y;
 
     // 最开始点击的图片的索引值
-    this.indexI = this.distanceX / (w + GAP);
-    this.indexJ = this.distanceY / (h + GAP);
-    this.index = (this.indexI - 1) * MAX_COL + this.indexJ;
+    // this.indexI = this.distanceX / (w + GAP);
+    // this.indexJ = this.distanceY / (h + GAP);
+    // 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.index = (this.indexI) * MAX_COL + this.indexJ;
+
+
+
 
     // 图片的中心位置
-    this.centerX = e.clientX + w / 2;
-    this.centerY = e.clientY + h / 2;
+    // 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 + w / 2
+
 
     this.stage.addEventListener(
       engine.MouseEvent.MOUSE_MOVE,
@@ -202,17 +228,23 @@ export default class GameView extends engine.Container {
       this
     );
 
+    // 拖动的图片的中心位置在图片之外,回到原来的位置
+    if (this.centerY < 0 || this.centerX < 0) {
+      this.dragPic.x = this.distanceX
+      this.dragPic.y = this.distanceY
+    }
+
     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 (curJ < (MAX_COL) && curI < (MAX_ROW)) {
 
       // 获取交互图片的索引值
       let index = getIndexFromRC(curI, curJ, MAX_COL);
@@ -238,7 +270,7 @@ export default class GameView extends engine.Container {
       this.pictures[dropPicIndex] = this.dragPic;
       this.pictures[dragPicIndex] = dropPic;
 
-      // 图片还是在原来的位置
+      // 图片中心还是在原来的位置
       if (dragPicIndex === dropPicIndex) {
         this.dragPic.x = this.distanceX
         this.dragPic.y = this.distanceY
@@ -278,6 +310,7 @@ export default class GameView extends engine.Container {
     // 当前图片的位置
     this.dragPic.x = e.stageX - this.localPicX;
     this.dragPic.y = e.stageY - this.localPicY;
+    console.log(this.dragPic.x, this.dragPic.y)
 
     // 当前图片的中心位置
     this.centerX = this.dragPic.x + w / 2;
@@ -285,4 +318,13 @@ export default class GameView extends engine.Container {
 
   }
 
+  // onClk(e){
+  //     // 重置时间
+  //     this._timeCounter = 0;
+  //     //重置图片顺序
+
+
+  // }
+
+
 }

src/custom/pictures/src/game/utils.ts

@@ -20,7 +20,8 @@ export function createSvga(name, anchorName?) {
 }
 
 export function getIndexFromRC(row,col,maxCol){
-	let index = row * maxCol + col 
+	let index;
+	index = row * maxCol + col ;
 	return index
 }