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