Skip to content

G
game-stydy
Commit 6b040c15 authored by 谌继荃's avatar 谌继荃
Browse files
Options

拼图

parent 9c63baab
Hide whitespace changes
Inline Side-by-side
Showing with 304 additions and 163 deletions
public/index.html
View file @ 6b040c15
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>拼图</title>
<script src="http://yun.duiba.com.cn/db_games/libs0924/fyge2018.minSpine.js" crossorigin="anonymous"></script> <script src="http://yun.duiba.com.cn/db_games/libs0924/fyge2018.minSpine.js" crossorigin="anonymous"></script>
<style> <style>
html, html,
...@@ -27,20 +27,6 @@ ...@@ -27,20 +27,6 @@
background-image: url("https://yun.duiba.com.cn/db_games/activity/game/1550472986/resource/assets/playscene/playscenebg.jpg"); */ background-image: url("https://yun.duiba.com.cn/db_games/activity/game/1550472986/resource/assets/playscene/playscenebg.jpg"); */
} }
</style> </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> </head>
<body> <body>
......
src/drag.ts
View file @ 6b040c15
export const addDragDemo = (stage: FYGE.Stage) => { import { equalTo, fill, shuffle, swap, getIndex } from "./util";
import { GAME_SIZE, GAME_SIZE2, PIC_URLS } from "./gameconfig";
const gameWrapper = new FYGE.Sprite(); export const addDragDemo = (stage: FYGE.Stage) => {
stage.addChild(gameWrapper); let startGameText = "开始游戏";
let startFlag = false;
const PIC_URLS = [ let goneStep = 0;
'//yun.duiba.com.cn/aurora/assets/cd16134f2544202ed5676adbd5114286aec44347.png', let gameDuration = 60;
'//yun.duiba.com.cn/aurora/assets/c55dcd277542a6c3e983278ae5835d89848b9bd9.png', let timer = null;
'//yun.duiba.com.cn/aurora/assets/b42c49baaf8754139d2e940fe97ba1cb289b11fa.png', const gameWrapper = new FYGE.Sprite();
'//yun.duiba.com.cn/aurora/assets/4a4b850995da348ccd5fb520d5b9ef5e0fb8349f.png', let startGame = new FYGE.TextField();
'//yun.duiba.com.cn/aurora/assets/5b3e3b52f406df1543e2eeca1ce11719a28c6401.png', let goneStepText = new FYGE.TextField();
'//yun.duiba.com.cn/aurora/assets/cae0529d1ff2eaa323dc0615d12a1f05e3a67c06.png', let countDownText = new FYGE.TextField();
'//yun.duiba.com.cn/aurora/assets/5b91853f9d87de73e319d42ea9df139ddd89d537.png', stage.addChild(gameWrapper);
'//yun.duiba.com.cn/aurora/assets/a2893c5a0d03ca3252160de1584584e18abe2a4a.png',
'//yun.duiba.com.cn/aurora/assets/c36b0851f61a812e6d745bc205c0551b6590d11d.png', const onShuffle = () => {
] shuffle(gamedata);
// 随机到正确答案后应该再随机一次
const fill = (size) => { if (equalTo(INIT_DATA, gamedata)) {
const list = []; shuffle(gamedata);
for (let i = 0; i < size; i++) { list.push(i) }
return list;
} }
};
const GAME_SIZE = 3;
const reset = () => {
const INIT_DATA: any = fill(GAME_SIZE * GAME_SIZE);//数据为图片id，从0开始（图片索引） goneStep = 0;
let gamedata = JSON.parse(JSON.stringify(INIT_DATA));//深拷贝 gameDuration = 60;
gamedata.shuffle();//打乱图片，后续需要和INIT_DATA做对比 clearInterval(timer);
console.log( timer = null;
'初始打乱的图片数据', stage.removeChildren(countDownText, goneStepText);
gamedata.map(i => (i + 1)) startFlag = true;
) startGameText = "重新开始";
};
function getIndex(row, col, maxCol) {
let index; const onStartGame = () => {
index = row * maxCol + col; // 清除点击事件
return index startGame.removeEventListener(FYGE.MouseEvent.CLICK, onStartGame, this);
console.log("startGameText", startGameText);
reset();
renderGoneStep();
countDown();
onShuffle(); //打乱图片，后续需要和INIT_DATA做对比
renderGame();
addStartGameBtn();
};
// 开始游戏按钮
const addStartGameBtn = () => {
startGame.text = startGameText;
startGame.fillColor = "#000000";
startGame.size = 50;
startGame.x = 250;
startGame.y = 700;
startGame.addEventListener(FYGE.MouseEvent.CLICK, onStartGame, this);
stage.addChild(startGame);
};
addStartGameBtn();
// 当前已走
const renderGoneStep = () => {
if (goneStep > 0) {
goneStepText.text = `当前已走${goneStep}步`;
goneStepText.fillColor = "#000000";
goneStepText.size = 50;
goneStepText.x = 225;
goneStepText.y = 800;
stage.addChild(goneStepText);
} }
};
//鼠标按下起始点 renderGoneStep();
let startPoint;
//图片起始位置 const countDown = () => {
let currPicOriginPos; timer = setInterval(async () => {
let currentPic: FYGE.DisplayObject; if (gameDuration === 0) {
clearInterval(timer);
const PIC_SIZE = 200; timer = null;
const GAP = 2; startFlag = false;
alert("游戏结束");
const onStageMove = (event: FYGE.MouseEvent) => { stage.removeChild(countDownText);
//鼠标当前位置 } else {
const currentPoint = { x: event.stageX, y: event.stageY }; gameDuration -= 1;
//鼠标按下点到鼠标当前点的偏移量 renderCountDown();
let mouseOffsetX = currentPoint.x - startPoint.x; }
let mouseOffsetY = currentPoint.y - startPoint.y; }, 1000);
};
currentPic.x = currPicOriginPos.x + mouseOffsetX;
currentPic.y = currPicOriginPos.y + mouseOffsetY; // 倒计时
const renderCountDown = () => {
countDownText.text = `还剩${gameDuration}s`;
countDownText.fillColor = "#000000";
countDownText.size = 50;
countDownText.x = 275;
countDownText.y = 900;
stage.addChild(countDownText);
};
const INIT_DATA: any = fill(GAME_SIZE * GAME_SIZE2); //数据为图片id，从0开始（图片索引）
let gamedata = JSON.parse(JSON.stringify(INIT_DATA)); //深拷贝
console.log(
"初始打乱的图片数据",
gamedata.map((i) => i + 1)
);
//鼠标按下起始点
let startPoint;
//图片起始位置
let currPicOriginPos;
// DisplayObject 显示对象类。
let currentPic: FYGE.DisplayObject;
const PIC_SIZE = 200;
const GAP = 2;
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;
currentPic.x = currPicOriginPos.x + mouseOffsetX;
currentPic.y = currPicOriginPos.y + mouseOffsetY;
};
const onMouseUp_pic = () => {
//鼠标抬起后应该移出舞台移动事件，否则会重复添加事件
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("dropPic", dropPic);
if (dropPic?.x >= 0) {
console.log(
"上一个数据",
gamedata.map((i) => i + 1)
);
swap(currentPicIndex, dropIndex, gamedata);
console.log(
"交换后的数据",
gamedata.map((i) => i + 1)
);
currentPic.x = dropPic.x;
currentPic.y = dropPic.y;
dropPic.x = currPicOriginPos.x;
dropPic.y = currPicOriginPos.y;
if (equalTo(INIT_DATA, gamedata)) {
setTimeout(() => {
alert("恭喜你拼图成功了！");
clearInterval(timer);
timer = null;
stage.removeChildren(countDownText);
}, 300);
} else {
goneStep++;
renderGoneStep();
}
} else {
FYGE.Tween.get(currentPic).to(
{ x: currPicOriginPos.x, y: currPicOriginPos.y },
200
);
// setTimeout(() => {
// alert("错误");
// currentPic.x = currPicOriginPos.x;
// currentPic.y = currPicOriginPos.y;
// }, 100);
} }
};
const onMouseUp_pic = () => { const onMouseDown_picItem = (event: FYGE.MouseEvent) => {
//鼠标抬起后应该移出舞台移动事件，否则会重复添加事件 // 没有开始游戏不让动
gameWrapper.stage.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMove, this); if (!startFlag) {
return;
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)))
currentPic.x = dropPic.x;
currentPic.y = dropPic.y;
dropPic.x = currPicOriginPos.x;
dropPic.y = currPicOriginPos.y;
if (equalTo(INIT_DATA, gamedata)) {
setTimeout(() => {
alert('哈哈，赢了')
}, 500);
}
} }
currentPic = event.target;
//图片鼠标弹起事件，事件触发一次即移除，否则会重复添加鼠标弹起事件
currentPic.once(FYGE.MouseEvent.MOUSE_UP, onMouseUp_pic, this);
const onMouseDown_picItem = (event: FYGE.MouseEvent) => { //添加舞台移动事件，鼠标移动即触发
currentPic = event.target; //FYGE.MouseEvent.MOUSE_MOVE 会在鼠标移动过程中触发
//图片鼠标弹起事件，事件触发一次即移除，否则会重复添加鼠标弹起事件 gameWrapper.stage.addEventListener(
currentPic.once(FYGE.MouseEvent.MOUSE_UP, onMouseUp_pic, this); FYGE.MouseEvent.MOUSE_MOVE,
onStageMove,
this
);
//添加舞台移动事件，鼠标移动即触发 //event事件对象
//FYGE.MouseEvent.MOUSE_MOVE 会在鼠标移动过程中触发 //event.stageX，event.stageY当前鼠标在舞台的位置
gameWrapper.stage.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, onStageMove, this);
//event事件对象 //鼠标按下起始点
//event.stageX，event.stageY当前鼠标在舞台的位置 startPoint = { x: event.stageX, y: event.stageY };
startPoint = { x: event.stageX, y: event.stageY }; //图片起始位置
currPicOriginPos = { x: currentPic.x, y: currentPic.y };
currPicOriginPos = { x: currentPic.x, y: currentPic.y }; gameWrapper.addChild(currentPic); //把当前图片移动到最上层
};
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 PIC_DISPLAY_LIST = INIT_DATA.map(data => FYGE.Sprite.fromUrl(PIC_URLS[data]));//图片视图数据（列表） const getPicId = (picDisplay) => {
const getPicDisplayById = (id) => PIC_DISPLAY_LIST[id];//获取视图数据方法 for (let i = 0; i < PIC_DISPLAY_LIST.length; i++) {
const getPicId = (picDisplay) => { const element = PIC_DISPLAY_LIST[i];
for (let i = 0; i < PIC_DISPLAY_LIST.length; i++) { if (element == picDisplay) return 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;
}//判断数组是否相等
//数组元素交换
const swap = (index1, index2, list) => {
const ele1 = list[index1];
const ele2 = list[index2];
list[index1] = ele2;
list[index2] = ele1;
return list;
} }
return -1;
}; //你会看到用索引的好处
//生成游戏 //生成游戏
const renderGame = () => {
gamedata.map((data, index) => { gamedata.map((data, index) => {
const picItem = gameWrapper.addChild(getPicDisplayById(data)); const picItem = gameWrapper.addChild(getPicDisplayById(data));
const col = index % GAME_SIZE; const col = index % GAME_SIZE;
const row = Math.floor(index / GAME_SIZE); const row = Math.floor(index / GAME_SIZE);
picItem.x = col * (PIC_SIZE + GAP); picItem.x = col * (PIC_SIZE + GAP);
picItem.y = row * (PIC_SIZE + GAP); picItem.y = row * (PIC_SIZE + GAP);
//增加鼠标按下事件 //增加鼠标按下事件
picItem.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, onMouseDown_picItem, this); picItem.addEventListener(
FYGE.MouseEvent.MOUSE_DOWN,
onMouseDown_picItem,
this
);
return picItem; return picItem;
}); });
};
renderGame();
};
}
src/gameconfig.ts 0 → 100644
View file @ 6b040c15
export 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",
"//yun.duiba.com.cn/aurora/assets/cd16134f2544202ed5676adbd5114286aec44347.png",
"//yun.duiba.com.cn/aurora/assets/c55dcd277542a6c3e983278ae5835d89848b9bd9.png",
"//yun.duiba.com.cn/aurora/assets/b42c49baaf8754139d2e940fe97ba1cb289b11fa.png",
];
export const GAME_SIZE = 3;
export const GAME_SIZE2 = 3;
\ No newline at end of file
src/util.ts 0 → 100644
View file @ 6b040c15
// 填充数组
export const fill = (size) => {
const list = [];
for (let i = 0; i < size; i++) {
list.push(i);
}
return list;
};
//数组元素交换
export const swap = (index1, index2, list) => {
const ele1 = list[index1];
const ele2 = list[index2];
list[index1] = ele2;
list[index2] = ele1;
return list;
};
//判断数组是否相等
export 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;
};
export const getIndex = (row, col, maxCol) => {
let index;
index = row * maxCol + col;
return index;
};
export const shuffle = (array: any[]) => {
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;
};
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