1

src/custom/pictures/debug/app.js

@@ -17,7 +17,7 @@ function launchWithCustomModule(customModule) {
 	//engine.registerCustomCodeModule(customModule);
 	engine.registerCustomModule(customId, window[customId]);
 
-	const {props: propsOption, assets} = customModule;
+	const { props: propsOption, assets } = customModule;
 	let props = engine.computeProps(customModuleProps, propsOption);
 	const customModuleIns = {
 		id: customId,
@@ -46,21 +46,19 @@ function launchWithCustomModule(customModule) {
 		}, 100);
 
 		setTimeout(() => {
-			engine.globalEvent.dispatchEvent('pictures-reset', {
-				"goodsProbability": [0.8,0.1,0.1],
-				"countDown": 30,
-				"acceleratedSpeed":0.1
+			engine.globalEvent.dispatchEvent('pictures-start', {
+				picUrl: "http://yun.duiba.com.cn/aurora/assets/fb06e66c26f17b00f677367bd7571a1aa9b1ade4.png"
 			});
-			engine.globalEvent.dispatchEvent('pictures-start');
+
 		}, 500);
 	});
 	engine.globalEvent.addEventListener('pictures-time-update', (e) => {
 		console.log(e.type, e.data);
 	});
-	engine.globalEvent.addEventListener('pictures-score-update', (e) => {
+	engine.globalEvent.addEventListener('pictures-game-fail', (e) => {
 		console.log(e.type, e.data);
 	});
-	engine.globalEvent.addEventListener('pictures-game-over', (e) => {
+	engine.globalEvent.addEventListener('pictures-game-success', (e) => {
 		console.log(e.type, e.data);
 	});
 }

src/custom/pictures/debug/index.html

@@ -22,7 +22,7 @@
 			height: 100%;
 			overflow: hidden;
 			position: absolute;
-			background-color: red;
+			background-color: gray;
 		}
 		.game-container{
     width: 100%;

src/custom/pictures/debug/main.js

@@ -4,15 +4,15 @@
 	(global = global || self, global.pictures = factory(global.tslib));
 }(this, (function (tslib) { 'use strict';
 
-	function getIndexFromRC(row, col, maxCol) {
-	    var index = row * maxCol + col;
-	    return index;
+	var props = {};
+	function prepareProps() {
+	    var metaProps = getProps();
+	    engine.injectProp(props, metaProps);
 	}
-	function getRandomArray(array) {
-	    array.sort(function () {
-	        return .5 - Math.random();
-	    });
+	function injectProps(p) {
+	    engine.injectProp(props, p);
 	}
+	//# sourceMappingURL=props.js.map
 
 	var qietu = (function (parent, url, MAX_COL, MAX_ROW) {
 	    var W = 600;
@@ -51,40 +51,45 @@
 	    for (var row = 0; row < MAX_ROW; row++) {
 	        _loop_1(row);
 	    }
-	    console.log(spr);
 	    return [spr, pos];
 	});
+	//# sourceMappingURL=qietu.js.map
 
-	var MAX_COL = 3;
-	var MAX_ROW = 3;
-	var W = 600;
-	var H = 600;
-	var GAP = 10;
-	var w = W / MAX_COL;
-	var h = H / MAX_ROW;
+	function getIndexFromRC(row, col, maxCol) {
+	    var index = row * maxCol + col;
+	    return index;
+	}
+	function getRandomArray(array) {
+	    array.sort(function () {
+	        return .5 - Math.random();
+	    });
+	}
+	//# sourceMappingURL=utils.js.map
+
+	var MAX_COL;
+	var MAX_ROW;
+	var W;
+	var H;
+	var GAP;
+	var GAME_TIME;
+	var w;
+	var h;
 	var GameView = (function (_super) {
 	    tslib.__extends(GameView, _super);
 	    function GameView() {
 	        var _this = _super.call(this) || this;
+	        _this._timeCounter = 0;
 	        _this.countTime = 10;
 	        _this.once(engine.Event.ADDED_TO_STAGE, _this.setup, _this);
 	        return _this;
 	    }
-	    GameView.prototype.createRects = function () { };
-	    GameView.prototype.setup = function () {
+	    GameView.prototype.start = function () {
 	        var _this = this;
-	        var url = "http://yun.duiba.com.cn/aurora/assets/fb06e66c26f17b00f677367bd7571a1aa9b1ade4.png";
-	        var parent = new engine.Sprite();
-	        this.addChild(parent);
-	        var timeContainer = new engine.Rect();
-	        this.addChild(timeContainer);
-	        setTimeout(function () {
-	            _this.countTime--;
-	        }, 1000);
-	        if (this.countTime === 0) {
-	            console.log("时间到!");
-	        }
-	        var result = qietu(parent, url, MAX_COL, MAX_ROW);
+	        console.log('on start');
+	        engine.globalEvent.dispatchEvent('pictures-time-update', {
+	            second: this.getSecond(),
+	        });
+	        var result = qietu(this.picturesWrapper, props.picUrl, MAX_COL, MAX_ROW);
 	        this.pictures = result[0];
 	        this.rightList = this.pictures.concat([]);
 	        var posList = result[1];
@@ -92,7 +97,6 @@
 	        var i = 0;
 	        var len;
 	        len = this.pictures.length;
-	        console.log(len);
 	        for (; i < len; i++) {
 	            this.dragPic = this.pictures[i];
 	            this.pictures[i].addEventListener(engine.MouseEvent.MOUSE_DOWN, this.onDown, this);
@@ -100,10 +104,47 @@
 	            this.dragPic.x = x;
 	            this.dragPic.y = y;
 	        }
+	        this._timer = setInterval(function () {
+	            _this.onTimer();
+	        }, 1000);
+	    };
+	    GameView.prototype.onTimer = function () {
+	        this._timeCounter++;
+	        engine.globalEvent.dispatchEvent('pictures-time-update', {
+	            second: this.getSecond(),
+	        });
+	        if (this.getSecond() == 0) {
+	            this.stop();
+	            engine.globalEvent.dispatchEvent('pictures-game-fail', {
+	                reason: 1
+	            });
+	        }
+	    };
+	    GameView.prototype.getSecond = function () {
+	        return GAME_TIME - this._timeCounter;
+	    };
+	    GameView.prototype.stop = function () {
+	        this._timeCounter = 0;
+	        clearInterval(this._timer);
+	    };
+	    GameView.prototype.createRects = function () { };
+	    GameView.prototype.setup = function () {
+	        MAX_COL = props.MAX_COL;
+	        MAX_ROW = props.MAX_ROW;
+	        GAME_TIME = props.GAME_TIME;
+	        W = props.W;
+	        H = props.H;
+	        GAP = props.GAP;
+	        w = W / MAX_COL;
+	        h = H / MAX_ROW;
+	        console.log('onSteup', props);
+	        var parent = new engine.Sprite();
+	        this.picturesWrapper = parent;
+	        this.addChild(parent);
 	    };
 	    GameView.prototype.onDown = function (e) {
-	        console.log(e);
 	        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;
@@ -122,7 +163,6 @@
 	        var curI = Math.floor(this.centerY / (h + GAP));
 	        if (curJ < MAX_COL && curI < MAX_ROW) {
 	            var index = getIndexFromRC(curI, curJ, MAX_COL);
-	            console.log(index);
 	            var dropPic = this.pictures[index];
 	            var dropPicX = dropPic.x;
 	            var dropPicy = dropPic.y;
@@ -142,19 +182,21 @@
 	                }
 	            }
 	            if (result) {
-	                console.log('拼图成功!');
+	                this.onSuccess();
 	            }
 	        }
 	        this.stage.removeEventListener(engine.MouseEvent.MOUSE_UP, this.stageOnUp, this);
 	    };
+	    GameView.prototype.onSuccess = function () {
+	        console.log('拼图成功!');
+	        this.stop();
+	        engine.globalEvent.dispatchEvent('pictures-game-success', {});
+	    };
 	    GameView.prototype.onMove = function (e) {
 	        this.dragPic.x = e.stageX - this.localPicX;
 	        this.dragPic.y = e.stageY - this.localPicY;
 	        this.centerX = this.dragPic.x + w / 2;
 	        this.centerY = this.dragPic.y + h / 2;
-	        console.log(this.centerX, this.centerY, "图片中心位置");
-	        console.log(e.localX, e.localY, e.stageX, e.stageY);
-	        console.log("====================================");
 	    };
 	    return GameView;
 	}(engine.Container));
@@ -163,22 +205,22 @@
 	    tslib.__extends(GameWrapper, _super);
 	    function GameWrapper() {
 	        var _this = _super.call(this) || this;
+	        engine.globalEvent.addEventListener('pictures-start', _this.start, _this);
+	        engine.globalEvent.addEventListener('pictures-stop', _this.stop, _this);
 	        var gameView = _this._gameView = new GameView();
 	        _this.addChild(gameView);
-	        console.log("hello world.");
 	        return _this;
 	    }
+	    GameWrapper.prototype.start = function (event) {
+	        injectProps(event.data);
+	        this._gameView.start();
+	    };
+	    GameWrapper.prototype.stop = function (event) {
+	        this._gameView.stop();
+	    };
 	    return GameWrapper;
 	}(engine.Container));
-
-	var props = {};
-	function prepareProps() {
-	    var metaProps = getProps();
-	    engine.injectProp(props, metaProps);
-	}
-	function injectProps(p) {
-	    engine.injectProp(props, p);
-	}
+	//# sourceMappingURL=GameWrapper.js.map
 
 	function index (props) {
 	    prepareProps();
@@ -186,6 +228,7 @@
 	    var instance = new GameWrapper();
 	    return instance;
 	}
+	//# sourceMappingURL=index.js.map
 
 	return index;
 

src/custom/pictures/meta.json

 {
-	"name": "口红机",
-	"desc": "口红机模块",
+	"name": "拼图",
+	"desc": "拼图模块1.0",
 	"props": {
-		"playerPositionY": {
-			"alias": "玩家Y轴位置",
+		"MAX_COL": {
+			"alias": "图片分成几列",
 			"type": "number",
-			"default": 900
+			"default": 2
 		},
-		"rainScore": {
-			"alias": "接中雨滴获得分数",
+		"MAX_ROW": {
+			"alias": "图片分成几行",
 			"type": "number",
-			"default": 1
+			"default": 2
 		},
-		"stoneScore": {
-			"alias": "接中石块获得分数",
+		"W": {
+			"alias": "图片的宽度",
 			"type": "number",
-			"default": -1
+			"default": 600
 		},
-		"speed": {
-			"alias": "道具掉落初始速度",
+		"H": {
+			"alias": "图片的高度",
 			"type": "number",
-			"default": 10
+			"default": 600
 		},
-		"maxSpeed": {
-			"alias": "道具掉落速度上限",
+		"GAP": {
+			"alias": "图片间隙",
 			"type": "number",
-			"default": 3
+			"default": 10
 		},
-		"gameOverCondition": {
-			"alias": "游戏结束条件(1:接到炸弹死亡，2:分数负数或接到炸弹死亡)",
+		"GAME_TIME": {
+			"alias": "游戏时间",
 			"type": "number",
-			"default": 1
+			"default": 10
 		}
 		
 	},
 	"assets": [
 		{
-			"name": "玩家icon",
+			"name": "测试资源",
 			"url": "//yun.duiba.com.cn/aurora/assets/50a7212a113175fa18c866b005d98f07c558dc77.png",
 			"uuid": "66f23d13-82a5-4cec-9496-301ec240d087",
 			"ext": ".png"
-		},
-		{
-			"name": "雨滴",
-			"url": "//yun.duiba.com.cn/aurora/assets/8564c8c9be3aead71b05a0bab8d7d07ac3f778a1.png",
-			"uuid": "264a6192-d7bf-45e8-8f15-6ba2c439a532",
-			"ext": ".png"
-		},
-		{
-			"name": "炸弹",
-			"url": "//yun.duiba.com.cn/aurora/assets/171e92283cd13c013ee1b76d28d252ff08815d47.png",
-			"uuid": "eb88b42d-e151-4c1b-94b9-7c16f7bfac29",
-			"ext": ".png"
-		},
-		{
-			"name": "石块",
-			"url": "//yun.duiba.com.cn/aurora/assets/99b0af0c59fe79a415a3f032149cfacc27e3ac2c.png",
-			"uuid": "ab1bdabc-21ba-46bf-9299-6c638f766c88",
-			"ext": ".png"
-		},
-		{
-			"name": "水花",
-			"url": "//yun.duiba.com.cn/aurora/assets/93d37b4a0e367e80e375308a6b4414d72d7666fc.svga",
-			"uuid": "b521bf94-20e1-44dd-8eca-d24996cbaeae",
-			"ext": ".svga"
-		},
-		{
-			"name": "炸弹svga",
-			"url": "//yun.duiba.com.cn/aurora/assets/4dd18f0689c663bbcf710a7afc4d929084d97d36.svga",
-			"uuid": "322edf39-805b-4e84-9d07-5573dfeebc0e",
-			"ext": ".svga"
-		},
-		{
-			"name": "玩家",
-			"url": "//yun.duiba.com.cn/aurora/assets/b66300c5d4f27134b0aac3dc90a3220e8ae572eb.svga",
-			"uuid": "71d8dcbc-3931-471a-b585-b3ae01b25aa6",
-			"ext": ".svga"
 		}
 	],
 	"events": {
@@ -105,23 +69,22 @@
 			}
 		},
 		"out": {
-			"pictures-score-update": {
-				"alias": "分数更新",
-				"data": {
-					"score":"分数"
-				}
-			},
 			"pictures-time-update": {
 				"alias": "倒计时更新",
 				"data": {
 					"time":"剩余时间"
 				}
 			},
-			"pictures-game-over": {
+			"pictures-game-fail": {
 				"alias": "游戏结束",
 				"data": {
-					"score":"分数",
-					"reason": "结束原因(1:时间到了,2:玩家死亡)"
+					"reason": "结束原因(1:时间到了)"
+				}
+			},
+			"pictures-game-success": {
+				"alias": "游戏成功",
+				"data": {
+					"time": "游戏消耗时间"
 				}
 			}
 		}

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

@@ -3,22 +3,83 @@
  */
 
 import { props } from "../props";
-import { playSound, createSvga, getIndexFromRC, getRandomArray } from "./utils";
-import ObjectPool = engine.ObjectPool;
-import { getTextureByName } from "./utils";
-import { PoolName } from "./object-pool-init";
 import qietu from "./qietu";
+import { getIndexFromRC, getRandomArray } from "./utils";
+import ObjectPool = engine.ObjectPool;
 
-const MAX_COL = 3;
-const MAX_ROW = 3;
-const W = 600;
-const H = 600;
-const GAP = 10;
+let MAX_COL;
+let MAX_ROW;
+let W;
+let H;
+let GAP;
+let GAME_TIME;
 // 每张图片宽
-const w = W / MAX_COL;
+let w;
 // 每张图片高
-const h = H / MAX_ROW;
+let h;
 export default class GameView extends engine.Container {
+  private _timer;
+  private _timeCounter = 0;
+
+  start() {
+    console.log('on start')
+    engine.globalEvent.dispatchEvent('pictures-time-update', {
+      second: this.getSecond(),
+    });
+
+    // 图片一维数组
+    const result = qietu(this.picturesWrapper, props.picUrl, MAX_COL, MAX_ROW);
+    this.pictures = result[0];
+    this.rightList = this.pictures.concat([]);
+    const posList = result[1];
+    getRandomArray(this.pictures);
+
+    let i = 0;
+    let len;
+    len = this.pictures.length;
+    
+
+    for (; i < len; i++) {
+      this.dragPic = this.pictures[i];
+      this.pictures[i].addEventListener(
+        engine.MouseEvent.MOUSE_DOWN,
+        this.onDown,
+        this
+      );
+      const [x, y] = posList[i];
+      this.dragPic.x = x;
+      this.dragPic.y = y;
+    }
+
+    this._timer = setInterval(() => {
+      this.onTimer();
+    }, 1000)
+  }
+
+
+  onTimer() {
+    this._timeCounter++;
+    engine.globalEvent.dispatchEvent('pictures-time-update', {
+      second: this.getSecond(),
+    });
+
+    if (this.getSecond() == 0) {
+      this.stop();
+      engine.globalEvent.dispatchEvent('pictures-game-fail', {
+        reason: 1
+      });
+    }
+  }
+
+  getSecond() {
+    return GAME_TIME - this._timeCounter;
+  }
+
+  stop() {
+    this._timeCounter = 0;
+    clearInterval(this._timer);
+  }
+
   constructor() {
     super();
     this.once(engine.Event.ADDED_TO_STAGE, this.setup, this);
@@ -37,7 +98,6 @@ export default class GameView extends engine.Container {
   centerY: number;
 
   pictures;
-  // curPic
 
   // 点击图片时的索引
   index;
@@ -46,67 +106,37 @@ export default class GameView extends engine.Container {
   rightList: engine.Sprite[];
 
   // 倒计时时间
-  countTime = 10
+  countTime = 10;
+
+  private picturesWrapper: engine.Sprite;
 
-  createRects() {}
+  createRects() { }
   setup() {
-    // debugger;
-    const url =
-      "http://yun.duiba.com.cn/aurora/assets/fb06e66c26f17b00f677367bd7571a1aa9b1ade4.png";
-    // 图片容器
+    MAX_COL = props.MAX_COL;
+    MAX_ROW = props.MAX_ROW;
+    GAME_TIME = props.GAME_TIME;
+    W = props.W;
+    H = props.H;
+    GAP = props.GAP;
+    // 每张图片宽
+    w = W / MAX_COL;
+    // 每张图片高
+    h = H / MAX_ROW;
+
+    console.log('onSteup', props);
+
     const parent = new engine.Sprite();
+    this.picturesWrapper = parent;
     this.addChild(parent);
-
-
-    // 创建一个显示时间的容器
-    const timeContainer = new engine.Rect()
-    this.addChild(timeContainer)
-
-    setTimeout(()=>{
-      this.countTime--;
-    },1000)
-
-    if(this.countTime === 0){
-      console.log("时间到!")
-    }
-
-
-    // let pictures
-    // 图片一维数组
-    // this.pictures = qietu(parent, url,MAX_COL,MAX_ROW);
-    const result = qietu(parent, url, MAX_COL, MAX_ROW);
-    this.pictures = result[0];
-    this.rightList = this.pictures.concat([]);
-    const posList = result[1];
-    getRandomArray(this.pictures);
-
-    let i = 0;
-    // let j = 0;
-    // 数组长度
-    let len;
-    len = this.pictures.length;
-    console.log(len);
-
-    for (; i < len; i++) {
-      this.dragPic = this.pictures[i];
-      this.pictures[i].addEventListener(
-        engine.MouseEvent.MOUSE_DOWN,
-        this.onDown,
-        this
-      );
-      const [x, y] = posList[i];
-      this.dragPic.x = x;
-      this.dragPic.y = y;
-    }
   }
+
   onDown(e: engine.MouseEvent) {
-    console.log(e);
-    // this.addEventListener(engine.MouseEvent.MOUSE_MOVE, this.onMove, this)
+    // console.log(e);
 
     // 创建一个图片对象接收当前位置信息
     this.dragPic = e.target;
+    this.picturesWrapper.addChild(this.dragPic);
 
-    // let currentpic = this.currentPic;
     // 鼠标的偏移量
     this.localPicX = e.localX / MAX_COL;
     this.localPicY = e.localY / MAX_ROW;
@@ -137,7 +167,6 @@ export default class GameView extends engine.Container {
 
   }
 
-
   stageOnUp(e) {
     this.stage.removeEventListener(
       engine.MouseEvent.MOUSE_MOVE,
@@ -145,7 +174,6 @@ export default class GameView extends engine.Container {
       this
     );
 
-
     // 判断图片是否进入另一张图片的范围内
     // 图片第几行第几列
     let curJ = Math.floor(this.centerX / (w + GAP));
@@ -155,12 +183,10 @@ export default class GameView extends engine.Container {
     // 点击图片的位置
 
     if (curJ < MAX_COL && curI < MAX_ROW) {
-      // 要交换的图片
-      // console.log(this.pictures[this.index]);
 
       // 获取交互图片的索引值
       let index = getIndexFromRC(curI, curJ, MAX_COL);
-      console.log(index);
+      // console.log(index);
 
       //要交换的图片
       let dropPic = this.pictures[index];
@@ -191,13 +217,11 @@ export default class GameView extends engine.Container {
       }
 
       if (result) {
-		    console.log('拼图成功!')
-        
+        this.onSuccess();
+
       }
     }
 
-    
-
     this.stage.removeEventListener(
       engine.MouseEvent.MOUSE_UP,
       this.stageOnUp,
@@ -205,6 +229,12 @@ export default class GameView extends engine.Container {
     );
   }
 
+  private onSuccess() {
+    console.log('拼图成功!');
+    this.stop();
+    engine.globalEvent.dispatchEvent('pictures-game-success', {});
+  }
+
   onMove(e: engine.MouseEvent) {
     // 当前图片的位置
     this.dragPic.x = e.stageX - this.localPicX;
@@ -214,15 +244,6 @@ export default class GameView extends engine.Container {
     this.centerX = this.dragPic.x + w / 2;
     this.centerY = this.dragPic.y + h / 2;
 
-    console.log(this.centerX, this.centerY, "图片中心位置");
-
-
-    // 记录移动图片的位置
-
-    console.log(e.localX, e.localY, e.stageX, e.stageY);
-    console.log("====================================");
-
-    
   }
 
 }

src/custom/pictures/src/game/GameWrapper.ts

@@ -3,11 +3,11 @@
  */
 
 import GameView from "./GameView";
-import {injectProps} from "../props";
+import { injectProps } from "../props";
 
 
 export class GameWrapper extends engine.Container {
-	private _status;
+	// private _status;
 	private _gameView: GameView;
 
 
@@ -17,13 +17,24 @@ export class GameWrapper extends engine.Container {
 	constructor() {
 		super();
 
+		engine.globalEvent.addEventListener('pictures-start', this.start, this);
+		engine.globalEvent.addEventListener('pictures-stop', this.stop, this);
+
 		//创建实例
 		let gameView = this._gameView = new GameView();
 		this.addChild(gameView);
 
-		console.log("hello world.");
 	}
 
-	
+	start(event: engine.Event) {
+		injectProps(event.data);
+
+		// this._status = 1;
 
+		this._gameView.start();
+	}
+	stop(event: engine.Event) {
+		
+		this._gameView.stop();
+	}
 }

src/custom/pictures/src/game/qietu.ts

@@ -36,6 +36,6 @@ export default (parent, url,MAX_COL,MAX_ROW) => {
       });
     }
   }
-  console.log(spr);
+  // console.log(spr);
   return [spr,pos];
 };