little changes
parent
515f350579
commit
36d18e0e76
|
|
@ -9,126 +9,130 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
const isMobile = window.innerWidth <= 768;
|
const isMobile = window.innerWidth <= 768;
|
||||||
const drawingZone = {
|
const drawingZone = {
|
||||||
x: isMobile ? 0 : window.innerWidth / 4,
|
x: isMobile ? 0 : window.innerWidth / 4,
|
||||||
y: window.innerHeight / 4,
|
y: window.innerHeight / 4,
|
||||||
width: isMobile ? window.innerWidth : window.innerWidth / 2,
|
width: isMobile ? window.innerWidth : window.innerWidth / 2,
|
||||||
height: window.innerHeight / 2,
|
height: window.innerHeight / 2,
|
||||||
};
|
};
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
type: Phaser.AUTO,
|
type: Phaser.AUTO,
|
||||||
width: window.innerWidth,
|
width: window.innerWidth,
|
||||||
height: window.innerHeight,
|
height: window.innerHeight,
|
||||||
backgroundColor: 0xffffff,
|
backgroundColor: 0xFFFFFF,
|
||||||
scene: {
|
scale: {
|
||||||
preload: preload,
|
mode: Phaser.Scale.FIT,
|
||||||
create: create,
|
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||||
update: update
|
},
|
||||||
|
scene: {
|
||||||
|
preload: preload,
|
||||||
|
create: create,
|
||||||
|
update: update
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const game = new Phaser.Game(config);
|
||||||
|
const customWidth = window.innerWidth;
|
||||||
|
const customHeight = window.innerHeight;
|
||||||
|
let firstLayer, secondLayer, thirdLayer;
|
||||||
|
let graphics;
|
||||||
|
|
||||||
|
function preload() {
|
||||||
|
this.load.svg('letterA', '/assets/letter/a.svg');
|
||||||
|
this.load.svg('layer1', '/assets/letter/a_l1.svg');
|
||||||
|
this.load.svg('layer2', '/assets/letter/a_l2.svg');
|
||||||
|
this.load.svg('layer3', '/assets/letter/a_l3.svg');
|
||||||
|
this.load.audio('letterAAudio1', '/assets/audio/hook-arround-snake.mp3');
|
||||||
|
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
|
||||||
|
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
|
||||||
|
this.load.audio('slide', '/assets/audio/slide.mp3');
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
const game = new Phaser.Game(config);
|
function create() {
|
||||||
const customWidth = window.innerWidth;
|
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
||||||
const customHeight = window.innerHeight;
|
|
||||||
let firstLayer, secondLayer, thirdLayer;
|
|
||||||
let graphics;
|
|
||||||
|
|
||||||
function preload() {
|
this.time.delayedCall(2000, () => {
|
||||||
this.load.svg('letterA', '/assets/letter/a.svg');
|
firstScreen.setVisible(false);
|
||||||
this.load.svg('layer1', '/assets/letter/a_l1.svg');
|
showLayers.call(this);
|
||||||
this.load.svg('layer2', '/assets/letter/a_l2.svg');
|
}, [], this);
|
||||||
this.load.svg('layer3', '/assets/letter/a_l3.svg');
|
}
|
||||||
this.load.audio('letterAAudio1', '/assets/audio/hook-arround-snake.mp3');
|
|
||||||
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
|
|
||||||
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
|
|
||||||
this.load.audio('slide', '/assets/audio/slide.mp3');
|
|
||||||
}
|
|
||||||
|
|
||||||
function create() {
|
function showLayers() {
|
||||||
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
let textX, textY;
|
||||||
|
|
||||||
this.time.delayedCall(2000, () => {
|
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
||||||
firstScreen.setVisible(false);
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
showLayers.call(this);
|
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||||
}, [], this);
|
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left').setTint(0x05b3a4);
|
||||||
}
|
const slantLeftAudio = this.sound.add('slantLeft');
|
||||||
|
slantLeftAudio.play();
|
||||||
|
firstLayer.setDepth(1);
|
||||||
|
firstLayer.setAlpha(0.5);
|
||||||
|
firstLayer.setInteractive({ draggable: true });
|
||||||
|
|
||||||
function showLayers() {
|
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
|
||||||
let textX, textY;
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
|
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right').setTint(0x05b3a4);
|
||||||
|
const slantRightAudio = this.sound.add('slantRight');
|
||||||
|
secondTextLayer.setVisible(false);
|
||||||
|
secondLayer.setDepth(1);
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
secondLayer.setInteractive({ draggable: true });
|
||||||
|
secondLayer.setVisible(false);
|
||||||
|
|
||||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
|
||||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
const thirdTextLayer = this.add.text(textX, textY, '3. Slide').setTint(0x05b3a4);
|
||||||
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left').setTint(0x05b3a4);
|
const slideAudio = this.sound.add('slide');
|
||||||
const slantLeftAudio = this.sound.add('slantLeft');
|
thirdTextLayer.setVisible(false);
|
||||||
slantLeftAudio.play();
|
thirdLayer.setDepth(1.1);
|
||||||
firstLayer.setDepth(1);
|
thirdLayer.setScale(1.15);
|
||||||
firstLayer.setAlpha(0.5);
|
thirdLayer.setAlpha(0.5);
|
||||||
firstLayer.setInteractive({ draggable: true });
|
thirdLayer.setInteractive({ draggable: true });
|
||||||
|
thirdLayer.setVisible(false);
|
||||||
|
|
||||||
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
|
firstLayer.on('drag', (pointer) => {
|
||||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
if (pointer.isDown) {
|
||||||
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right').setTint(0x05b3a4);
|
firstTextLayer.setVisible(false);
|
||||||
const slantRightAudio = this.sound.add('slantRight');
|
secondTextLayer.setVisible(true);
|
||||||
secondTextLayer.setVisible(false);
|
slantRightAudio.play();
|
||||||
secondLayer.setDepth(1);
|
secondLayer.setVisible(true);
|
||||||
secondLayer.setAlpha(0.5);
|
firstLayer.setAlpha(1);
|
||||||
secondLayer.setInteractive({ draggable: true });
|
secondLayer.setAlpha(0.5);
|
||||||
secondLayer.setVisible(false);
|
thirdLayer.setAlpha(0.5);
|
||||||
|
} else {
|
||||||
|
firstLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
|
secondLayer.on('drag', (pointer) => {
|
||||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
if (pointer.isDown) {
|
||||||
const thirdTextLayer = this.add.text(textX, textY, '3. Slide').setTint(0x05b3a4);
|
graphics = this.add.graphics();
|
||||||
const slideAudio = this.sound.add('slide');
|
graphics.lineStyle(50, 0x5e17eb);
|
||||||
thirdTextLayer.setVisible(false);
|
secondTextLayer.setVisible(false);
|
||||||
thirdLayer.setDepth(1.1);
|
thirdTextLayer.setVisible(true);
|
||||||
thirdLayer.setScale(1.15);
|
slideAudio.play();
|
||||||
thirdLayer.setAlpha(0.5);
|
thirdLayer.setVisible(true);
|
||||||
thirdLayer.setInteractive({ draggable: true });
|
secondLayer.setAlpha(1);
|
||||||
thirdLayer.setVisible(false);
|
thirdLayer.setAlpha(0.5);
|
||||||
|
} else {
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
firstLayer.on('drag', (pointer) => {
|
thirdLayer.on('drag', (pointer) => {
|
||||||
if (pointer.isDown) {
|
if (pointer.isDown) {
|
||||||
firstTextLayer.setVisible(false);
|
thirdLayer.setAlpha(1);
|
||||||
secondTextLayer.setVisible(true);
|
} else {
|
||||||
slantRightAudio.play();
|
thirdLayer.setAlpha(0.5);
|
||||||
secondLayer.setVisible(true);
|
}
|
||||||
firstLayer.setAlpha(1);
|
});
|
||||||
secondLayer.setAlpha(0.5);
|
}
|
||||||
thirdLayer.setAlpha(0.5);
|
|
||||||
} else {
|
|
||||||
firstLayer.setAlpha(0.5);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
secondLayer.on('drag', (pointer) => {
|
function update() {
|
||||||
if (pointer.isDown) {
|
// Update any game logic if needed
|
||||||
graphics = this.add.graphics();
|
}
|
||||||
graphics.lineStyle(50, 0x5e17eb);
|
|
||||||
secondTextLayer.setVisible(false);
|
|
||||||
thirdTextLayer.setVisible(true);
|
|
||||||
slideAudio.play();
|
|
||||||
thirdLayer.setVisible(true);
|
|
||||||
secondLayer.setAlpha(1);
|
|
||||||
thirdLayer.setAlpha(0.5);
|
|
||||||
} else {
|
|
||||||
secondLayer.setAlpha(0.5);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
thirdLayer.on('drag', (pointer) => {
|
|
||||||
if (pointer.isDown) {
|
|
||||||
thirdLayer.setAlpha(1);
|
|
||||||
} else {
|
|
||||||
thirdLayer.setAlpha(0.5);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function update() {
|
|
||||||
// Update any game logic if needed
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
Loading…
Reference in New Issue