Skip to content

G
game-stydy
Commit 9c63baab authored by wildfirecode13's avatar wildfirecode13
Browse files
Options

init

parent e26160b3
Show whitespace changes
Inline Side-by-side
Showing with 151 additions and 26 deletions
dist/bundle.js
View file @ 9c63baab
......@@ -16,7 +16,7 @@
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"addDragDemo\": () => (/* binding */ addDragDemo)\n/* harmony export */ });\nvar _this = undefined;\nvar addDragDemo = function (stage) {\n var PIC_SIZE = 200; //图片尺寸，单位像素s\n var GAP = 2; //位置间隔\n var picture1 = FYGE.Sprite.fromUrl('//yun.duiba.com.cn/aurora/assets/cd16134f2544202ed5676adbd5114286aec44347.png');\n stage.addChild(picture1);\n var picture2 = FYGE.Sprite.fromUrl('//yun.duiba.com.cn/aurora/assets/c55dcd277542a6c3e983278ae5835d89848b9bd9.png');\n stage.addChild(picture2);\n picture2.position.set(PIC_SIZE + GAP, 0);\n //鼠标按下起始点\n var startPoint;\n //图片起始位置\n var currentPictureOrigin;\n var onStageMove = function (currentPicture, event) {\n //鼠标当前位置\n var currentPoint = { x: event.stageX, y: event.stageY };\n //鼠标按下点到鼠标当前点的偏移量\n var mouseOffsetX = currentPoint.x - startPoint.x;\n var mouseOffsetY = currentPoint.y - startPoint.y;\n currentPicture.x = currentPictureOrigin.x + mouseOffsetX;\n currentPicture.y = currentPictureOrigin.y + mouseOffsetY;\n };\n var onMouseUp_pic = function (onStageMoveBinded) {\n //鼠标抬起后应该移出舞台移动事件，否则会重复添加事件\n stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMoveBinded, _this);\n };\n var onMouseDown_pic = function (event) {\n var currentPicture = event.target;\n var onStageMoveBinded = onStageMove.bind(_this, currentPicture);\n //图片鼠标弹起事件，事件触发一次即移除，否则会重复添加鼠标弹起事件\n currentPicture.once(FYGE.MouseEvent.MOUSE_UP, onMouseUp_pic.bind(_this, onStageMoveBinded), _this);\n //添加舞台移动事件，鼠标移动即触发\n //FYGE.MouseEvent.MOUSE_MOVE 会在鼠标移动过程中触发\n stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMoveBinded, _this);\n //event事件对象\n //event.stageX，event.stageY当前鼠标在舞台的位置\n startPoint = { x: event.stageX, y: event.stageY };\n currentPictureOrigin = { x: currentPicture.x, y: currentPicture.y };\n stage.addChildAt(currentPicture, stage.children.length - 1);\n };\n //增加鼠标按下事件\n picture1.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_pic, _this);\n picture2.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_pic, _this);\n};\n\n\n//# sourceURL=webpack:///./src/drag.ts?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"addDragDemo\": () => (/* binding */ addDragDemo)\n/* harmony export */ });\nvar _this = undefined;\nvar addDragDemo = function (stage) {\n var gameWrapper = new FYGE.Sprite();\n stage.addChild(gameWrapper);\n var PIC_URLS = [\n '//yun.duiba.com.cn/aurora/assets/cd16134f2544202ed5676adbd5114286aec44347.png',\n '//yun.duiba.com.cn/aurora/assets/c55dcd277542a6c3e983278ae5835d89848b9bd9.png',\n '//yun.duiba.com.cn/aurora/assets/b42c49baaf8754139d2e940fe97ba1cb289b11fa.png',\n '//yun.duiba.com.cn/aurora/assets/4a4b850995da348ccd5fb520d5b9ef5e0fb8349f.png',\n '//yun.duiba.com.cn/aurora/assets/5b3e3b52f406df1543e2eeca1ce11719a28c6401.png',\n '//yun.duiba.com.cn/aurora/assets/cae0529d1ff2eaa323dc0615d12a1f05e3a67c06.png',\n '//yun.duiba.com.cn/aurora/assets/5b91853f9d87de73e319d42ea9df139ddd89d537.png',\n '//yun.duiba.com.cn/aurora/assets/a2893c5a0d03ca3252160de1584584e18abe2a4a.png',\n '//yun.duiba.com.cn/aurora/assets/c36b0851f61a812e6d745bc205c0551b6590d11d.png',\n ];\n var fill = function (size) {\n var list = [];\n for (var i = 0; i < size; i++) {\n list.push(i);\n }\n return list;\n };\n var GAME_SIZE = 3;\n var INIT_DATA = fill(GAME_SIZE * GAME_SIZE); //数据为图片id，从0开始（图片索引）\n var gamedata = JSON.parse(JSON.stringify(INIT_DATA)); //深拷贝\n gamedata.shuffle(); //打乱图片，后续需要和INIT_DATA做对比\n console.log('初始打乱的图片数据', gamedata.map(function (i) { return (i + 1); }));\n function getIndex(row, col, maxCol) {\n var index;\n index = row * maxCol + col;\n return index;\n }\n //鼠标按下起始点\n var startPoint;\n //图片起始位置\n var currPicOriginPos;\n var currentPic;\n var PIC_SIZE = 200;\n var GAP = 2;\n var onStageMove = function (event) {\n //鼠标当前位置\n var currentPoint = { x: event.stageX, y: event.stageY };\n //鼠标按下点到鼠标当前点的偏移量\n var mouseOffsetX = currentPoint.x - startPoint.x;\n var mouseOffsetY = currentPoint.y - startPoint.y;\n currentPic.x = currPicOriginPos.x + mouseOffsetX;\n currentPic.y = currPicOriginPos.y + mouseOffsetY;\n };\n var onMouseUp_pic = function () {\n //鼠标抬起后应该移出舞台移动事件，否则会重复添加事件\n gameWrapper.stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMove, _this);\n var picCenterX = currentPic.x + PIC_SIZE / 2;\n var picCenterY = currentPic.y + PIC_SIZE / 2;\n var dropCol = Math.floor(picCenterX / PIC_SIZE);\n var dropRow = Math.floor(picCenterY / PIC_SIZE);\n var dropIndex = getIndex(dropRow, dropCol, GAME_SIZE);\n console.log('drop index', dropIndex);\n var dropId = gamedata[dropIndex];\n var dropPic = getPicDisplayById(dropId);\n var currentPicId = getPicId(currentPic);\n var currentPicIndex = gamedata.indexOf(currentPicId);\n console.log('currentPicIndex', currentPicIndex);\n console.log('上一个数据', gamedata.map(function (i) { return (i + 1); }));\n swap(currentPicIndex, dropIndex, gamedata);\n console.log('交换后的数据', gamedata.map(function (i) { return (i + 1); }));\n currentPic.x = dropPic.x;\n currentPic.y = dropPic.y;\n dropPic.x = currPicOriginPos.x;\n dropPic.y = currPicOriginPos.y;\n if (equalTo(INIT_DATA, gamedata)) {\n setTimeout(function () {\n alert('哈哈，赢了');\n }, 500);\n }\n };\n var onMouseDown_picItem = function (event) {\n currentPic = event.target;\n //图片鼠标弹起事件，事件触发一次即移除，否则会重复添加鼠标弹起事件\n currentPic.once(FYGE.MouseEvent.MOUSE_UP, onMouseUp_pic, _this);\n //添加舞台移动事件，鼠标移动即触发\n //FYGE.MouseEvent.MOUSE_MOVE 会在鼠标移动过程中触发\n gameWrapper.stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMove, _this);\n //event事件对象\n //event.stageX，event.stageY当前鼠标在舞台的位置\n startPoint = { x: event.stageX, y: event.stageY };\n currPicOriginPos = { x: currentPic.x, y: currentPic.y };\n gameWrapper.addChild(currentPic); //把当前图片移动到最上层\n };\n var PIC_DISPLAY_LIST = INIT_DATA.map(function (data) { return FYGE.Sprite.fromUrl(PIC_URLS[data]); }); //图片视图数据（列表）\n var getPicDisplayById = function (id) { return PIC_DISPLAY_LIST[id]; }; //获取视图数据方法\n var getPicId = function (picDisplay) {\n for (var i = 0; i < PIC_DISPLAY_LIST.length; i++) {\n var element = PIC_DISPLAY_LIST[i];\n if (element == picDisplay)\n return i;\n }\n return -1;\n }; //你会看到用索引的好处\n var equalTo = function (array1, array2) {\n if (array1.length != array1.length)\n return false;\n var len = array1.length || array1.length;\n for (var i = 0; i < len; i++) {\n var a = array1[i];\n var b = array2[i];\n if (a != b)\n return false;\n }\n return true;\n }; //判断数组是否相等\n //数组元素交换\n var swap = function (index1, index2, list) {\n var ele1 = list[index1];\n var ele2 = list[index2];\n list[index1] = ele2;\n list[index2] = ele1;\n return list;\n };\n //生成游戏\n gamedata.map(function (data, index) {\n var picItem = gameWrapper.addChild(getPicDisplayById(data));\n var col = index % GAME_SIZE;\n var row = Math.floor(index / GAME_SIZE);\n picItem.x = col * (PIC_SIZE + GAP);\n picItem.y = row * (PIC_SIZE + GAP);\n //增加鼠标按下事件\n picItem.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_picItem, _this);\n return picItem;\n });\n};\n\n\n//# sourceURL=webpack:///./src/drag.ts?");
/***/ }),
......
public/bundle.js
View file @ 9c63baab
......@@ -16,7 +16,7 @@
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"addDragDemo\": () => (/* binding */ addDragDemo)\n/* harmony export */ });\nvar _this = undefined;\nvar addDragDemo = function (stage) {\n var PIC_SIZE = 200; //图片尺寸，单位像素s\n var GAP = 2; //位置间隔\n var picture1 = FYGE.Sprite.fromUrl('//yun.duiba.com.cn/aurora/assets/cd16134f2544202ed5676adbd5114286aec44347.png');\n stage.addChild(picture1);\n var picture2 = FYGE.Sprite.fromUrl('//yun.duiba.com.cn/aurora/assets/c55dcd277542a6c3e983278ae5835d89848b9bd9.png');\n stage.addChild(picture2);\n picture2.position.set(PIC_SIZE + GAP, 0);\n //鼠标按下起始点\n var startPoint;\n //图片起始位置\n var currentPictureOrigin;\n var onStageMove = function (currentPicture, event) {\n //鼠标当前位置\n var currentPoint = { x: event.stageX, y: event.stageY };\n //鼠标按下点到鼠标当前点的偏移量\n var mouseOffsetX = currentPoint.x - startPoint.x;\n var mouseOffsetY = currentPoint.y - startPoint.y;\n currentPicture.x = currentPictureOrigin.x + mouseOffsetX;\n currentPicture.y = currentPictureOrigin.y + mouseOffsetY;\n };\n var onMouseUp_pic = function (onStageMoveBinded) {\n //鼠标抬起后应该移出舞台移动事件，否则会重复添加事件\n stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMoveBinded, _this);\n };\n var onMouseDown_pic = function (event) {\n var currentPicture = event.target;\n var onStageMoveBinded = onStageMove.bind(_this, currentPicture);\n //图片鼠标弹起事件，事件触发一次即移除，否则会重复添加鼠标弹起事件\n currentPicture.once(FYGE.MouseEvent.MOUSE_UP, onMouseUp_pic.bind(_this, onStageMoveBinded), _this);\n //添加舞台移动事件，鼠标移动即触发\n //FYGE.MouseEvent.MOUSE_MOVE 会在鼠标移动过程中触发\n stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMoveBinded, _this);\n //event事件对象\n //event.stageX，event.stageY当前鼠标在舞台的位置\n startPoint = { x: event.stageX, y: event.stageY };\n currentPictureOrigin = { x: currentPicture.x, y: currentPicture.y };\n stage.addChildAt(currentPicture, stage.children.length - 1);\n };\n //增加鼠标按下事件\n picture1.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_pic, _this);\n picture2.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_pic, _this);\n};\n\n\n//# sourceURL=webpack:///./src/drag.ts?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"addDragDemo\": () => (/* binding */ addDragDemo)\n/* harmony export */ });\nvar _this = undefined;\nvar addDragDemo = function (stage) {\n var gameWrapper = new FYGE.Sprite();\n stage.addChild(gameWrapper);\n var PIC_URLS = [\n '//yun.duiba.com.cn/aurora/assets/cd16134f2544202ed5676adbd5114286aec44347.png',\n '//yun.duiba.com.cn/aurora/assets/c55dcd277542a6c3e983278ae5835d89848b9bd9.png',\n '//yun.duiba.com.cn/aurora/assets/b42c49baaf8754139d2e940fe97ba1cb289b11fa.png',\n '//yun.duiba.com.cn/aurora/assets/4a4b850995da348ccd5fb520d5b9ef5e0fb8349f.png',\n '//yun.duiba.com.cn/aurora/assets/5b3e3b52f406df1543e2eeca1ce11719a28c6401.png',\n '//yun.duiba.com.cn/aurora/assets/cae0529d1ff2eaa323dc0615d12a1f05e3a67c06.png',\n '//yun.duiba.com.cn/aurora/assets/5b91853f9d87de73e319d42ea9df139ddd89d537.png',\n '//yun.duiba.com.cn/aurora/assets/a2893c5a0d03ca3252160de1584584e18abe2a4a.png',\n '//yun.duiba.com.cn/aurora/assets/c36b0851f61a812e6d745bc205c0551b6590d11d.png',\n ];\n var fill = function (size) {\n var list = [];\n for (var i = 0; i < size; i++) {\n list.push(i);\n }\n return list;\n };\n var GAME_SIZE = 3;\n var INIT_DATA = fill(GAME_SIZE * GAME_SIZE); //数据为图片id，从0开始（图片索引）\n var gamedata = JSON.parse(JSON.stringify(INIT_DATA)); //深拷贝\n gamedata.shuffle(); //打乱图片，后续需要和INIT_DATA做对比\n console.log('初始打乱的图片数据', gamedata.map(function (i) { return (i + 1); }));\n function getIndex(row, col, maxCol) {\n var index;\n index = row * maxCol + col;\n return index;\n }\n //鼠标按下起始点\n var startPoint;\n //图片起始位置\n var currPicOriginPos;\n var currentPic;\n var PIC_SIZE = 200;\n var GAP = 2;\n var onStageMove = function (event) {\n //鼠标当前位置\n var currentPoint = { x: event.stageX, y: event.stageY };\n //鼠标按下点到鼠标当前点的偏移量\n var mouseOffsetX = currentPoint.x - startPoint.x;\n var mouseOffsetY = currentPoint.y - startPoint.y;\n currentPic.x = currPicOriginPos.x + mouseOffsetX;\n currentPic.y = currPicOriginPos.y + mouseOffsetY;\n };\n var onMouseUp_pic = function () {\n //鼠标抬起后应该移出舞台移动事件，否则会重复添加事件\n gameWrapper.stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMove, _this);\n var picCenterX = currentPic.x + PIC_SIZE / 2;\n var picCenterY = currentPic.y + PIC_SIZE / 2;\n var dropCol = Math.floor(picCenterX / PIC_SIZE);\n var dropRow = Math.floor(picCenterY / PIC_SIZE);\n var dropIndex = getIndex(dropRow, dropCol, GAME_SIZE);\n console.log('drop index', dropIndex);\n var dropId = gamedata[dropIndex];\n var dropPic = getPicDisplayById(dropId);\n var currentPicId = getPicId(currentPic);\n var currentPicIndex = gamedata.indexOf(currentPicId);\n console.log('currentPicIndex', currentPicIndex);\n console.log('上一个数据', gamedata.map(function (i) { return (i + 1); }));\n swap(currentPicIndex, dropIndex, gamedata);\n console.log('交换后的数据', gamedata.map(function (i) { return (i + 1); }));\n currentPic.x = dropPic.x;\n currentPic.y = dropPic.y;\n dropPic.x = currPicOriginPos.x;\n dropPic.y = currPicOriginPos.y;\n if (equalTo(INIT_DATA, gamedata)) {\n setTimeout(function () {\n alert('哈哈，赢了');\n }, 500);\n }\n };\n var onMouseDown_picItem = function (event) {\n currentPic = event.target;\n //图片鼠标弹起事件，事件触发一次即移除，否则会重复添加鼠标弹起事件\n currentPic.once(FYGE.MouseEvent.MOUSE_UP, onMouseUp_pic, _this);\n //添加舞台移动事件，鼠标移动即触发\n //FYGE.MouseEvent.MOUSE_MOVE 会在鼠标移动过程中触发\n gameWrapper.stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMove, _this);\n //event事件对象\n //event.stageX，event.stageY当前鼠标在舞台的位置\n startPoint = { x: event.stageX, y: event.stageY };\n currPicOriginPos = { x: currentPic.x, y: currentPic.y };\n gameWrapper.addChild(currentPic); //把当前图片移动到最上层\n };\n var PIC_DISPLAY_LIST = INIT_DATA.map(function (data) { return FYGE.Sprite.fromUrl(PIC_URLS[data]); }); //图片视图数据（列表）\n var getPicDisplayById = function (id) { return PIC_DISPLAY_LIST[id]; }; //获取视图数据方法\n var getPicId = function (picDisplay) {\n for (var i = 0; i < PIC_DISPLAY_LIST.length; i++) {\n var element = PIC_DISPLAY_LIST[i];\n if (element == picDisplay)\n return i;\n }\n return -1;\n }; //你会看到用索引的好处\n var equalTo = function (array1, array2) {\n if (array1.length != array1.length)\n return false;\n var len = array1.length || array1.length;\n for (var i = 0; i < len; i++) {\n var a = array1[i];\n var b = array2[i];\n if (a != b)\n return false;\n }\n return true;\n }; //判断数组是否相等\n //数组元素交换\n var swap = function (index1, index2, list) {\n var ele1 = list[index1];\n var ele2 = list[index2];\n list[index1] = ele2;\n list[index2] = ele1;\n return list;\n };\n //生成游戏\n gamedata.map(function (data, index) {\n var picItem = gameWrapper.addChild(getPicDisplayById(data));\n var col = index % GAME_SIZE;\n var row = Math.floor(index / GAME_SIZE);\n picItem.x = col * (PIC_SIZE + GAP);\n picItem.y = row * (PIC_SIZE + GAP);\n //增加鼠标按下事件\n picItem.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_picItem, _this);\n return picItem;\n });\n};\n\n\n//# sourceURL=webpack:///./src/drag.ts?");
/***/ }),
......
public/index.html
View file @ 9c63baab
......@@ -27,6 +27,20 @@
background-image: url("https://yun.duiba.com.cn/db_games/activity/game/1550472986/resource/assets/playscene/playscenebg.jpg"); */
}
</style>
<script>
Array.prototype.shuffle = function () {
var array = this;
var m = array.length,
t, i;
while (m) {
i = Math.floor(Math.random() * m--);
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
</script>
</head>
<body>
......
src/drag.ts
View file @ 9c63baab
export const addDragDemo = (stage: FYGE.Stage) => {
const PIC_SIZE = 200;//图片尺寸，单位像素s
const GAP = 2;//位置间隔
const picture1 = FYGE.Sprite.fromUrl('//yun.duiba.com.cn/aurora/assets/cd16134f2544202ed5676adbd5114286aec44347.png');
stage.addChild(picture1);
const gameWrapper = new FYGE.Sprite();
stage.addChild(gameWrapper);
const picture2 = FYGE.Sprite.fromUrl('//yun.duiba.com.cn/aurora/assets/c55dcd277542a6c3e983278ae5835d89848b9bd9.png');
stage.addChild(picture2);
picture2.position.set(PIC_SIZE + GAP, 0)
const PIC_URLS = [
'//yun.duiba.com.cn/aurora/assets/cd16134f2544202ed5676adbd5114286aec44347.png',
'//yun.duiba.com.cn/aurora/assets/c55dcd277542a6c3e983278ae5835d89848b9bd9.png',
'//yun.duiba.com.cn/aurora/assets/b42c49baaf8754139d2e940fe97ba1cb289b11fa.png',
'//yun.duiba.com.cn/aurora/assets/4a4b850995da348ccd5fb520d5b9ef5e0fb8349f.png',
'//yun.duiba.com.cn/aurora/assets/5b3e3b52f406df1543e2eeca1ce11719a28c6401.png',
'//yun.duiba.com.cn/aurora/assets/cae0529d1ff2eaa323dc0615d12a1f05e3a67c06.png',
'//yun.duiba.com.cn/aurora/assets/5b91853f9d87de73e319d42ea9df139ddd89d537.png',
'//yun.duiba.com.cn/aurora/assets/a2893c5a0d03ca3252160de1584584e18abe2a4a.png',
'//yun.duiba.com.cn/aurora/assets/c36b0851f61a812e6d745bc205c0551b6590d11d.png',
]
const fill = (size) => {
const list = [];
for (let i = 0; i < size; i++) { list.push(i) }
return list;
}
const GAME_SIZE = 3;
const INIT_DATA: any = fill(GAME_SIZE * GAME_SIZE);//数据为图片id，从0开始（图片索引）
let gamedata = JSON.parse(JSON.stringify(INIT_DATA));//深拷贝
gamedata.shuffle();//打乱图片，后续需要和INIT_DATA做对比
console.log(
'初始打乱的图片数据',
gamedata.map(i => (i + 1))
)
function getIndex(row, col, maxCol) {
let index;
index = row * maxCol + col;
return index
}
//鼠标按下起始点
let startPoint;
//图片起始位置
let currentPictureOrigin;
let currPicOriginPos;
let currentPic: FYGE.DisplayObject;
const PIC_SIZE = 200;
const GAP = 2;
const onStageMove = (currentPicture: FYGE.Sprite, event: FYGE.MouseEvent) => {
const onStageMove = (event: FYGE.MouseEvent) => {
//鼠标当前位置
const currentPoint = { x: event.stageX, y: event.stageY };
//鼠标按下点到鼠标当前点的偏移量
let mouseOffsetX = currentPoint.x - startPoint.x;
let mouseOffsetY = currentPoint.y - startPoint.y;
currentPicture.x = currentPictureOrigin.x + mouseOffsetX;
currentPicture.y = currentPictureOrigin.y + mouseOffsetY;
currentPic.x = currPicOriginPos.x + mouseOffsetX;
currentPic.y = currPicOriginPos.y + mouseOffsetY;
}
const onMouseUp_pic = (onStageMoveBinded: Function) => {
const onMouseUp_pic = () => {
//鼠标抬起后应该移出舞台移动事件，否则会重复添加事件
stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMoveBinded, this);
}
gameWrapper.stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMove, this);
const picCenterX = currentPic.x + PIC_SIZE / 2;
const picCenterY = currentPic.y + PIC_SIZE / 2;
const dropCol = Math.floor(picCenterX / PIC_SIZE);
const dropRow = Math.floor(picCenterY / PIC_SIZE);
const dropIndex = getIndex(dropRow, dropCol, GAME_SIZE);
console.log('drop index', dropIndex);
const dropId = gamedata[dropIndex];
const dropPic = getPicDisplayById(dropId);
const currentPicId = getPicId(currentPic);
const currentPicIndex = gamedata.indexOf(currentPicId);
console.log('currentPicIndex', currentPicIndex);
console.log('上一个数据', gamedata.map(i => (i + 1)))
swap(currentPicIndex, dropIndex, gamedata);
console.log('交换后的数据', gamedata.map(i => (i + 1)))
const onMouseDown_pic = (event: FYGE.MouseEvent) => {
const currentPicture = event.target;
currentPic.x = dropPic.x;
currentPic.y = dropPic.y;
const onStageMoveBinded = onStageMove.bind(this, currentPicture);
dropPic.x = currPicOriginPos.x;
dropPic.y = currPicOriginPos.y;
if (equalTo(INIT_DATA, gamedata)) {
setTimeout(() => {
alert('哈哈，赢了')
}, 500);
}
}
const onMouseDown_picItem = (event: FYGE.MouseEvent) => {
currentPic = event.target;
//图片鼠标弹起事件，事件触发一次即移除，否则会重复添加鼠标弹起事件
currentPicture.once(FYGE.MouseEvent.MOUSE_UP, onMouseUp_pic.bind(this, onStageMoveBinded), this);
currentPic.once(FYGE.MouseEvent.MOUSE_UP, onMouseUp_pic, this);
//添加舞台移动事件，鼠标移动即触发
//FYGE.MouseEvent.MOUSE_MOVE 会在鼠标移动过程中触发
stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMoveBinded, this);
gameWrapper.stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMove, this);
//event事件对象
//event.stageX，event.stageY当前鼠标在舞台的位置
startPoint = { x: event.stageX, y: event.stageY };
currentPictureOrigin = { x: currentPicture.x, y: currentPicture.y };
currPicOriginPos = { x: currentPic.x, y: currentPic.y };
gameWrapper.addChild(currentPic);//把当前图片移动到最上层
}
const PIC_DISPLAY_LIST = INIT_DATA.map(data => FYGE.Sprite.fromUrl(PIC_URLS[data]));//图片视图数据（列表）
const getPicDisplayById = (id) => PIC_DISPLAY_LIST[id];//获取视图数据方法
const getPicId = (picDisplay) => {
for (let i = 0; i < PIC_DISPLAY_LIST.length; i++) {
const element = PIC_DISPLAY_LIST[i];
if (element == picDisplay)
return i
}
return -1;
} //你会看到用索引的好处
const equalTo = (array1: any[], array2: any[]) => {
if (array1.length != array1.length) return false;
const len = array1.length || array1.length;
for (let i = 0; i < len; i++) {
const a = array1[i];
const b = array2[i];
if (a != b)
return false;
}
return true;
}//判断数组是否相等
stage.addChildAt(currentPicture, stage.children.length - 1);
//数组元素交换
const swap = (index1, index2, list) => {
const ele1 = list[index1];
const ele2 = list[index2];
list[index1] = ele2;
list[index2] = ele1;
return list;
}
//生成游戏
gamedata.map((data, index) => {
const picItem = gameWrapper.addChild(getPicDisplayById(data));
const col = index % GAME_SIZE;
const row = Math.floor(index / GAME_SIZE);
picItem.x = col * (PIC_SIZE + GAP);
picItem.y = row * (PIC_SIZE + GAP);
//增加鼠标按下事件
picture1.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_pic, this);
picture2.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_pic, this);
picItem.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_picItem, this);
return picItem;
});
}
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