Added glow effect on Mastermind pegs
This commit is contained in:
parent
aa9a3a0f6c
commit
df976b572a
|
|
@ -317,9 +317,19 @@ export default class MastermindGame extends Phaser.Scene {
|
||||||
|
|
||||||
makePeg(x, y, colorIndex, radius) {
|
makePeg(x, y, colorIndex, radius) {
|
||||||
const color = CODE_COLORS[colorIndex] ?? 0x888888;
|
const color = CODE_COLORS[colorIndex] ?? 0x888888;
|
||||||
const peg = this.add.circle(x, y, radius, color);
|
const container = this.add.container(x, y);
|
||||||
peg.setStrokeStyle(2, 0xffffff, 0.65);
|
|
||||||
return peg;
|
const g1 = this.add.circle(0, 0, radius * 2.4, color, 0.08);
|
||||||
|
g1.setBlendMode(Phaser.BlendModes.ADD);
|
||||||
|
const g2 = this.add.circle(0, 0, radius * 1.6, color, 0.22);
|
||||||
|
g2.setBlendMode(Phaser.BlendModes.ADD);
|
||||||
|
const circle = this.add.circle(0, 0, radius, color);
|
||||||
|
circle.setStrokeStyle(2, 0xffffff, 0.65);
|
||||||
|
|
||||||
|
container.add([g1, g2, circle]);
|
||||||
|
container._mainCircle = circle;
|
||||||
|
container._glowCircles = [g1, g2];
|
||||||
|
return container;
|
||||||
}
|
}
|
||||||
|
|
||||||
makeEmptySlot(x, y, radius = PEG_R) {
|
makeEmptySlot(x, y, radius = PEG_R) {
|
||||||
|
|
@ -448,7 +458,8 @@ export default class MastermindGame extends Phaser.Scene {
|
||||||
const x = startX + i * gap;
|
const x = startX + i * gap;
|
||||||
if (this.draft[i] != null) {
|
if (this.draft[i] != null) {
|
||||||
const peg = this.makePeg(x, draftY, this.draft[i], PEG_R + 3);
|
const peg = this.makePeg(x, draftY, this.draft[i], PEG_R + 3);
|
||||||
peg.setInteractive({ useHandCursor: true });
|
peg.setInteractive(new Phaser.Geom.Circle(0, 0, PEG_R + 3), Phaser.Geom.Circle.Contains);
|
||||||
|
peg.input.cursor = 'pointer';
|
||||||
peg.on('pointerdown', () => this.removeDraftAt(i));
|
peg.on('pointerdown', () => this.removeDraftAt(i));
|
||||||
this.composeLayer.add(peg);
|
this.composeLayer.add(peg);
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -462,6 +473,9 @@ export default class MastermindGame extends Phaser.Scene {
|
||||||
const sx0 = pcx - totalW / 2 + sw / 2;
|
const sx0 = pcx - totalW / 2 + sw / 2;
|
||||||
for (let c = 0; c < this.config.colors; c++) {
|
for (let c = 0; c < this.config.colors; c++) {
|
||||||
const x = sx0 + c * (sw + sgap);
|
const x = sx0 + c * (sw + sgap);
|
||||||
|
const chipGlow = this.add.circle(x, palY, sw * 0.75, CODE_COLORS[c], 0.18);
|
||||||
|
chipGlow.setBlendMode(Phaser.BlendModes.ADD);
|
||||||
|
this.composeLayer.add(chipGlow);
|
||||||
const chip = this.add.circle(x, palY, sw / 2, CODE_COLORS[c]);
|
const chip = this.add.circle(x, palY, sw / 2, CODE_COLORS[c]);
|
||||||
chip.setStrokeStyle(3, 0xffffff, 0.6);
|
chip.setStrokeStyle(3, 0xffffff, 0.6);
|
||||||
chip.setInteractive({ useHandCursor: true });
|
chip.setInteractive({ useHandCursor: true });
|
||||||
|
|
@ -630,7 +644,9 @@ export default class MastermindGame extends Phaser.Scene {
|
||||||
ticks++;
|
ticks++;
|
||||||
pegsObjs.forEach((p, c) => {
|
pegsObjs.forEach((p, c) => {
|
||||||
const ci = ticks >= maxTicks ? finalGuess[c] : Math.floor(Math.random() * this.config.colors);
|
const ci = ticks >= maxTicks ? finalGuess[c] : Math.floor(Math.random() * this.config.colors);
|
||||||
p.setFillStyle(CODE_COLORS[ci] ?? 0x888888);
|
const col = CODE_COLORS[ci] ?? 0x888888;
|
||||||
|
p._mainCircle.setFillStyle(col);
|
||||||
|
p._glowCircles.forEach(g => g.setFillStyle(col));
|
||||||
});
|
});
|
||||||
if (ticks >= maxTicks) {
|
if (ticks >= maxTicks) {
|
||||||
ev.remove();
|
ev.remove();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue