拼图0.3

src/custom/pictures/debug/main.js

@@ -12,6 +12,7 @@
 	function injectProps(p) {
 	    engine.injectProp(props, p);
 	}
+	//# sourceMappingURL=props.js.map
 
 	var picMap = {};
 	var posMap = {};
@@ -59,6 +60,7 @@
 	    posMap[url] = pos.concat([]);
 	    return [spr, pos];
 	});
+	//# sourceMappingURL=qietu.js.map
 
 	function getTexture(uuid) {
 	    return engine.Texture.from(getAssetByUUID(uuid).uuid);
@@ -67,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) {
@@ -75,6 +78,7 @@
 	        return .5 - Math.random();
 	    });
 	}
+	//# sourceMappingURL=utils.js.map
 
 	var MAX_COL;
 	var MAX_ROW;
@@ -93,7 +97,6 @@
 	        return _this;
 	    }
 	    GameView.prototype.start = function () {
-	        var _this = this;
 	        console.log('on start');
 	        engine.globalEvent.dispatchEvent('pictures-time-update', {
 	            second: this.getSecond(),
@@ -114,9 +117,6 @@
 	            this.dragPic.x = x;
 	            this.dragPic.y = y;
 	        }
-	        this._timer = setInterval(function () {
-	            _this.onTimer();
-	        }, 10);
 	    };
 	    GameView.prototype.onTimer = function () {
 	        this._timeCounter += 0.01;
@@ -171,20 +171,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;
@@ -226,6 +230,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;
 	    };
@@ -251,6 +256,7 @@
 	    };
 	    return GameWrapper;
 	}(engine.Container));
+	//# sourceMappingURL=GameWrapper.js.map
 
 	function index (props) {
 	    prepareProps();
@@ -258,6 +264,7 @@
 	    var instance = new GameWrapper();
 	    return instance;
 	}
+	//# sourceMappingURL=index.js.map
 
 	return index;
 

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

@@ -21,9 +21,6 @@ export default class GameView extends engine.Container {
   private _timer;
   private _timeCounter = 0;
 
-  // 倒计时时间
-  // private countTime = 20;
-
   start() {
     console.log('on start')
     engine.globalEvent.dispatchEvent('pictures-time-update', {
@@ -53,11 +50,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)
   }
 
 
@@ -108,20 +106,21 @@ export default class GameView extends engine.Container {
 
   //当前图片对象
   dragPic;
-
+  // 鼠标在当前图片上的位置
   localPicX;
   localPicY;
-
+  // 拖动的图片最开始的位置(左上角为准)
   distanceX;
   distanceY;
-
+  // 图片中心的位置
   centerX: number;
   centerY: number;
 
   pictures;
 
-  // 点击图片时的索引
+  // 点击图片时的一维数组索引
   index;
+  // 计算目标图片行和列的位置
   indexI: number;
   indexJ: number;
   rightList: engine.Sprite[];
@@ -152,6 +151,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) {
@@ -170,13 +181,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,
@@ -198,17 +221,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));
+    // 要交换的图片第几行第几列
+    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);
@@ -234,7 +263,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
@@ -274,6 +303,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;
@@ -281,4 +311,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
 }