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 @@ ...@@ -7,7 +7,7 @@
</head> </head>
<body> <body>
<!-- <script src="phaser-matter-physics.js"></script> --> <!-- <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> <script src="output.js"></script>
</body> </body>
</html> </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 @@ ...@@ -19,7 +19,6 @@
"webpack": "^4.4.1", "webpack": "^4.4.1",
"webpack-cli": "^2.0.13", "webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.0", "webpack-dev-server": "^3.1.0",
"webpack-merge": "^4.1.2", "webpack-merge": "^4.1.2"
"@types/createjs": "^0.0.29"
} }
} }
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 Piece from './Piece';
import * as utils from './utils' // import * as utils from './utils'
import Swap from './Swap'; // import Swap from './Swap';
export default class Scene extends createjs.Container { // export default class Scene extends createjs.Container {
private _targets: number[]; // private _targets: number[];
private _list: Piece[]; // private _list: Piece[];
SHOW_TIME = 1000; // SHOW_TIME = 1000;
DELAY = 500; // DELAY = 500;
BORNS = 1; // BORNS = 1;
R = 3; // R = 3;
TIMES = 3; // TIMES = 3;
N = 4; // N = 4;
SIZE = 235; // SIZE = 235;
constructor() { // constructor() {
super(); // super();
this.initUI(); // this.initUI();
this.update(); // this.update();
} // }
initUI() { // initUI() {
const n = this.R * this.R; // const n = this.R * this.R;
const targetList = utils.fillN(n); // const targetList = utils.fillN(n);
const randomTargetList = utils.shuffle(targetList); // const randomTargetList = utils.shuffle(targetList);
this._targets = randomTargetList.slice(0, this.BORNS); // this._targets = randomTargetList.slice(0, this.BORNS);
this._list = []; // this._list = [];
for (let index = 1; index <= n; index++) { // for (let index = 1; index <= n; index++) {
const inTargets = this._targets.indexOf(index) != -1; // const inTargets = this._targets.indexOf(index) != -1;
const p = new Piece(!inTargets, index); // const p = new Piece(!inTargets, index);
p['index'] = index; // p['index'] = index;
this.addChild(p); // this.addChild(p);
this._list.push(p); // this._list.push(p);
p.x = ((index - 1) % this.R) * this.SIZE; // p.x = ((index - 1) % this.R) * this.SIZE;
p.y = Math.floor((index - 1) / this.R) * this.SIZE; // p.y = Math.floor((index - 1) / this.R) * this.SIZE;
p.flipImmediately(); // p.flipImmediately();
p.addEventListener('click', (e: createjs.MouseEvent) => { // p.addEventListener('click', (e: createjs.MouseEvent) => {
const p = (e.currentTarget as Piece); // const p = (e.currentTarget as Piece);
this.disable(); // this.disable();
let enable = false; // let enable = false;
const index = this._targets.indexOf(p.index); // const index = this._targets.indexOf(p.index);
if (index != -1) { // if (index != -1) {
this._targets.splice(index, 1); // this._targets.splice(index, 1);
if (this._targets.length == 0) { // if (this._targets.length == 0) {
console.log('good.') // console.log('good.')
} else { // } else {
enable = true; // enable = true;
} // }
} // }
else { // else {
console.log('sorry.') // console.log('sorry.')
} // }
p.flip(() => { // p.flip(() => {
if (enable) this.enable(); // if (enable) this.enable();
}); // });
}); // });
} // }
this.disable(); // this.disable();
} // }
update() { // update() {
const onResetComplete = () => { // const onResetComplete = () => {
setTimeout(() => { // setTimeout(() => {
Swap.startSwap(this._list, this.N, this.TIMES, this._targets[0], () => { // Swap.startSwap(this._list, this.N, this.TIMES, this._targets[0], () => {
this.onSwapComplete() // this.onSwapComplete()
}) // })
}, this.DELAY); // }, this.DELAY);
} // }
setTimeout(() => { // setTimeout(() => {
for (let i = 0; i < this._list.length; i++) { // for (let i = 0; i < this._list.length; i++) {
const e = this._list[i]; // const e = this._list[i];
e.reset(i == 0 ? onResetComplete : null); // e.reset(i == 0 ? onResetComplete : null);
} // }
}, this.SHOW_TIME); // }, this.SHOW_TIME);
} // }
onSwapComplete() { // onSwapComplete() {
console.log('onSwapComplete'); // console.log('onSwapComplete');
this.enable(); // this.enable();
} // }
disable() { // disable() {
for (const e of this._list) { // for (const e of this._list) {
e.mouseEnabled = false; // e.mouseEnabled = false;
} // }
} // }
enable() { // enable() {
for (const e of this._list) { // for (const e of this._list) {
e.mouseEnabled = true; // e.mouseEnabled = true;
} // }
} // }
} // }
\ No newline at end of file \ No newline at end of file
dogborn/src/Swap.ts
View file @ 975c66c3
import * as utils from './utils' // import * as utils from './utils'
import Piece from './Piece'; // import Piece from './Piece';
export default class Swap { // export default class Swap {
static DURATION = 0.25; // static DURATION = 0.25;
static DELAY = .9; // static DELAY = .9;
static startSwap(all: Piece[], n: number, times: number, target: number, onSwapComplete: Function) { // static startSwap(all: Piece[], n: number, times: number, target: number, onSwapComplete: Function) {
for (let index = 0; index < times; index++) { // for (let index = 0; index < times; index++) {
const list = Swap.getList(all, n, target); // const list = Swap.getList(all, n, target);
setTimeout(() => { // setTimeout(() => {
Swap.swap(list, index + 1 == times ? onSwapComplete : null); // Swap.swap(list, index + 1 == times ? onSwapComplete : null);
}, Swap.DURATION * 1000 * index + Swap.DELAY * 1000 * index); // }, Swap.DURATION * 1000 * index + Swap.DELAY * 1000 * index);
} // }
} // }
private static getList(all: Piece[], n: number, target: number) { // private static getList(all: Piece[], n: number, target: number) {
const randomizedDeck = utils.shuffle(all); // const randomizedDeck = utils.shuffle(all);
let targetPiece; // let targetPiece;
const randomizedDeck2 = randomizedDeck.filter(e => { // const randomizedDeck2 = randomizedDeck.filter(e => {
if (e.index == target) // if (e.index == target)
targetPiece = e; // targetPiece = e;
return e.index != target; // return e.index != target;
}); // });
const list = randomizedDeck2.slice(0, n - 1); // const list = randomizedDeck2.slice(0, n - 1);
const m = n / 2; // const m = n / 2;
const list1 = list.slice(0, m); // const list1 = list.slice(0, m);
const list2 = list.slice(m); // const list2 = list.slice(m);
list2.push(targetPiece); // list2.push(targetPiece);
return list1.map( // return list1.map(
(val, index) => { return { a: val, b: list2[index] } } // (val, index) => { return { a: val, b: list2[index] } }
) // )
} // }
private static swap(list: { a: Piece, b: Piece }[], onComplete: Function = null) { // private static swap(list: { a: Piece, b: Piece }[], onComplete: Function = null) {
let tag = true; // let tag = true;
for (const e of list) { // for (const e of list) {
if (tag) { // if (tag) {
tag = false; // tag = false;
Swap.swapOne(e.a, e.b, onComplete); // Swap.swapOne(e.a, e.b, onComplete);
} else { // } else {
Swap.swapOne(e.a, e.b); // Swap.swapOne(e.a, e.b);
} // }
} // }
} // }
private static swapOne(a: Piece, b: Piece, onComplete: Function = null) { // private static swapOne(a: Piece, b: Piece, onComplete: Function = null) {
const ax = a.x; // const ax = a.x;
const ay = a.y; // const ay = a.y;
const bx = b.x; // const bx = b.x;
const by = b.y; // const by = b.y;
const ease = createjs.Ease.quadInOut; // const ease = createjs.Ease.quadInOut;
// if (onComplete) // // if (onComplete)
// annie.Tween.to(b, Swap.DURATION, { x: ax, y: ay, onComplete: onComplete, ease: ease }); // // annie.Tween.to(b, Swap.DURATION, { x: ax, y: ay, onComplete: onComplete, ease: ease });
// else // // else
// annie.Tween.to(b, Swap.DURATION, { x: ax, y: ay, ease: ease }); // // annie.Tween.to(b, Swap.DURATION, { x: ax, y: ay, ease: ease });
// annie.Tween.to(a, Swap.DURATION, { x: bx, y: by, ease: ease }); // // annie.Tween.to(a, Swap.DURATION, { x: bx, y: by, ease: ease });
} // }
} // }
\ No newline at end of file \ No newline at end of file
dogborn/src/index.ts
View file @ 975c66c3
let gameconfig = { import PieceControl from "./PieceControl";
const gameconfig = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: 800, width: 800,
height: 600, height: 600,
...@@ -9,7 +11,7 @@ let gameconfig = { ...@@ -9,7 +11,7 @@ let gameconfig = {
} }
}; };
let game = new Phaser.Game(gameconfig); const game = new Phaser.Game(gameconfig);
function preload() { function preload() {
this.load.image('back', 'assets/back.png'); this.load.image('back', 'assets/back.png');
...@@ -18,8 +20,16 @@ function preload() { ...@@ -18,8 +20,16 @@ function preload() {
} }
function create() { function create() {
this.add.image(106, 106, 'back'); const a = new PieceControl(this, true, 0);
// this.add.image(400, 300, 'bone'); 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() { 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