Skip to content

L
learn-phaser
Commit 975c66c3 authored by wildfirecode's avatar wildfirecode
Browse files
Options

1

parent f9dead57
Expand all Show whitespace changes
Inline Side-by-side
Showing with 151092 additions and 98470 deletions
dogborn/dist/index.html
View file @ 975c66c3
......@@ -7,7 +7,7 @@
</head>
<body>
<!-- <script src="phaser-matter-physics.js"></script> -->
<script src="phaser-duiba.min.js"></script>
<script src="phaser_lastest.js"></script>
<script src="output.js"></script>
</body>
</html>
\ No newline at end of file
dogborn/dist/phaser-duiba.min.js deleted 100644 → 0
View file @ f9dead57
This diff is collapsed.
dogborn/package-lock.json 0 → 100644
View file @ 975c66c3
This diff is collapsed.
dogborn/package.json
View file @ 975c66c3
......@@ -19,7 +19,6 @@
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.0",
"webpack-merge": "^4.1.2",
"@types/createjs": "^0.0.29"
"webpack-merge": "^4.1.2"
}
}
dogborn/src/Piece.ts deleted 100644 → 0
View file @ f9dead57
export default class Piece extends createjs.Container {
isDog: boolean;
front: createjs.Bitmap;
back: createjs.Bitmap;
index: number;
static FLIP_DURTION = 1000;
constructor(isDog: boolean, index: number) {
super();
this.index = index;
this.isDog = isDog;
if (isDog) {
this.front = new createjs.Bitmap('./imgs/front.png');
} else {
this.front = new createjs.Bitmap('./imgs/bone.png');
}
this.back = new createjs.Bitmap('./imgs/back.png');
this.addChild(this.front);
this.addChild(this.back);
// this.front.anchorX = this.front.width / 2;
// this.front.anchorY = this.front.height / 2;
// this.back.anchorX = this.back.width / 2;
// this.back.anchorY = this.back.height / 2;
}
reset(callback) {
// createjs.Tween.get(this.front, { loop: true })
// .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
const ease = createjs.Ease.quadInOut;
createjs.Tween.get(this.front)
.to({ scaleX: 0.01 }, Piece.FLIP_DURTION / 2, ease);
// createjs.Tween.get(this.front, Piece.FLIP_DURTION / 2, {
// scaleX: 0.01,
// ease: ease,
// onComplete: () => {
// this.back.visible = true;
// this.front.visible = false;
// annie.Tween.to(this.back, Piece.FLIP_DURTION / 2, {
// scaleX: 1,
// ease: ease,
// onComplete: () => {
// callback && callback();
// }
// });
// }
// });
}
resetImmediately() {
this.back.visible = true;
this.back.scaleX = 1;
this.front.visible = false;
this.front.scaleX = 0.01;
}
flipImmediately() {
this.back.visible = false;
this.front.visible = true;
this.front.scaleX = 1;
this.back.scaleX = 0.01;
}
flip(callback = null) {
// const ease = annie.Tween.quadraticInOut;
// annie.Tween.to(this.back, Piece.FLIP_DURTION / 2, {
// ease: ease,
// scaleX: 0.01,
// onComplete: () => {
// this.back.visible = false;
// this.front.visible = true;
// annie.Tween.to(this.front, Piece.FLIP_DURTION / 2, {
// ease: ease,
// scaleX: 1,
// onComplete: () => {
// callback && callback();
// }
// });
// }
// });
}
}
\ No newline at end of file
dogborn/src/PieceControl.ts 0 → 100644
View file @ 975c66c3
export default class PieceControl {
private scene;
private isDog: boolean;
private front;
private back;
private index: number;
static FLIP_DURTION = 1000;
public container;
constructor(scene, isDog: boolean, index: number) {
this.scene = scene;
this.index = index;
this.isDog = isDog;
if (isDog) {
this.front = this.scene.add.image(0, 0, 'front');
} else {
this.front = this.scene.add.image(0, 0, 'bone');
}
this.back = this.scene.add.image(0, 0, 'back');
this.container = this.scene.add.container(0, 0, [this.back, this.front]);
}
reset(callback?) {
const timeline = this.scene.tweens.timeline({
tweens: [
{
targets: this.front,
scaleX: 0.01,
ease:'Quad.easeInOut',
duration: PieceControl.FLIP_DURTION / 2,
onComplete: () => {
this.back.visible = true;
this.front.visible = false;
}
},
{
targets: this.back,
scaleX: 1,
ease:'Quad.easeInOut',
duration: PieceControl.FLIP_DURTION / 2,
onComplete: () => { callback && callback() }
}]
});
}
resetImmediately() {
this.back.visible = true;
this.back.scaleX = 1;
this.front.visible = false;
this.front.scaleX = 0.01;
}
flipImmediately() {
this.back.visible = false;
this.front.visible = true;
this.front.scaleX = 1;
this.back.scaleX = 0.01;
}
flip(callback = null) {
const timeline = this.scene.tweens.timeline({
tweens: [
{
targets: this.back,
scaleX: 0.01,
ease:'Quad.easeInOut',
duration: PieceControl.FLIP_DURTION / 2,
onComplete: () => {
this.back.visible = false;
this.front.visible = true;
}
},
{
targets: this.front,
scaleX: 1,
ease:'Quad.easeInOut',
duration: PieceControl.FLIP_DURTION / 2,
onComplete: () => { callback && callback() }
}]
});
}
}
\ No newline at end of file
dogborn/src/Scene.ts
View file @ 975c66c3
import Piece from './Piece';
import * as utils from './utils'
import Swap from './Swap';
// import Piece from './Piece';
// import * as utils from './utils'
// import Swap from './Swap';
export default class Scene extends createjs.Container {
private _targets: number[];
private _list: Piece[];
// export default class Scene extends createjs.Container {
// private _targets: number[];
// private _list: Piece[];
SHOW_TIME = 1000;
DELAY = 500;
BORNS = 1;
R = 3;
TIMES = 3;
N = 4;
SIZE = 235;
// SHOW_TIME = 1000;
// DELAY = 500;
// BORNS = 1;
// R = 3;
// TIMES = 3;
// N = 4;
// SIZE = 235;
constructor() {
super();
this.initUI();
this.update();
}
// constructor() {
// super();
// this.initUI();
// this.update();
// }
initUI() {
const n = this.R * this.R;
const targetList = utils.fillN(n);
const randomTargetList = utils.shuffle(targetList);
this._targets = randomTargetList.slice(0, this.BORNS);
this._list = [];
for (let index = 1; index <= n; index++) {
const inTargets = this._targets.indexOf(index) != -1;
const p = new Piece(!inTargets, index);
p['index'] = index;
this.addChild(p);
this._list.push(p);
p.x = ((index - 1) % this.R) * this.SIZE;
p.y = Math.floor((index - 1) / this.R) * this.SIZE;
p.flipImmediately();
p.addEventListener('click', (e: createjs.MouseEvent) => {
const p = (e.currentTarget as Piece);
this.disable();
let enable = false;
const index = this._targets.indexOf(p.index);
if (index != -1) {
this._targets.splice(index, 1);
if (this._targets.length == 0) {
console.log('good.')
} else {
enable = true;
}
}
else {
console.log('sorry.')
}
p.flip(() => {
if (enable) this.enable();
});
// initUI() {
// const n = this.R * this.R;
// const targetList = utils.fillN(n);
// const randomTargetList = utils.shuffle(targetList);
// this._targets = randomTargetList.slice(0, this.BORNS);
// this._list = [];
// for (let index = 1; index <= n; index++) {
// const inTargets = this._targets.indexOf(index) != -1;
// const p = new Piece(!inTargets, index);
// p['index'] = index;
// this.addChild(p);
// this._list.push(p);
// p.x = ((index - 1) % this.R) * this.SIZE;
// p.y = Math.floor((index - 1) / this.R) * this.SIZE;
// p.flipImmediately();
// p.addEventListener('click', (e: createjs.MouseEvent) => {
// const p = (e.currentTarget as Piece);
// this.disable();
// let enable = false;
// const index = this._targets.indexOf(p.index);
// if (index != -1) {
// this._targets.splice(index, 1);
// if (this._targets.length == 0) {
// console.log('good.')
// } else {
// enable = true;
// }
// }
// else {
// console.log('sorry.')
// }
// p.flip(() => {
// if (enable) this.enable();
// });
});
}
// });
// }
this.disable();
}
// this.disable();
// }
update() {
const onResetComplete = () => {
setTimeout(() => {
Swap.startSwap(this._list, this.N, this.TIMES, this._targets[0], () => {
this.onSwapComplete()
})
}, this.DELAY);
}
// update() {
// const onResetComplete = () => {
// setTimeout(() => {
// Swap.startSwap(this._list, this.N, this.TIMES, this._targets[0], () => {
// this.onSwapComplete()
// })
// }, this.DELAY);
// }
setTimeout(() => {
for (let i = 0; i < this._list.length; i++) {
const e = this._list[i];
e.reset(i == 0 ? onResetComplete : null);
}
}, this.SHOW_TIME);
}
// setTimeout(() => {
// for (let i = 0; i < this._list.length; i++) {
// const e = this._list[i];
// e.reset(i == 0 ? onResetComplete : null);
// }
// }, this.SHOW_TIME);
// }
onSwapComplete() {
console.log('onSwapComplete');
this.enable();
}
// onSwapComplete() {
// console.log('onSwapComplete');
// this.enable();
// }
disable() {
for (const e of this._list) {
e.mouseEnabled = false;
}
}
// disable() {
// for (const e of this._list) {
// e.mouseEnabled = false;
// }
// }
enable() {
for (const e of this._list) {
e.mouseEnabled = true;
}
}
}
\ No newline at end of file
// enable() {
// for (const e of this._list) {
// e.mouseEnabled = true;
// }
// }
// }
\ No newline at end of file
dogborn/src/Swap.ts
View file @ 975c66c3
import * as utils from './utils'
import Piece from './Piece';
export default class Swap {
static DURATION = 0.25;
static DELAY = .9;
// import * as utils from './utils'
// import Piece from './Piece';
// export default class Swap {
// static DURATION = 0.25;
// static DELAY = .9;
static startSwap(all: Piece[], n: number, times: number, target: number, onSwapComplete: Function) {
for (let index = 0; index < times; index++) {
const list = Swap.getList(all, n, target);
setTimeout(() => {
Swap.swap(list, index + 1 == times ? onSwapComplete : null);
}, Swap.DURATION * 1000 * index + Swap.DELAY * 1000 * index);
}
}
private static getList(all: Piece[], n: number, target: number) {
const randomizedDeck = utils.shuffle(all);
let targetPiece;
const randomizedDeck2 = randomizedDeck.filter(e => {
if (e.index == target)
targetPiece = e;
return e.index != target;
});
const list = randomizedDeck2.slice(0, n - 1);
const m = n / 2;
const list1 = list.slice(0, m);
const list2 = list.slice(m);
list2.push(targetPiece);
return list1.map(
(val, index) => { return { a: val, b: list2[index] } }
)
}
// static startSwap(all: Piece[], n: number, times: number, target: number, onSwapComplete: Function) {
// for (let index = 0; index < times; index++) {
// const list = Swap.getList(all, n, target);
// setTimeout(() => {
// Swap.swap(list, index + 1 == times ? onSwapComplete : null);
// }, Swap.DURATION * 1000 * index + Swap.DELAY * 1000 * index);
// }
// }
// private static getList(all: Piece[], n: number, target: number) {
// const randomizedDeck = utils.shuffle(all);
// let targetPiece;
// const randomizedDeck2 = randomizedDeck.filter(e => {
// if (e.index == target)
// targetPiece = e;
// return e.index != target;
// });
// const list = randomizedDeck2.slice(0, n - 1);
// const m = n / 2;
// const list1 = list.slice(0, m);
// const list2 = list.slice(m);
// list2.push(targetPiece);
// return list1.map(
// (val, index) => { return { a: val, b: list2[index] } }
// )
// }
private static swap(list: { a: Piece, b: Piece }[], onComplete: Function = null) {
let tag = true;
for (const e of list) {
if (tag) {
tag = false;
Swap.swapOne(e.a, e.b, onComplete);
} else {
Swap.swapOne(e.a, e.b);
}
}
}
// private static swap(list: { a: Piece, b: Piece }[], onComplete: Function = null) {
// let tag = true;
// for (const e of list) {
// if (tag) {
// tag = false;
// Swap.swapOne(e.a, e.b, onComplete);
// } else {
// Swap.swapOne(e.a, e.b);
// }
// }
// }
private static swapOne(a: Piece, b: Piece, onComplete: Function = null) {
const ax = a.x;
const ay = a.y;
const bx = b.x;
const by = b.y;
const ease = createjs.Ease.quadInOut;
// if (onComplete)
// annie.Tween.to(b, Swap.DURATION, { x: ax, y: ay, onComplete: onComplete, ease: ease });
// else
// annie.Tween.to(b, Swap.DURATION, { x: ax, y: ay, ease: ease });
// annie.Tween.to(a, Swap.DURATION, { x: bx, y: by, ease: ease });
}
}
\ No newline at end of file
// private static swapOne(a: Piece, b: Piece, onComplete: Function = null) {
// const ax = a.x;
// const ay = a.y;
// const bx = b.x;
// const by = b.y;
// const ease = createjs.Ease.quadInOut;
// // if (onComplete)
// // annie.Tween.to(b, Swap.DURATION, { x: ax, y: ay, onComplete: onComplete, ease: ease });
// // else
// // annie.Tween.to(b, Swap.DURATION, { x: ax, y: ay, ease: ease });
// // annie.Tween.to(a, Swap.DURATION, { x: bx, y: by, ease: ease });
// }
// }
\ No newline at end of file
dogborn/src/index.ts
View file @ 975c66c3
let gameconfig = {
import PieceControl from "./PieceControl";
const gameconfig = {
type: Phaser.AUTO,
width: 800,
height: 600,
......@@ -9,7 +11,7 @@ let gameconfig = {
}
};
let game = new Phaser.Game(gameconfig);
const game = new Phaser.Game(gameconfig);
function preload() {
this.load.image('back', 'assets/back.png');
......@@ -18,8 +20,16 @@ function preload() {
}
function create() {
this.add.image(106, 106, 'back');
// this.add.image(400, 300, 'bone');
const a = new PieceControl(this, true, 0);
a.container.x = 107;
a.container.y = 107;
// a.container.visible =false
a.resetImmediately();
setTimeout(() => {
a.flip();
}, 1000);
// a.container.scaleX = 0.5
// a.flipImmediately();
}
function update() {
......
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