User prompt
Then if you click the start game button it will dissappear and the kid will swim to shore
User prompt
When you click the character the raft moves down
User prompt
When your character gets teleported to a raft there's a button that can bring the character down by lowering the raft
User prompt
Now If you click your character instead of a start game button it'll make the raft move down with the character ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
After you see the black screen for 3 seconds then you'll be teleported to a raft in the middle of the ocean
User prompt
I can still hear the button click
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'mute')' in or related to this line: 'LK.sounds.mute();' Line Number: 766
User prompt
Please fix the bug: 'TypeError: LK.getSoundVolume is not a function' in or related to this line: 'LK.getSoundVolume(0);' Line Number: 766
User prompt
Please fix the bug: 'TypeError: LK.setMute is not a function' in or related to this line: 'LK.setMute(!self.soundOn);' Line Number: 760
User prompt
Now add a settings button two that says turn sound off and turn sound on
User prompt
After you click the start game button the screen will turn black for 3 seconds
User prompt
And then after you pick your character a button that says start game will be under them
User prompt
When you click on a character a text that says Hello! will appear and then fade away
User prompt
When you click on a character they should smile ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Make the boys some hair that sticks to his head
User prompt
Remove the boys hair
User prompt
And make the boys hair more realistic
User prompt
Give the girl hair
User prompt
Make the characters more realistic fun and cartoony
User prompt
Make the characters more fun cartoony and realistic
User prompt
Now when you click the player button 2 characters appear a girl and a boy click on one to select it
User prompt
Now make a fun and cartoony play button ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Remove everything just a green background
User prompt
Please fix the bug: 'Timeout.tick error: window.addEventListener is not a function' in or related to this line: 'window.addEventListener('keydown', function (e) {' Line Number: 621
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var Character = Container.expand(function () {
var self = Container.call(this);
// Create base circle under character
var base = self.attachAsset('characterBase', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 0.7
});
// Character type (boy or girl)
self.type = "";
// Character containers
self.bodyContainer = new Container();
self.headContainer = new Container();
self.armsContainer = new Container();
self.legsContainer = new Container();
self.facialContainer = new Container();
// Add all containers to self
self.addChild(self.legsContainer);
self.addChild(self.bodyContainer);
self.addChild(self.armsContainer);
self.addChild(self.headContainer);
self.addChild(self.facialContainer);
// Animation properties
self.bobTimer = 0;
self.blinkTimer = 0;
self.isBlinking = false;
self.armSwingDirection = 1;
// Initialize with type
self.initialize = function (characterType) {
self.type = characterType;
// Reset containers
self.bodyContainer.removeChildren();
self.headContainer.removeChildren();
self.armsContainer.removeChildren();
self.legsContainer.removeChildren();
self.facialContainer.removeChildren();
// Build character based on type
if (characterType === "boy") {
// Body
var body = self.bodyContainer.attachAsset('boyBody', {
anchorX: 0.5,
anchorY: 0.5,
y: 30
});
// Head
var head = self.headContainer.attachAsset('boyHead', {
anchorX: 0.5,
anchorY: 0.5,
y: -80
});
// Hair for boy character - simple short hair that sticks to the head
var boyHairTop = self.headContainer.attachAsset('boyHair', {
anchorX: 0.5,
anchorY: 0.5,
y: -120,
width: 130,
height: 40,
scaleX: 1.1
});
// Left Eye
var leftEye = self.facialContainer.attachAsset('boyEyes', {
anchorX: 0.5,
anchorY: 0.5,
x: -25,
y: -90
});
// Right Eye
var rightEye = self.facialContainer.attachAsset('boyEyes', {
anchorX: 0.5,
anchorY: 0.5,
x: 25,
y: -90
});
// Mouth
var mouth = self.facialContainer.attachAsset('boyMouth', {
anchorX: 0.5,
anchorY: 0.5,
y: -60
});
// Left Arm
var leftArm = self.armsContainer.attachAsset('boyArm', {
anchorX: 0.5,
anchorY: 0,
x: -65,
y: -20,
rotation: 0.2
});
// Right Arm
var rightArm = self.armsContainer.attachAsset('boyArm', {
anchorX: 0.5,
anchorY: 0,
x: 65,
y: -20,
rotation: -0.2
});
// Left Leg
var leftLeg = self.legsContainer.attachAsset('boyLeg', {
anchorX: 0.5,
anchorY: 0,
x: -30,
y: 100
});
// Right Leg
var rightLeg = self.legsContainer.attachAsset('boyLeg', {
anchorX: 0.5,
anchorY: 0,
x: 30,
y: 100
});
} else {
// Body
var body = self.bodyContainer.attachAsset('girlBody', {
anchorX: 0.5,
anchorY: 0.5,
y: 30
});
// Head
var head = self.headContainer.attachAsset('girlHead', {
anchorX: 0.5,
anchorY: 0.5,
y: -80
});
// Hair - main part
var hair = self.headContainer.attachAsset('girlHair', {
anchorX: 0.5,
anchorY: 0.5,
y: -100
});
// Add additional hair sections for a more styled look
var hairBangs = self.headContainer.attachAsset('girlHair', {
anchorX: 0.5,
anchorY: 0.5,
y: -120,
width: 130,
height: 50,
scaleX: 1.1,
scaleY: 0.6
});
// Side hair strands
var leftHairStrand = self.headContainer.attachAsset('girlHair', {
anchorX: 0.5,
anchorY: 0,
x: -60,
y: -100,
width: 40,
height: 120,
scaleY: 1.2
});
var rightHairStrand = self.headContainer.attachAsset('girlHair', {
anchorX: 0.5,
anchorY: 0,
x: 60,
y: -100,
width: 40,
height: 120,
scaleY: 1.2
});
// Left Eye
var leftEye = self.facialContainer.attachAsset('girlEyes', {
anchorX: 0.5,
anchorY: 0.5,
x: -25,
y: -90
});
// Right Eye
var rightEye = self.facialContainer.attachAsset('girlEyes', {
anchorX: 0.5,
anchorY: 0.5,
x: 25,
y: -90
});
// Mouth
var mouth = self.facialContainer.attachAsset('girlMouth', {
anchorX: 0.5,
anchorY: 0.5,
y: -60
});
// Left Arm
var leftArm = self.armsContainer.attachAsset('girlArm', {
anchorX: 0.5,
anchorY: 0,
x: -65,
y: -20,
rotation: 0.2
});
// Right Arm
var rightArm = self.armsContainer.attachAsset('girlArm', {
anchorX: 0.5,
anchorY: 0,
x: 65,
y: -20,
rotation: -0.2
});
// Left Leg
var leftLeg = self.legsContainer.attachAsset('girlLeg', {
anchorX: 0.5,
anchorY: 0,
x: -30,
y: 100
});
// Right Leg
var rightLeg = self.legsContainer.attachAsset('girlLeg', {
anchorX: 0.5,
anchorY: 0,
x: 30,
y: 100
});
}
;
LK.setInterval(function () {
self.blink();
}, 3000);
// Start with scale 0
self.scaleX = 0;
self.scaleY = 0;
};
// Blink animation
self.blink = function () {
if (self.isBlinking) {
return;
}
var leftEye = self.facialContainer.children[0];
var rightEye = self.facialContainer.children[1];
self.isBlinking = true;
// Close eyes
tween(leftEye, {
scaleY: 0.1
}, {
duration: 100,
easing: tween.easeOut
});
tween(rightEye, {
scaleY: 0.1
}, {
duration: 100,
easing: tween.easeOut,
onFinish: function onFinish() {
// Open eyes
tween(leftEye, {
scaleY: 1
}, {
duration: 100,
easing: tween.easeOut
});
tween(rightEye, {
scaleY: 1
}, {
duration: 100,
easing: tween.easeOut,
onFinish: function onFinish() {
self.isBlinking = false;
}
});
}
});
};
// Continuous update for idle animations
self.update = function () {
// Bob up and down
self.bobTimer += 0.05;
var bobOffset = Math.sin(self.bobTimer) * 5;
self.headContainer.y = bobOffset * 0.5;
self.bodyContainer.y = bobOffset * 0.3;
// Swing arms slightly
if (self.armsContainer.children.length >= 2) {
var leftArm = self.armsContainer.children[0];
var rightArm = self.armsContainer.children[1];
leftArm.rotation = 0.2 + Math.sin(self.bobTimer) * 0.1;
rightArm.rotation = -0.2 - Math.sin(self.bobTimer) * 0.1;
}
};
// Animate character appearance
self.appear = function () {
tween(self, {
scaleX: 1,
scaleY: 1
}, {
duration: 500,
easing: tween.elasticOut
});
// Add a little jump after appearing
LK.setTimeout(function () {
tween(self, {
y: self.y - 30
}, {
duration: 300,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(self, {
y: self.y + 30
}, {
duration: 400,
easing: tween.bounceOut
});
}
});
}, 600);
};
// Handle selection
self.down = function (x, y, obj) {
// Shrink when pressed
tween(self, {
scaleX: 0.9,
scaleY: 0.9
}, {
duration: 100,
easing: tween.easeOut
});
// Make eyes bigger on press
if (self.facialContainer.children.length >= 2) {
var leftEye = self.facialContainer.children[0];
var rightEye = self.facialContainer.children[1];
var mouth = self.facialContainer.children[2];
tween(leftEye, {
scaleX: 1.3,
scaleY: 1.3
}, {
duration: 100,
easing: tween.easeOut
});
tween(rightEye, {
scaleX: 1.3,
scaleY: 1.3
}, {
duration: 100,
easing: tween.easeOut
});
// Make the character smile when clicked
if (mouth) {
tween(mouth, {
scaleX: 1.5,
scaleY: 1.7,
y: -55
}, {
duration: 200,
easing: tween.elasticOut
});
}
}
};
self.up = function (x, y, obj) {
// Play sound only if settingsButton.soundOn is true
if (!settingsButton || settingsButton.soundOn) {
LK.getSound('buttonClick').play();
}
// Return eyes to normal
if (self.facialContainer.children.length >= 2) {
var leftEye = self.facialContainer.children[0];
var rightEye = self.facialContainer.children[1];
var mouth = self.facialContainer.children[2];
tween(leftEye, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 100,
easing: tween.easeOut
});
tween(rightEye, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 100,
easing: tween.easeOut
});
// Return mouth to normal
if (mouth) {
tween(mouth, {
scaleX: 1.0,
scaleY: 1.0,
y: -60
}, {
duration: 300,
easing: tween.easeOut
});
}
}
// Check if character is on a raft after startGame was called
var parentIsRaft = obj.parent instanceof Raft;
if (parentIsRaft) {
// Get the raft instance
var raft = obj.parent;
// Show "Let's go!" text when clicked on raft
var goText = new Text2("Let's go!", {
size: 80,
fill: 0xFF4500
});
goText.anchor.set(0.5, 0.5);
goText.x = 0;
goText.y = -150;
goText.alpha = 0;
self.addChild(goText);
// Animate text appearance and fade away
tween(goText, {
alpha: 1,
y: goText.y - 50
}, {
duration: 300,
easing: tween.easeOut,
onFinish: function onFinish() {
// After appearing, fade out
LK.setTimeout(function () {
tween(goText, {
alpha: 0,
y: goText.y - 30
}, {
duration: 500,
easing: tween.easeIn,
onFinish: function onFinish() {
self.removeChild(goText);
}
});
}, 1000);
}
});
// Animate the raft moving down with character on it
tween(raft, {
y: 3000 // Move down beyond the screen
}, {
duration: 5000,
easing: tween.easeIn,
onFinish: function onFinish() {
// Game completed or next scene could be triggered here
LK.showYouWin();
}
});
return; // Skip the rest of the function
}
// Show "Hello!" text when clicked (only in character selection)
var helloText = new Text2("Hello!", {
size: 80,
fill: 0xFF4500
});
helloText.anchor.set(0.5, 0.5);
helloText.x = 0;
helloText.y = -150;
helloText.alpha = 0;
self.addChild(helloText);
// Animate text appearance and fade away
tween(helloText, {
alpha: 1,
y: helloText.y - 50
}, {
duration: 300,
easing: tween.easeOut,
onFinish: function onFinish() {
// After appearing, fade out
LK.setTimeout(function () {
tween(helloText, {
alpha: 0,
y: helloText.y - 30
}, {
duration: 500,
easing: tween.easeIn,
onFinish: function onFinish() {
self.removeChild(helloText);
}
});
}, 1000);
}
});
// Expand then return to normal size
tween(self, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 200,
easing: tween.elasticOut,
onFinish: function onFinish() {
// Celebrate selection with a spin
tween(self.headContainer, {
rotation: Math.PI * 2
}, {
duration: 500,
easing: tween.elasticOut
});
tween(self, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 200,
easing: tween.easeOut,
onFinish: function onFinish() {
// Character selected!
characterSelected(self.type);
}
});
}
});
};
return self;
});
var Ocean = Container.expand(function () {
var self = Container.call(this);
// Water layers
var waterBg = self.attachAsset('buttonShadow', {
anchorX: 0.5,
anchorY: 0.5,
tint: 0x0066CC,
// Deep blue
width: 4096,
// Double screen width
height: 3000
});
// Create waves
self.waves = [];
for (var i = 0; i < 8; i++) {
var wave = self.attachAsset('buttonShadow', {
anchorX: 0.5,
anchorY: 0.5,
tint: 0x55AADD,
// Lighter blue
alpha: 0.4,
width: 500 + Math.random() * 700,
height: 30,
x: Math.random() * 2048 - 1024,
y: Math.random() * 1000 - 500
});
self.waves.push(wave);
}
// Animation properties
self.waveTimer = 0;
// Update wave positions
self.update = function () {
self.waveTimer += 0.02;
// Animate each wave
for (var i = 0; i < self.waves.length; i++) {
var wave = self.waves[i];
wave.x += 0.5; // Slow movement right
// Loop waves back to the left side when they go off screen
if (wave.x > 2048 + wave.width / 2) {
wave.x = -wave.width / 2;
wave.y = Math.random() * 1000 - 500;
}
// Slight bobbing
wave.y += Math.sin(self.waveTimer + i) * 0.5;
}
};
return self;
});
var PlayButton = Container.expand(function () {
var self = Container.call(this);
// Create shadow first so it appears behind the button
var shadow = self.attachAsset('buttonShadow', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 0.5,
x: 10,
y: 10
});
// Create base circle
var buttonBase = self.attachAsset('playButtonBase', {
anchorX: 0.5,
anchorY: 0.5
});
// Create play triangle and rotate it to point right
var playIcon = self.attachAsset('playTriangle', {
anchorX: 0.5,
anchorY: 0.5,
x: 15,
// Offset slightly to the right for better visual centering
rotation: Math.PI / 4 // 45 degrees in radians
});
// Variables to track button state
self.isPressed = false;
self.isAnimating = false;
// Set interactive state functions
self.down = function (x, y, obj) {
if (self.isAnimating) {
return;
}
self.isPressed = true;
// Shrink button when pressed
tween(buttonBase, {
scaleX: 0.9,
scaleY: 0.9
}, {
duration: 100,
easing: tween.easeOut
});
tween(playIcon, {
scaleX: 0.9,
scaleY: 0.9
}, {
duration: 100,
easing: tween.easeOut
});
// Move shadow closer
tween(shadow, {
x: 5,
y: 5
}, {
duration: 100,
easing: tween.easeOut
});
};
self.up = function (x, y, obj) {
if (!self.isPressed || self.isAnimating) {
return;
}
self.isPressed = false;
self.isAnimating = true;
// Play sound only if settingsButton.soundOn is true
if (!settingsButton || settingsButton.soundOn) {
LK.getSound('buttonClick').play();
}
// Return to normal size with a bounce
tween(buttonBase, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 200,
easing: tween.elasticOut,
onFinish: function onFinish() {
tween(buttonBase, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 200,
easing: tween.easeOut,
onFinish: function onFinish() {
self.isAnimating = false;
// Trigger the "play" action
self.triggerPlay();
}
});
}
});
// Return play icon to normal with a bounce
tween(playIcon, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 200,
easing: tween.elasticOut,
onFinish: function onFinish() {
tween(playIcon, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 200,
easing: tween.easeOut
});
}
});
// Return shadow to normal position
tween(shadow, {
x: 10,
y: 10
}, {
duration: 200,
easing: tween.easeOut
});
};
// Function called when button is clicked
self.triggerPlay = function () {
// Spin the button when clicked
self.isAnimating = true;
// Celebrate by spinning the button
tween(self, {
rotation: Math.PI * 2
}, {
duration: 1000,
easing: tween.elasticOut,
onFinish: function onFinish() {
self.rotation = 0;
self.isAnimating = false;
// Show character selection
showCharacterSelection();
}
});
};
// Idle animation to make the button more playful
self.startIdleAnimation = function () {
function pulseButton() {
if (self.isPressed || self.isAnimating) {
LK.setTimeout(pulseButton, 2000);
return;
}
tween(buttonBase, {
scaleX: 1.05,
scaleY: 1.05
}, {
duration: 1000,
easing: tween.easeInOut,
onFinish: function onFinish() {
tween(buttonBase, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 1000,
easing: tween.easeInOut,
onFinish: function onFinish() {
LK.setTimeout(pulseButton, 2000);
}
});
}
});
}
// Start the idle animation
LK.setTimeout(pulseButton, 2000);
};
// Initial scale effect when the button appears
buttonBase.scaleX = 0;
buttonBase.scaleY = 0;
playIcon.scaleX = 0;
playIcon.scaleY = 0;
shadow.scaleX = 0;
shadow.scaleY = 0;
self.appear = function () {
tween(shadow, {
scaleX: 1,
scaleY: 1
}, {
duration: 500,
easing: tween.elasticOut
});
tween(buttonBase, {
scaleX: 1,
scaleY: 1
}, {
duration: 700,
easing: tween.elasticOut
});
tween(playIcon, {
scaleX: 1,
scaleY: 1
}, {
duration: 700,
easing: tween.elasticOut,
onFinish: function onFinish() {
self.startIdleAnimation();
}
});
};
return self;
});
var Raft = Container.expand(function () {
var self = Container.call(this);
// Create raft base
var raftBase = self.attachAsset('buttonShadow', {
anchorX: 0.5,
anchorY: 0.5,
tint: 0x8B4513,
// Brown color for wood
width: 400,
height: 200
});
// Create wood planks
for (var i = 0; i < 5; i++) {
var plank = self.attachAsset('boyBody', {
anchorX: 0.5,
anchorY: 0.5,
tint: 0x995533,
// Slightly different brown
width: 350,
height: 30,
y: -80 + i * 40
});
}
// Bob animation values
self.bobTimer = 0;
self.bobAmount = 5;
// Update for bobbing animation
self.update = function () {
self.bobTimer += 0.03;
self.y = self.bobAmount * Math.sin(self.bobTimer);
// Slight rotation to simulate waves
self.rotation = Math.sin(self.bobTimer * 0.7) * 0.02;
};
return self;
});
var SettingsButton = Container.expand(function () {
var self = Container.call(this);
// Create shadow for button
var shadow = self.attachAsset('buttonShadow', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 0.5,
x: 5,
y: 5,
scaleX: 0.6,
scaleY: 0.6
});
// Create button base
var buttonBase = self.attachAsset('playButtonBase', {
anchorX: 0.5,
anchorY: 0.5,
tint: 0x555555,
scaleX: 0.6,
scaleY: 0.6
});
// Track sound state
self.soundOn = true;
// Add text to button
var buttonText = new Text2("Sound ON", {
size: 50,
fill: '#FFFFFF'
});
buttonText.anchor.set(0.5, 0.5);
self.addChild(buttonText);
// Variables to track button state
self.isPressed = false;
self.isAnimating = false;
// Set interactive state functions
self.down = function (x, y, obj) {
if (self.isAnimating) {
return;
}
self.isPressed = true;
// Shrink button when pressed
tween(self, {
scaleX: 0.9,
scaleY: 0.9
}, {
duration: 100,
easing: tween.easeOut
});
};
self.up = function (x, y, obj) {
if (!self.isPressed || self.isAnimating) {
return;
}
self.isPressed = false;
self.isAnimating = true;
// Play sound only if sound is still on
if (self.soundOn) {
LK.getSound('buttonClick').play();
}
// Return to normal size with a bounce
tween(self, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 200,
easing: tween.elasticOut,
onFinish: function onFinish() {
tween(self, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 200,
easing: tween.easeOut,
onFinish: function onFinish() {
self.isAnimating = false;
// Toggle sound
self.toggleSound();
}
});
}
});
};
// Toggle sound on/off
self.toggleSound = function () {
self.soundOn = !self.soundOn;
// Update button text
buttonText.setText(self.soundOn ? "Sound ON" : "Sound OFF");
// Update button color
tween(buttonBase, {
tint: self.soundOn ? 0x555555 : 0x993333
}, {
duration: 300,
easing: tween.easeOut
});
// Set global sound mute state using available methods
if (self.soundOn) {
// Use LK.getSound() to control individual sounds
// Set volume back to normal for any future sounds
var buttonSound = LK.getSound('buttonClick');
var gameMusic = LK.getSound('TheCool9');
if (buttonSound) {
buttonSound.volume = 0.7;
}
if (gameMusic) {
gameMusic.volume = 1.0;
}
} else {
// Mute all sounds by setting their volume to 0
var buttonSound = LK.getSound('buttonClick');
var gameMusic = LK.getSound('TheCool9');
if (buttonSound) {
buttonSound.volume = 0;
}
if (gameMusic) {
gameMusic.volume = 0;
}
}
};
// Initial animation when button appears
self.appear = function () {
self.scaleX = 0;
self.scaleY = 0;
tween(self, {
scaleX: 1,
scaleY: 1
}, {
duration: 700,
easing: tween.elasticOut
});
};
return self;
});
var Shore = Container.expand(function () {
var self = Container.call(this);
// Create sandy beach
var sand = self.attachAsset('buttonShadow', {
anchorX: 0.5,
anchorY: 0.5,
tint: 0xF4D03F,
// Sandy color
width: 800,
height: 500
});
// Create some palm trees
var palm1 = self.attachAsset('boyBody', {
anchorX: 0.5,
anchorY: 1.0,
tint: 0x6E2C00,
// Brown trunk
width: 40,
height: 200,
x: -150,
y: -100,
rotation: -0.1
});
var palm2 = self.attachAsset('boyBody', {
anchorX: 0.5,
anchorY: 1.0,
tint: 0x6E2C00,
// Brown trunk
width: 40,
height: 180,
x: 180,
y: -120,
rotation: 0.15
});
// Create palm leaves
var leaves1 = self.attachAsset('girlHair', {
anchorX: 0.5,
anchorY: 0.5,
tint: 0x2ECC71,
// Green
width: 200,
height: 150,
x: -150,
y: -250
});
var leaves2 = self.attachAsset('girlHair', {
anchorX: 0.5,
anchorY: 0.5,
tint: 0x2ECC71,
// Green
width: 200,
height: 150,
x: 180,
y: -270
});
return self;
});
var StartGameButton = Container.expand(function () {
var self = Container.call(this);
// Create shadow for button
var shadow = self.attachAsset('buttonShadow', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 0.5,
x: 10,
y: 10
});
// Create button base
var buttonBase = self.attachAsset('playButtonBase', {
anchorX: 0.5,
anchorY: 0.5,
tint: 0x4CAF50 // Green color for start button
});
// Add text to button
var buttonText = new Text2("Start Game", {
size: 80,
fill: '#FFFFFF'
});
buttonText.anchor.set(0.5, 0.5);
self.addChild(buttonText);
// Variables to track button state
self.isPressed = false;
self.isAnimating = false;
// Set interactive state functions
self.down = function (x, y, obj) {
if (self.isAnimating) {
return;
}
self.isPressed = true;
// Shrink button when pressed
tween(self, {
scaleX: 0.9,
scaleY: 0.9
}, {
duration: 100,
easing: tween.easeOut
});
// Move shadow closer
tween(shadow, {
x: 5,
y: 5
}, {
duration: 100,
easing: tween.easeOut
});
};
self.up = function (x, y, obj) {
if (!self.isPressed || self.isAnimating) {
return;
}
self.isPressed = false;
self.isAnimating = true;
// Play sound only if settingsButton.soundOn is true
if (!settingsButton || settingsButton.soundOn) {
LK.getSound('buttonClick').play();
}
// Return to normal size with a bounce
tween(self, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 200,
easing: tween.elasticOut,
onFinish: function onFinish() {
tween(self, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 200,
easing: tween.easeOut,
onFinish: function onFinish() {
self.isAnimating = false;
// Make button disappear
tween(self, {
alpha: 0,
scaleX: 0,
scaleY: 0
}, {
duration: 300,
easing: tween.easeOut,
onFinish: function onFinish() {
// Remove button
if (self.parent) {
self.parent.removeChild(self);
}
// Find raft and character
var raft = null;
var shore = null;
var character = null;
// Find raft and shore in the scene
for (var i = 0; i < game.children.length; i++) {
if (game.children[i] instanceof Raft) {
raft = game.children[i];
}
if (game.children[i] instanceof Shore) {
shore = game.children[i];
}
}
if (raft && raft.children.length > 0) {
// Find the character in the raft
for (var j = 0; j < raft.children.length; j++) {
if (raft.children[j] instanceof Character) {
character = raft.children[j];
}
}
if (character && shore) {
// Move character out of raft
var globalCharPos = raft.toGlobal(character.position);
game.addChild(character);
character.position = globalCharPos;
// Make character swim animation
var swimToShore = function swimToShore() {
// Make character "swim" by moving arms and legs
if (character.armsContainer && character.armsContainer.children.length >= 2) {
var leftArm = character.armsContainer.children[0];
var rightArm = character.armsContainer.children[1];
// Animate arms in swimming motion
tween.loop(leftArm, {
rotation: [-0.2, 0.8, -0.2]
}, {
duration: 800
});
tween.loop(rightArm, {
rotation: [0.2, -0.8, 0.2]
}, {
duration: 800
});
}
if (character.legsContainer && character.legsContainer.children.length >= 2) {
var leftLeg = character.legsContainer.children[0];
var rightLeg = character.legsContainer.children[1];
// Animate legs in swimming motion
tween.loop(leftLeg, {
rotation: [0, 0.3, 0]
}, {
duration: 600
});
tween.loop(rightLeg, {
rotation: [0, -0.3, 0]
}, {
duration: 600
});
}
// Move character toward shore
tween(character, {
y: shore.y - 100 // Stop just above shore
}, {
duration: 5000,
easing: tween.easeInOut,
onFinish: function onFinish() {
// Character reached the shore
// Stop swimming animation
if (character.armsContainer && character.armsContainer.children.length >= 2) {
tween.stopAll(character.armsContainer.children[0]);
tween.stopAll(character.armsContainer.children[1]);
}
if (character.legsContainer && character.legsContainer.children.length >= 2) {
tween.stopAll(character.legsContainer.children[0]);
tween.stopAll(character.legsContainer.children[1]);
}
// Show celebration
var celebrateText = new Text2("Made it to shore!", {
size: 100,
fill: 0xFF4500
});
celebrateText.anchor.set(0.5, 0.5);
celebrateText.x = 2048 / 2;
celebrateText.y = 500;
celebrateText.alpha = 0;
game.addChild(celebrateText);
tween(celebrateText, {
alpha: 1,
y: celebrateText.y - 50
}, {
duration: 500,
easing: tween.easeOut,
onFinish: function onFinish() {
// Show win screen after delay
LK.setTimeout(function () {
LK.showYouWin();
}, 2000);
}
});
}
});
};
// Move raft away to simulate "exiting" the raft
tween(raft, {
y: raft.y - 150,
rotation: 0.3
}, {
duration: 1000,
easing: tween.easeOut,
onFinish: swimToShore
});
}
}
}
});
}
});
}
});
// Return shadow to normal position
tween(shadow, {
x: 10,
y: 10
}, {
duration: 200,
easing: tween.easeOut
});
};
// Initial animation when button appears
self.appear = function () {
self.scaleX = 0;
self.scaleY = 0;
tween(self, {
scaleX: 1,
scaleY: 1
}, {
duration: 700,
easing: tween.elasticOut
});
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x00FF00
});
/****
* Game Code
****/
// Set the game's background color to a softer green
game.setBackgroundColor(0x66CC99);
// Game state variables
var showingCharacterSelection = false;
var selectedCharacter = null;
var boyCharacter = null;
var girlCharacter = null;
// Create and add settings button
var settingsButton = new SettingsButton();
game.addChild(settingsButton);
// Position in top right with some margin
settingsButton.x = 2048 - 120;
settingsButton.y = 120;
// Make the button appear with animation
settingsButton.appear();
// Update function for character animations and ocean/raft
game.update = function () {
// Update character animations if they exist
if (boyCharacter) {
boyCharacter.update();
}
if (girlCharacter) {
girlCharacter.update();
}
// Update ocean and raft if they exist
for (var i = 0; i < game.children.length; i++) {
var child = game.children[i];
if (child instanceof Ocean) {
child.update();
}
if (child instanceof Raft) {
child.update();
}
}
};
// Create the play button and center it on screen
var playButton = new PlayButton();
game.addChild(playButton);
// Position the button in the center of the screen
playButton.x = 2048 / 2;
playButton.y = 2732 / 2;
// Make the button appear with animation
playButton.appear();
// Function to show character selection screen
function showCharacterSelection() {
if (showingCharacterSelection) {
return;
}
showingCharacterSelection = true;
// Make play button disappear
tween(playButton, {
alpha: 0,
scaleX: 0,
scaleY: 0
}, {
duration: 500,
easing: tween.easeOut,
onFinish: function onFinish() {
// Remove play button from display
game.removeChild(playButton);
// Create character options
boyCharacter = new Character();
boyCharacter.initialize("boy");
game.addChild(boyCharacter);
boyCharacter.x = 2048 / 3;
boyCharacter.y = 2732 / 2;
girlCharacter = new Character();
girlCharacter.initialize("girl");
game.addChild(girlCharacter);
girlCharacter.x = 2048 * 2 / 3;
girlCharacter.y = 2732 / 2;
// Make characters appear with animation
boyCharacter.appear();
girlCharacter.appear();
}
});
}
// Function called when a character is selected
function characterSelected(characterType) {
selectedCharacter = characterType;
console.log("Selected character: " + characterType);
// Make the non-selected character sad and disappear
var nonSelectedCharacter = characterType === "boy" ? girlCharacter : boyCharacter;
var selectedCharacterObj = characterType === "boy" ? boyCharacter : girlCharacter;
// Make selected character happy
if (selectedCharacterObj.facialContainer.children.length >= 3) {
var mouth = selectedCharacterObj.facialContainer.children[2];
// Make mouth bigger and smile
tween(mouth, {
scaleX: 1.5,
scaleY: 1.5,
y: -55
}, {
duration: 300,
easing: tween.elasticOut
});
}
// Make non-selected character sad
if (nonSelectedCharacter.facialContainer.children.length >= 3) {
var sadMouth = nonSelectedCharacter.facialContainer.children[2];
// Make mouth smaller and frown
tween(sadMouth, {
scaleX: 0.8,
scaleY: -1.2,
y: -50
}, {
duration: 300,
easing: tween.easeOut
});
}
// Fade out and shrink non-selected character
tween(nonSelectedCharacter, {
alpha: 0,
scaleX: 0,
scaleY: 0
}, {
duration: 500,
easing: tween.easeOut,
onFinish: function onFinish() {
game.removeChild(nonSelectedCharacter);
}
});
// Jump and move the selected character to center
LK.setTimeout(function () {
// Jump up first
tween(selectedCharacterObj, {
y: selectedCharacterObj.y - 100
}, {
duration: 400,
easing: tween.easeOut,
onFinish: function onFinish() {
// Move to center while in air
tween(selectedCharacterObj, {
x: 2048 / 2
}, {
duration: 300,
easing: tween.linear,
onFinish: function onFinish() {
// Land with bounce
tween(selectedCharacterObj, {
y: 2732 / 2,
scaleY: 0.7,
scaleX: 1.3
}, {
duration: 300,
easing: tween.easeIn,
onFinish: function onFinish() {
// Bounce back to normal
tween(selectedCharacterObj, {
scaleY: 1.1,
scaleX: 0.9
}, {
duration: 150,
easing: tween.easeOut,
onFinish: function onFinish() {
// Return to normal scale
tween(selectedCharacterObj, {
scaleY: 1.0,
scaleX: 1.0
}, {
duration: 150,
easing: tween.easeOut,
onFinish: function onFinish() {
// Celebrate with a spin
tween(selectedCharacterObj.headContainer, {
rotation: Math.PI * 2
}, {
duration: 800,
easing: tween.elasticOut,
onFinish: function onFinish() {
// Reset rotation
selectedCharacterObj.headContainer.rotation = 0;
// Add start game button
var startGameBtn = new StartGameButton();
game.addChild(startGameBtn);
startGameBtn.x = 2048 / 2;
startGameBtn.y = 2732 / 2 + 350; // Position below character
startGameBtn.appear();
}
});
}
});
}
});
}
});
}
});
}
});
}, 300);
}
// Function to start the game
function startGame() {
console.log("Starting game with character: " + selectedCharacter);
// Store the current background color
var originalBackgroundColor = game.backgroundColor;
// Create a black overlay for the screen
var blackOverlay = new Container();
var blackBg = blackOverlay.attachAsset('buttonShadow', {
anchorX: 0.5,
anchorY: 0.5,
width: 4096,
// Make it twice the screen width to ensure full coverage
height: 5464,
// Make it twice the screen height to ensure full coverage
tint: 0x000000,
// Pure black
alpha: 0
});
game.addChild(blackOverlay);
blackOverlay.x = 2048 / 2;
blackOverlay.y = 2732 / 2;
// Fade to black
tween(blackBg, {
alpha: 1
}, {
duration: 500,
easing: tween.easeOut,
onFinish: function onFinish() {
// Wait for 3 seconds with black screen
LK.setTimeout(function () {
// Create ocean scene
var ocean = new Ocean();
ocean.x = 2048 / 2;
ocean.y = 2732 / 2;
game.addChild(ocean);
// Create shore at the far side
var shore = new Shore();
shore.x = 2048 / 2;
shore.y = 3000; // Position below the screen
game.addChild(shore);
// Create raft and position it in the center
var raft = new Raft();
raft.x = 2048 / 2;
raft.y = 2732 / 2;
game.addChild(raft);
// Add the selected character to the raft
var selectedCharacterObj = selectedCharacter === "boy" ? boyCharacter : girlCharacter;
// Move character to raft
raft.addChild(selectedCharacterObj);
selectedCharacterObj.x = 0;
selectedCharacterObj.y = -80; // Position on raft
// Remove settings button and any remaining UI
if (settingsButton && settingsButton.parent) {
game.removeChild(settingsButton);
}
// Create start game button to trigger swimming animation
var startGameBtn = new StartGameButton();
game.addChild(startGameBtn);
startGameBtn.x = 2048 / 2;
startGameBtn.y = 2732 - 200; // Position near bottom
startGameBtn.appear();
// Fade the black screen out
tween(blackBg, {
alpha: 0
}, {
duration: 500,
easing: tween.easeIn,
onFinish: function onFinish() {
// Remove the black overlay
game.removeChild(blackOverlay);
// Set game background to sky blue
game.setBackgroundColor(0x87CEEB);
}
});
}, 3000);
}
});
}
// Rainbow effect for the background
var rainbowColors = [0x66CC99, 0x66CCFF, 0xCC99FF, 0xFF99CC, 0xFFCC66, 0x99FF99];
var currentColorIndex = 0;
// A function to cycle through background colors
function cycleBackgroundColor() {
currentColorIndex = (currentColorIndex + 1) % rainbowColors.length;
// Animate the color change
var targetColor = rainbowColors[currentColorIndex];
tween(game, {
backgroundColor: targetColor
}, {
duration: 2000,
easing: tween.easeInOut,
onFinish: function onFinish() {
// Schedule the next color change
LK.setTimeout(cycleBackgroundColor, 4000);
}
});
}
// Start the background color animation after a delay
LK.setTimeout(cycleBackgroundColor, 4000); ===================================================================
--- original.js
+++ change.js
@@ -213,9 +213,9 @@
x: 30,
y: 100
});
}
- // Start animations
+ ;
LK.setInterval(function () {
self.blink();
}, 3000);
// Start with scale 0
@@ -906,8 +906,65 @@
});
};
return self;
});
+var Shore = Container.expand(function () {
+ var self = Container.call(this);
+ // Create sandy beach
+ var sand = self.attachAsset('buttonShadow', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ tint: 0xF4D03F,
+ // Sandy color
+ width: 800,
+ height: 500
+ });
+ // Create some palm trees
+ var palm1 = self.attachAsset('boyBody', {
+ anchorX: 0.5,
+ anchorY: 1.0,
+ tint: 0x6E2C00,
+ // Brown trunk
+ width: 40,
+ height: 200,
+ x: -150,
+ y: -100,
+ rotation: -0.1
+ });
+ var palm2 = self.attachAsset('boyBody', {
+ anchorX: 0.5,
+ anchorY: 1.0,
+ tint: 0x6E2C00,
+ // Brown trunk
+ width: 40,
+ height: 180,
+ x: 180,
+ y: -120,
+ rotation: 0.15
+ });
+ // Create palm leaves
+ var leaves1 = self.attachAsset('girlHair', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ tint: 0x2ECC71,
+ // Green
+ width: 200,
+ height: 150,
+ x: -150,
+ y: -250
+ });
+ var leaves2 = self.attachAsset('girlHair', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ tint: 0x2ECC71,
+ // Green
+ width: 200,
+ height: 150,
+ x: 180,
+ y: -270
+ });
+ return self;
+});
var StartGameButton = Container.expand(function () {
var self = Container.call(this);
// Create shadow for button
var shadow = self.attachAsset('buttonShadow', {
@@ -981,10 +1038,135 @@
duration: 200,
easing: tween.easeOut,
onFinish: function onFinish() {
self.isAnimating = false;
- // Trigger the start game action
- startGame();
+ // Make button disappear
+ tween(self, {
+ alpha: 0,
+ scaleX: 0,
+ scaleY: 0
+ }, {
+ duration: 300,
+ easing: tween.easeOut,
+ onFinish: function onFinish() {
+ // Remove button
+ if (self.parent) {
+ self.parent.removeChild(self);
+ }
+ // Find raft and character
+ var raft = null;
+ var shore = null;
+ var character = null;
+ // Find raft and shore in the scene
+ for (var i = 0; i < game.children.length; i++) {
+ if (game.children[i] instanceof Raft) {
+ raft = game.children[i];
+ }
+ if (game.children[i] instanceof Shore) {
+ shore = game.children[i];
+ }
+ }
+ if (raft && raft.children.length > 0) {
+ // Find the character in the raft
+ for (var j = 0; j < raft.children.length; j++) {
+ if (raft.children[j] instanceof Character) {
+ character = raft.children[j];
+ }
+ }
+ if (character && shore) {
+ // Move character out of raft
+ var globalCharPos = raft.toGlobal(character.position);
+ game.addChild(character);
+ character.position = globalCharPos;
+ // Make character swim animation
+ var swimToShore = function swimToShore() {
+ // Make character "swim" by moving arms and legs
+ if (character.armsContainer && character.armsContainer.children.length >= 2) {
+ var leftArm = character.armsContainer.children[0];
+ var rightArm = character.armsContainer.children[1];
+ // Animate arms in swimming motion
+ tween.loop(leftArm, {
+ rotation: [-0.2, 0.8, -0.2]
+ }, {
+ duration: 800
+ });
+ tween.loop(rightArm, {
+ rotation: [0.2, -0.8, 0.2]
+ }, {
+ duration: 800
+ });
+ }
+ if (character.legsContainer && character.legsContainer.children.length >= 2) {
+ var leftLeg = character.legsContainer.children[0];
+ var rightLeg = character.legsContainer.children[1];
+ // Animate legs in swimming motion
+ tween.loop(leftLeg, {
+ rotation: [0, 0.3, 0]
+ }, {
+ duration: 600
+ });
+ tween.loop(rightLeg, {
+ rotation: [0, -0.3, 0]
+ }, {
+ duration: 600
+ });
+ }
+ // Move character toward shore
+ tween(character, {
+ y: shore.y - 100 // Stop just above shore
+ }, {
+ duration: 5000,
+ easing: tween.easeInOut,
+ onFinish: function onFinish() {
+ // Character reached the shore
+ // Stop swimming animation
+ if (character.armsContainer && character.armsContainer.children.length >= 2) {
+ tween.stopAll(character.armsContainer.children[0]);
+ tween.stopAll(character.armsContainer.children[1]);
+ }
+ if (character.legsContainer && character.legsContainer.children.length >= 2) {
+ tween.stopAll(character.legsContainer.children[0]);
+ tween.stopAll(character.legsContainer.children[1]);
+ }
+ // Show celebration
+ var celebrateText = new Text2("Made it to shore!", {
+ size: 100,
+ fill: 0xFF4500
+ });
+ celebrateText.anchor.set(0.5, 0.5);
+ celebrateText.x = 2048 / 2;
+ celebrateText.y = 500;
+ celebrateText.alpha = 0;
+ game.addChild(celebrateText);
+ tween(celebrateText, {
+ alpha: 1,
+ y: celebrateText.y - 50
+ }, {
+ duration: 500,
+ easing: tween.easeOut,
+ onFinish: function onFinish() {
+ // Show win screen after delay
+ LK.setTimeout(function () {
+ LK.showYouWin();
+ }, 2000);
+ }
+ });
+ }
+ });
+ };
+ // Move raft away to simulate "exiting" the raft
+ tween(raft, {
+ y: raft.y - 150,
+ rotation: 0.3
+ }, {
+ duration: 1000,
+ easing: tween.easeOut,
+ onFinish: swimToShore
+ });
+ }
+ }
+ }
+ });
}
});
}
});
@@ -1248,8 +1430,13 @@
var ocean = new Ocean();
ocean.x = 2048 / 2;
ocean.y = 2732 / 2;
game.addChild(ocean);
+ // Create shore at the far side
+ var shore = new Shore();
+ shore.x = 2048 / 2;
+ shore.y = 3000; // Position below the screen
+ game.addChild(shore);
// Create raft and position it in the center
var raft = new Raft();
raft.x = 2048 / 2;
raft.y = 2732 / 2;
@@ -1259,8 +1446,18 @@
// Move character to raft
raft.addChild(selectedCharacterObj);
selectedCharacterObj.x = 0;
selectedCharacterObj.y = -80; // Position on raft
+ // Remove settings button and any remaining UI
+ if (settingsButton && settingsButton.parent) {
+ game.removeChild(settingsButton);
+ }
+ // Create start game button to trigger swimming animation
+ var startGameBtn = new StartGameButton();
+ game.addChild(startGameBtn);
+ startGameBtn.x = 2048 / 2;
+ startGameBtn.y = 2732 - 200; // Position near bottom
+ startGameBtn.appear();
// Fade the black screen out
tween(blackBg, {
alpha: 0
}, {