Commit f1e47180 authored by wildfirecode's avatar wildfirecode

1

parent 4af19acb
{
"name": "垃圾分类",
"desc": "垃圾分类1.0",
"props": {
"MAX_COL": {
"alias": "图片分成几列",
"type": "number",
"default": 3
}
},
"assets": [
{
"name": "playBg",
"url": "//yun.duiba.com.cn/aurora/assets/76b9491f50eaf51ae2becf9958d96a93770854ee.jpg",
"uuid": "888",
"ext": ".jpg"
}
],
"events": {
"in": {
"recycling-start": {
"alias": "开始",
"data": {
"picUrl": "图片路径",
"blockUrl": "blockUrl"
}
},
"recycling-stop": {
"alias": "停止"
}
},
"out": {
"recycling-time-update": {
"alias": "倒计时更新",
"data": {
"time": "剩余时间"
}
},
"recycling-game-fail": {
"alias": "游戏结束",
"data": {
"reason": "结束原因(1:时间到了)"
}
},
"recycling-game-success": {
"alias": "游戏成功",
"data": {
"time": "游戏消耗时间"
}
}
}
},
"id": "recycling",
"code": "\"use strict\";var tslib=require(\"tslib\");function getTexture(e){return engine.Texture.from(getAssetByUUID(e).uuid)}function getTextureByName(e){return getTexture(engine.getAssetByName(e).uuid)}var props={};function prepareProps(){var e=getProps();engine.injectProp(props,e)}function injectProps(e){engine.injectProp(props,e)}var GameView=function(t){function e(){var e=t.call(this)||this;return e._timeCounter=0,e.once(engine.Event.ADDED_TO_STAGE,e.setup,e),e}return tslib.__extends(e,t),e.prototype.start=function(){var e=new engine.Sprite(getTextureByName(\"playBg\"));this.addChild(e)},e.prototype.getSecond=function(){return 0},e.prototype.onTimer=function(){engine.globalEvent.dispatchEvent(\"recycling-time-update\",{second:this.getSecond()}),0==this.getSecond()&&(this.stop(),engine.globalEvent.dispatchEvent(\"recycling-game-fail\",{reason:1}))},e.prototype.stop=function(){},e.prototype.createRects=function(){},e.prototype.setup=function(){console.log(\"onSteup\",props);var e=new engine.Sprite;this.addChild(e)},e.prototype.onDown=function(e){},e.prototype.stageOnUp=function(e){},e.prototype.onSuccess=function(){},e.prototype.onMove=function(e){},e}(engine.Container),GameWrapper=function(n){function e(){var e=n.call(this)||this;engine.globalEvent.addEventListener(\"recycling-start\",e.start,e),engine.globalEvent.addEventListener(\"recycling-stop\",e.stop,e);var t=e._gameView=new GameView;return e.addChild(t),e}return tslib.__extends(e,n),e.prototype.start=function(e){injectProps(e.data),this._gameView.start()},e.prototype.stop=function(e){this._gameView.stop()},e}(engine.Container);function index(e){return prepareProps(),injectProps(e),new GameWrapper}module.exports=index;\n"
}
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
* Created by renjianfeng on 2020-03-13. * Created by renjianfeng on 2020-03-13.
*/ */
const customId = 'pictures'; const customId = 'recycling';
(async function () { (async function() {
let customModule = await fetch(`../meta.json`); let customModule = await fetch(`../meta.json`);
customModule = await customModule.json(); customModule = await customModule.json();
console.log(customModule); console.log(customModule);
...@@ -40,38 +40,24 @@ function launchWithCustomModule(customModule) { ...@@ -40,38 +40,24 @@ function launchWithCustomModule(customModule) {
} }
}], }],
customs: [], customs: [],
}, null, function () { }, null, function() {
setTimeout(() => { setTimeout(() => {
engine.addCustomModule(customId, engine.gameStage.sceneContainer.getChildAt(0)); engine.addCustomModule(customId, engine.gameStage.sceneContainer.getChildAt(0));
}, 100); }, 100);
setTimeout(() => { setTimeout(() => {
engine.globalEvent.dispatchEvent('pictures-start', { engine.globalEvent.dispatchEvent('recycling-start', {});
picUrl: "http://yun.duiba.com.cn/aurora/assets/e1593b97c27077b85b92f7eaaeae1ed64a1eb79a.png",
blockUrl: "888",
});
const d = engine.gameStage.sceneContainer.getChildAt(0); const d = engine.gameStage.sceneContainer.getChildAt(0);
engine.gameStage.sceneContainer.getChildAt(0).x = (d.stage.width-props.W)/2;
engine.gameStage.sceneContainer.getChildAt(0).y = (d.stage.height-props.H)/2;
}, 1000); }, 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"
// });
// }, 30*1000);
}); });
engine.globalEvent.addEventListener('pictures-time-update', (e) => { engine.globalEvent.addEventListener('recycling-time-update', (e) => {
// console.log(e.type, e.data); // console.log(e.type, e.data);
}); });
engine.globalEvent.addEventListener('pictures-game-fail', (e) => { engine.globalEvent.addEventListener('recycling-game-fail', (e) => {
console.log(e.type, e.data); console.log(e.type, e.data);
}); });
engine.globalEvent.addEventListener('pictures-game-success', (e) => { engine.globalEvent.addEventListener('recycling-game-success', (e) => {
console.log(e.type, e.data); console.log(e.type, e.data);
}); });
} }
......
This diff is collapsed.
This diff is collapsed.
{ {
"name": "拼图", "name": "垃圾分类",
"desc": "拼图模块1.0", "desc": "垃圾分类1.0",
"props": { "props": {
"MAX_COL": { "MAX_COL": {
"alias": "图片分成几列", "alias": "图片分成几列",
"type": "number", "type": "number",
"default": 3 "default": 3
},
"MAX_ROW": {
"alias": "图片分成几行",
"type": "number",
"default": 4
},
"W": {
"alias": "图片的宽度",
"type": "number",
"default": 618
},
"H": {
"alias": "图片的高度",
"type": "number",
"default": 827
},
"OFFSET_X": {
"alias": "OFFSET_X",
"type": "number",
"default": 0
},
"OFFSET_Y": {
"alias": "OFFSET_Y",
"type": "number",
"default": 0
},
"GAP": {
"alias": "图片间隙",
"type": "number",
"default": 0
},
"GAME_TIME": {
"alias": "游戏时间",
"type": "number",
"default": 5
} }
}, },
"assets": [ "assets": [{
{ "name": "playBg",
"name": "遮罩", "url": "//yun.duiba.com.cn/aurora/assets/76b9491f50eaf51ae2becf9958d96a93770854ee.jpg",
"url": "//yun.duiba.com.cn/aurora/assets/5b3e30496b2d9fdafb0cf3835fd6704ce10e45b4.png",
"uuid": "888", "uuid": "888",
"ext": ".png" "ext": ".jpg"
} }],
],
"events": { "events": {
"in": { "in": {
"pictures-start": { "recycling-start": {
"alias": "开始", "alias": "开始",
"data": { "data": {
"picUrl":"图片路径", "picUrl": "图片路径",
"blockUrl":"blockUrl" "blockUrl": "blockUrl"
} }
}, },
"pictures-stop": { "recycling-stop": {
"alias": "停止" "alias": "停止"
} }
}, },
"out": { "out": {
"pictures-time-update": { "recycling-time-update": {
"alias": "倒计时更新", "alias": "倒计时更新",
"data": { "data": {
"time":"剩余时间" "time": "剩余时间"
} }
}, },
"pictures-game-fail": { "recycling-game-fail": {
"alias": "游戏结束", "alias": "游戏结束",
"data": { "data": {
"reason": "结束原因(1:时间到了)" "reason": "结束原因(1:时间到了)"
} }
}, },
"pictures-game-success": { "recycling-game-success": {
"alias": "游戏成功", "alias": "游戏成功",
"data": { "data": {
"time": "游戏消耗时间" "time": "游戏消耗时间"
......
...@@ -2,367 +2,79 @@ ...@@ -2,367 +2,79 @@
* Created by rockyl on 2018/8/16. * Created by rockyl on 2018/8/16.
*/ */
import { getTextureByName } from "../../../recycling/src/game/utils";
import { props } from "../props"; import { props } from "../props";
import qietu from "./qietu";
import { getIndexFromRC, getRandomArray, getTexture } from "./utils";
import ObjectPool = engine.ObjectPool;
// let OFFSET_X;
// let OFFSET_Y;
let MAX_COL;
let MAX_ROW;
let W;
let H;
let GAP;
let GAME_TIME;
// 每张图片宽
let w;
// 每张图片高
let h;
export default class GameView extends engine.Container { export default class GameView extends engine.Container {
private _timer; private _timer;
private _timeCounter = 0; private _timeCounter = 0;
start() { constructor() {
super();
if (!this.guideHole) { this.once(engine.Event.ADDED_TO_STAGE, this.setup, this);
this.guideHole = new engine.Image();
this.guideHole.source = 'asset://' + props.blockUrl;
this.guideHole.mouseChildren = this.guideHole.mouseEnabled = false;
}
if (this.pictures) {
for (const pic of this.pictures) {
if (pic && pic.parent)
pic.parent.removeChild(pic);
}
} }
start() {
const bg = new engine.Sprite(getTextureByName('playBg'));
this.addChild(bg);
return;
console.log('on start') console.log('on start')
engine.globalEvent.dispatchEvent('pictures-time-update', {
engine.globalEvent.dispatchEvent('recycling-time-update', {
second: this.getSecond(), second: this.getSecond(),
}); });
// 图片一维数组
const result = qietu(this.picturesWrapper, props.picUrl, MAX_COL, MAX_ROW);
this.picturesWrapper.addChild(this.guideHole);
console.log(this.picturesWrapper)
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._timer = setInterval(() => {
this.onTimer(); this.onTimer();
}, 10) }, 1000)
} }
onTimer() { getSecond() { return 0 }
// 以GAME_TIME为标准
GAME_TIME -= 0.01
GAME_TIME = this.afterPointTwo(GAME_TIME);
GAME_TIME = GAME_TIME.toFixed(2)
if (GAME_TIME < 10) {
GAME_TIME = '0' + GAME_TIME
}
// console.log(GAME_TIME);
engine.globalEvent.dispatchEvent('pictures-time-update', { onTimer() {
engine.globalEvent.dispatchEvent('recycling-time-update', {
second: this.getSecond(), second: this.getSecond(),
}); });
if (this.getSecond() == 0) { if (this.getSecond() == 0) {
GAME_TIME = props.GAME_TIME // GAME_TIME = props.GAME_TIME
this.stop(); this.stop();
engine.globalEvent.dispatchEvent('pictures-game-fail', { engine.globalEvent.dispatchEvent('recycling-game-fail', {
reason: 1 reason: 1
}); });
} }
} }
afterPointTwo(n) {
var floatN = parseFloat(n);
if (isNaN(floatN)) {
return;
}
floatN = Math.round(floatN * 100) / 100;
return floatN;
}
getSecond() {
return GAME_TIME
}
stop() { stop() {
// GAME_TIME = props.GAME_TIME
clearInterval(this._timer);
let len = this.pictures.length;
for(let i=0;i<len;i++){
this.pictures[i].removeAllEventListener();
}
this.stage.removeEventListener(
engine.MouseEvent.MOUSE_UP,
this.stageOnUp,
this
);
} }
constructor() {
super();
this.once(engine.Event.ADDED_TO_STAGE, this.setup, this);
}
//当前图片对象
dragPic;
// 鼠标在当前图片上的位置
localPicX;
localPicY;
// 拖动的图片最开始的位置(左上角为准)
distanceX;
distanceY;
// 图片中心的位置
centerX: number;
centerY: number;
pictures: engine.Sprite[];
// 点击图片时的一维数组索引
index;
// 计算目标图片行和列的位置
indexI: number;
indexJ: number;
rightList: engine.Sprite[];
private picturesWrapper: engine.Sprite;
private guideHole: engine.Image;
createRects() { } createRects() { }
setup() { setup() {
MAX_COL = props.MAX_COL;
MAX_ROW = props.MAX_ROW;
GAME_TIME = props.GAME_TIME;
// OFFSET_X = props.OFFSET_X;
// OFFSET_Y = props.OFFSET_Y;
W = props.W;
H = props.H;
GAP = props.GAP;
// 每张图片宽
w = W / MAX_COL;
// 每张图片高
h = H / MAX_ROW;
console.log('onSteup', props); console.log('onSteup', props);
const parent = new engine.Sprite(); const parent = new engine.Sprite();
this.picturesWrapper = parent;
this.addChild(parent); this.addChild(parent);
// this.picturesWrapper.x = OFFSET_X;
// this.picturesWrapper.y = OFFSET_Y;
// 添加按钮
// 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) { 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.distanceY = this.dragPic.y;
// 最开始点击的图片的索引值
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
);
} }
listenStageOn = 1;
stageOnUp(e) { 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,
this
);
this.stage.removeEventListener(
engine.MouseEvent.MOUSE_UP,
this.stageOnUp,
this
);
// 拖动的图片的中心位置在图片之外,回到原来的位置
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);
// 点击图片的位置
if ( 0 <= curJ && curJ < (MAX_COL) && 0 <= curI && curI < (MAX_ROW)) {
// 获取交互图片的索引值
let index = getIndexFromRC(curI, curJ, MAX_COL);
// console.log(index);
//要交换的图片
let dropPic = this.pictures[index];
let dropPicX = dropPic.x + stageLeft;
let dropPicy = dropPic.y + stageTop;
dropPic.x = this.distanceX;
dropPic.y = this.distanceY;
this.dragPic.x = dropPicX - stageLeft;
this.dragPic.y = dropPicy - stageTop;
// 交换之后索引也需要交换
const dropPicIndex = this.pictures.indexOf(dropPic);
const dragPicIndex = this.pictures.indexOf(this.dragPic);
this.pictures[dropPicIndex] = this.dragPic;
this.pictures[dragPicIndex] = dropPic;
// 图片中心还是在原来的位置
if (dragPicIndex === dropPicIndex) {
this.dragPic.x = this.distanceX
this.dragPic.y = this.distanceY
}
let result = true;
for (let j = 0; j < this.rightList.length; j++) {
if (this.rightList[j] != this.pictures[j]) {
result = false;
break;
}
}
if (result) {
this.onSuccess();
}
} else {
this.dragPic.x = this.distanceX
this.dragPic.y = this.distanceY
}
} }
private onSuccess() { private onSuccess() {
console.log('拼图成功!');
engine.globalEvent.dispatchEvent('pictures-game-success', { time: GAME_TIME });
this.stop();
} }
onMove(e: engine.MouseEvent) { onMove(e: engine.MouseEvent) {
// 当前图片的位置
this.dragPic.x = e.stageX - this.localPicX - (750 - props.W) / 2;
this.dragPic.y = e.stageY - this.localPicY - (this.stage.height - props.H) / 2;
// 当前图片的中心位置
this.centerX = this.dragPic.x + w / 2;
this.centerY = this.dragPic.y + h / 2;
} }
// onClk(e){
// // 重置时间
// this._timeCounter = 0;
// //重置图片顺序
// }
} }
...@@ -17,8 +17,8 @@ export class GameWrapper extends engine.Container { ...@@ -17,8 +17,8 @@ export class GameWrapper extends engine.Container {
constructor() { constructor() {
super(); super();
engine.globalEvent.addEventListener('pictures-start', this.start, this); engine.globalEvent.addEventListener('recycling-start', this.start, this);
engine.globalEvent.addEventListener('pictures-stop', this.stop, this); engine.globalEvent.addEventListener('recycling-stop', this.stop, this);
//创建实例 //创建实例
let gameView = this._gameView = new GameView(); let gameView = this._gameView = new GameView();
...@@ -29,8 +29,6 @@ export class GameWrapper extends engine.Container { ...@@ -29,8 +29,6 @@ export class GameWrapper extends engine.Container {
start(event: engine.Event) { start(event: engine.Event) {
injectProps(event.data); injectProps(event.data);
// this._status = 1;
this._gameView.start(); this._gameView.start();
} }
stop(event: engine.Event) { stop(event: engine.Event) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment