Skip to content

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

缓动动画

parent 6b040c15
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 68 additions and 262 deletions
dist/bundle.js
View file @ ffe30319
This diff is collapsed.
public/bundle.js
View file @ ffe30319
This diff is collapsed.
src/drag.ts deleted 100644 → 0
View file @ 6b040c15
import { equalTo, fill, shuffle, swap, getIndex } from "./util";
import { GAME_SIZE, GAME_SIZE2, PIC_URLS } from "./gameconfig";
export const addDragDemo = (stage: FYGE.Stage) => {
let startGameText = "开始游戏";
let startFlag = false;
let goneStep = 0;
let gameDuration = 60;
let timer = null;
const gameWrapper = new FYGE.Sprite();
let startGame = new FYGE.TextField();
let goneStepText = new FYGE.TextField();
let countDownText = new FYGE.TextField();
stage.addChild(gameWrapper);
const onShuffle = () => {
shuffle(gamedata);
// 随机到正确答案后应该再随机一次
if (equalTo(INIT_DATA, gamedata)) {
shuffle(gamedata);
}
};
const reset = () => {
goneStep = 0;
gameDuration = 60;
clearInterval(timer);
timer = null;
stage.removeChildren(countDownText, goneStepText);
startFlag = true;
startGameText = "重新开始";
};
const onStartGame = () => {
// 清除点击事件
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();
const countDown = () => {
timer = setInterval(async () => {
if (gameDuration === 0) {
clearInterval(timer);
timer = null;
startFlag = false;
alert("游戏结束");
stage.removeChild(countDownText);
} else {
gameDuration -= 1;
renderCountDown();
}
}, 1000);
};
// 倒计时
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 onMouseDown_picItem = (event: FYGE.MouseEvent) => {
// 没有开始游戏不让动
if (!startFlag) {
return;
}
currentPic = event.target;
//图片鼠标弹起事件，事件触发一次即移除，否则会重复添加鼠标弹起事件
currentPic.once(FYGE.MouseEvent.MOUSE_UP, onMouseUp_pic, this);
//添加舞台移动事件，鼠标移动即触发
//FYGE.MouseEvent.MOUSE_MOVE 会在鼠标移动过程中触发
gameWrapper.stage.addEventListener(
FYGE.MouseEvent.MOUSE_MOVE,
onStageMove,
this
);
//event事件对象
//event.stageX，event.stageY当前鼠标在舞台的位置
//鼠标按下起始点
startPoint = { x: event.stageX, y: event.stageY };
//图片起始位置
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 renderGame = () => {
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);
//增加鼠标按下事件
picItem.addEventListener(
FYGE.MouseEvent.MOUSE_DOWN,
onMouseDown_picItem,
this
);
return picItem;
});
};
renderGame();
};
src/main.ts
View file @ ffe30319
import { addDragDemo } from "./drag"; import { addTween } from "./tween";
var canvas: any = document.getElementById("canvas") var canvas: any = document.getElementById("canvas")
canvas.width = document.body.clientWidth * 1 canvas.width = document.body.clientWidth * 1
...@@ -22,7 +22,7 @@ canvas.addEventListener('touchend', mouseEvent, false); ...@@ -22,7 +22,7 @@ canvas.addEventListener('touchend', mouseEvent, false);
stage.addEventListener(FYGE.Event.INIT_STAGE, onInitStage, this); stage.addEventListener(FYGE.Event.INIT_STAGE, onInitStage, this);
function onInitStage() { function onInitStage() {
addDragDemo(stage); addTween(stage);
} }
(function loop() { (function loop() {
......
src/svga.ts 0 → 100644
View file @ ffe30319
export const addSvga = (stage: FYGE.Stage) => {
const SvgaDemo = (videoItem:SvgaParser.VideoEntity) => {
const movie = new FYGE.MovieClip(vi)
};
SvgaDemo(e);
};
src/tween.ts 0 → 100644
View file @ ffe30319
export const addTween = (stage: FYGE.Stage) => {
// 开始游戏按钮
const addTweenObjBtn = () => {
let shp = new FYGE.Shape();
shp.beginFill(0x00ff00);
shp.drawRect(50, 0, 100, 100);
shp.endFill();
stage.addChild(shp);
const tw = FYGE.Tween.get(shp, { loop: true });
tw.to({ x: 250 }, 500)
.call(() => {
renderText(1);
})
.wait(100)
.to({ y: 250 }, 500)
.call(() => {
renderText(2);
})
.wait(100)
.to({ x: 50 }, 500)
.call(() => {
renderText(3);
})
.wait(100)
.to({ y: 50 }, 500)
.call(() => {
renderText(4);
})
.wait(100);
};
// addTweenObjBtn();
const renderText = (index) => {
console.log("index", index);
};
//
const addAnimation = () => {
let shp = new FYGE.Shape();
shp.beginFill(0x00ff00);
shp.drawRect(50, 0, 200, 400);
shp.endFill();
stage.addChild(shp);
const tw = FYGE.Tween.get(shp, { loop: true });
// 缓出 减速 FYGE.Ease.quadOut
// tw.set({ y: -200 }).to({ y: 200 }, 1000, FYGE.Ease.quartOut);
// 缓入 加速 FYGE.Ease.quartIn
// tw.set({ y: 200 }).to({ y: shp.stage.stageHeight }, 1000, FYGE.Ease.quartIn);
// 缓入缓出 标准曲线
// shp.rotation = -60;
tw.set({ x: 200, y: 200 })
.to({ rotation: 40 }, 3000, FYGE.Ease.quartInOut)
.to({ rotation: -40 }, 3000, FYGE.Ease.quartInOut);
};
addAnimation();
};
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