Play
:quality(85)/https://cdn.frvr.ai/680c6d8bfe46b201edf2dbc4.png)
:quality(85)/https://cdn.frvr.ai/680c6d84fe46b201edf2dbc2.png)
#Fun
#Craft
#Survive
#Islands
#Jungles
#Ocean
Creation History
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
var hair = self.headContainer.attachAsset('boyHair', {
anchorX: 0.5,
anchorY: 1,
y: -130
});
// 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
var hair = self.headContainer.attachAsset('girlHair', {
anchorX: 0.5,
anchorY: 0.5,
y: -100
});
// 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
});
}
// Start animations
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];
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
});
}
};
self.up = function (x, y, obj) {
// Play sound
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];
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
});
}
// 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 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
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;
});
/****
* 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;
// Update function for character animations
game.update = function () {
// Update character animations if they exist
if (boyCharacter) {
boyCharacter.update();
}
if (girlCharacter) {
girlCharacter.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;
// Game could start here with the selected character
console.log("Game ready to start with character: " + characterType);
}
});
}
});
}
});
}
});
}
});
}
});
}, 300);
}
// 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
@@ -15,266 +15,236 @@
alpha: 0.7
});
// Character type (boy or girl)
self.type = "";
- // Character shape will be added in initialize
- self.shape = null;
- // Head, body, arms, legs for more realistic character
- self.head = null;
- self.body = null;
- self.leftArm = null;
- self.rightArm = null;
- self.leftLeg = null;
- self.rightLeg = null;
+ // 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.bounceTimer = null;
- self.isHovered = false;
+ self.bobTimer = 0;
+ self.blinkTimer = 0;
+ self.isBlinking = false;
+ self.armSwingDirection = 1;
// Initialize with type
self.initialize = function (characterType) {
self.type = characterType;
- // Create container for character parts
- var characterContainer = new Container();
- self.addChild(characterContainer);
+ // 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") {
- // Boy character parts - more realistic and cartoony
- var bodyColor = 0x3498db;
- var skinColor = 0xffcc99;
- // Body (slightly rectangle/trapezoid)
- self.body = new Container();
- var bodyShape = LK.getAsset('boyCharacter', {
+ // Body
+ var body = self.bodyContainer.attachAsset('boyBody', {
anchorX: 0.5,
anchorY: 0.5,
- scaleX: 1.2,
- scaleY: 1.3,
- y: 20
+ y: 30
});
- bodyShape.tint = bodyColor;
- self.body.addChild(bodyShape);
- // Head (circle)
- self.head = new Container();
- var headShape = LK.getAsset('characterBase', {
+ // Head
+ var head = self.headContainer.attachAsset('boyHead', {
anchorX: 0.5,
anchorY: 0.5,
- scaleX: 0.6,
- scaleY: 0.6,
y: -80
});
- headShape.tint = skinColor;
- self.head.addChild(headShape);
- // Add face features
- // Eyes
- var leftEye = LK.getAsset('eyeShape', {
+ // Hair
+ var hair = self.headContainer.attachAsset('boyHair', {
anchorX: 0.5,
+ anchorY: 1,
+ y: -130
+ });
+ // Left Eye
+ var leftEye = self.facialContainer.attachAsset('boyEyes', {
+ anchorX: 0.5,
anchorY: 0.5,
x: -25,
- y: -15
+ y: -90
});
- var rightEye = LK.getAsset('eyeShape', {
+ // Right Eye
+ var rightEye = self.facialContainer.attachAsset('boyEyes', {
anchorX: 0.5,
anchorY: 0.5,
x: 25,
- y: -15
+ y: -90
});
// Mouth
- var mouth = LK.getAsset('mouthShape', {
+ var mouth = self.facialContainer.attachAsset('boyMouth', {
anchorX: 0.5,
anchorY: 0.5,
- y: 20,
- scaleY: 0.8
+ y: -60
});
- // Add all face parts to head
- self.head.addChild(leftEye);
- self.head.addChild(rightEye);
- self.head.addChild(mouth);
- // Arms
- self.leftArm = new Container();
- var leftArmShape = LK.getAsset('boyCharacter', {
+ // Left Arm
+ var leftArm = self.armsContainer.attachAsset('boyArm', {
anchorX: 0.5,
anchorY: 0,
- scaleX: 0.3,
- scaleY: 0.8,
- x: -70,
- y: -30,
+ x: -65,
+ y: -20,
rotation: 0.2
});
- leftArmShape.tint = bodyColor;
- self.leftArm.addChild(leftArmShape);
- self.rightArm = new Container();
- var rightArmShape = LK.getAsset('boyCharacter', {
+ // Right Arm
+ var rightArm = self.armsContainer.attachAsset('boyArm', {
anchorX: 0.5,
anchorY: 0,
- scaleX: 0.3,
- scaleY: 0.8,
- x: 70,
- y: -30,
+ x: 65,
+ y: -20,
rotation: -0.2
});
- rightArmShape.tint = bodyColor;
- self.rightArm.addChild(rightArmShape);
- // Legs
- self.leftLeg = new Container();
- var leftLegShape = LK.getAsset('boyCharacter', {
+ // Left Leg
+ var leftLeg = self.legsContainer.attachAsset('boyLeg', {
anchorX: 0.5,
anchorY: 0,
- scaleX: 0.35,
- scaleY: 0.9,
- x: -40,
- y: 80
+ x: -30,
+ y: 100
});
- leftLegShape.tint = 0x2980b9;
- self.leftLeg.addChild(leftLegShape);
- self.rightLeg = new Container();
- var rightLegShape = LK.getAsset('boyCharacter', {
+ // Right Leg
+ var rightLeg = self.legsContainer.attachAsset('boyLeg', {
anchorX: 0.5,
anchorY: 0,
- scaleX: 0.35,
- scaleY: 0.9,
- x: 40,
- y: 80
+ x: 30,
+ y: 100
});
- rightLegShape.tint = 0x2980b9;
- self.rightLeg.addChild(rightLegShape);
} else {
- // Girl character parts - more realistic and cartoony
- var bodyColor = 0xe84393;
- var skinColor = 0xffe0bd;
- // Body (slightly rectangle/trapezoid)
- self.body = new Container();
- var bodyShape = LK.getAsset('girlCharacter', {
+ // Body
+ var body = self.bodyContainer.attachAsset('girlBody', {
anchorX: 0.5,
anchorY: 0.5,
- scaleX: 1.0,
- scaleY: 1.3,
- y: 20
+ y: 30
});
- bodyShape.tint = bodyColor;
- self.body.addChild(bodyShape);
- // Head (circle)
- self.head = new Container();
- var headShape = LK.getAsset('characterBase', {
+ // Head
+ var head = self.headContainer.attachAsset('girlHead', {
anchorX: 0.5,
anchorY: 0.5,
- scaleX: 0.6,
- scaleY: 0.6,
y: -80
});
- headShape.tint = skinColor;
- self.head.addChild(headShape);
- // Arms
- self.leftArm = new Container();
- var leftArmShape = LK.getAsset('girlCharacter', {
+ // Hair
+ var hair = self.headContainer.attachAsset('girlHair', {
anchorX: 0.5,
+ anchorY: 0.5,
+ y: -100
+ });
+ // 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,
- scaleX: 0.3,
- scaleY: 0.8,
- x: -60,
- y: -30,
+ x: -65,
+ y: -20,
rotation: 0.2
});
- leftArmShape.tint = bodyColor;
- self.leftArm.addChild(leftArmShape);
- self.rightArm = new Container();
- var rightArmShape = LK.getAsset('girlCharacter', {
+ // Right Arm
+ var rightArm = self.armsContainer.attachAsset('girlArm', {
anchorX: 0.5,
anchorY: 0,
- scaleX: 0.3,
- scaleY: 0.8,
- x: 60,
- y: -30,
+ x: 65,
+ y: -20,
rotation: -0.2
});
- rightArmShape.tint = bodyColor;
- self.rightArm.addChild(rightArmShape);
- // Legs
- self.leftLeg = new Container();
- var leftLegShape = LK.getAsset('girlCharacter', {
+ // Left Leg
+ var leftLeg = self.legsContainer.attachAsset('girlLeg', {
anchorX: 0.5,
anchorY: 0,
- scaleX: 0.35,
- scaleY: 0.9,
x: -30,
- y: 80
+ y: 100
});
- leftLegShape.tint = 0xd63031;
- self.leftLeg.addChild(leftLegShape);
- self.rightLeg = new Container();
- var rightLegShape = LK.getAsset('girlCharacter', {
+ // Right Leg
+ var rightLeg = self.legsContainer.attachAsset('girlLeg', {
anchorX: 0.5,
anchorY: 0,
- scaleX: 0.35,
- scaleY: 0.9,
x: 30,
- y: 80
+ y: 100
});
- rightLegShape.tint = 0xd63031;
- self.rightLeg.addChild(rightLegShape);
}
- // Add all parts to the character container
- characterContainer.addChild(self.leftLeg);
- characterContainer.addChild(self.rightLeg);
- characterContainer.addChild(self.body);
- characterContainer.addChild(self.leftArm);
- characterContainer.addChild(self.rightArm);
- characterContainer.addChild(self.head);
+ // Start animations
+ LK.setInterval(function () {
+ self.blink();
+ }, 3000);
// Start with scale 0
self.scaleX = 0;
self.scaleY = 0;
- // Start idle animation after initialization
- self.startIdleAnimation();
};
- // Idle animation for character
- self.startIdleAnimation = function () {
- function animateIdle() {
- if (!self.isHovered) {
- // Subtle body bob up and down
- tween(self.body, {
- y: self.body.y + 5
+ // 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: 1000,
- easing: tween.easeInOut,
- onFinish: function onFinish() {
- tween(self.body, {
- y: self.body.y - 5
- }, {
- duration: 1000,
- easing: tween.easeInOut,
- onFinish: function onFinish() {
- self.bounceTimer = LK.setTimeout(animateIdle, 100);
- }
- });
- }
+ duration: 100,
+ easing: tween.easeOut
});
- // Subtle arm swings
- tween(self.leftArm, {
- rotation: self.leftArm.rotation - 0.05
+ tween(rightEye, {
+ scaleY: 1
}, {
- duration: 1000,
- easing: tween.easeInOut
- });
- tween(self.rightArm, {
- rotation: self.rightArm.rotation + 0.05
- }, {
- duration: 1000,
- easing: tween.easeInOut,
+ duration: 100,
+ easing: tween.easeOut,
onFinish: function onFinish() {
- tween(self.leftArm, {
- rotation: self.leftArm.rotation + 0.05
- }, {
- duration: 1000,
- easing: tween.easeInOut
- });
- tween(self.rightArm, {
- rotation: self.rightArm.rotation - 0.05
- }, {
- duration: 1000,
- easing: tween.easeInOut
- });
+ 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;
}
- // Start the animation
- self.bounceTimer = LK.setTimeout(animateIdle, 100);
};
// Animate character appearance
self.appear = function () {
tween(self, {
@@ -303,102 +273,73 @@
}, 600);
};
// Handle selection
self.down = function (x, y, obj) {
- // Cleanup any ongoing animations
- if (self.bounceTimer) {
- LK.clearTimeout(self.bounceTimer);
- self.bounceTimer = null;
- }
- self.isHovered = true;
- // Squash effect - wider and shorter
+ // Shrink when pressed
tween(self, {
- scaleX: 1.1,
- scaleY: 0.8
+ scaleX: 0.9,
+ scaleY: 0.9
}, {
duration: 100,
easing: tween.easeOut
});
- // Animation for parts
- tween(self.head, {
- scaleY: 0.9,
- y: self.head.y + 10
- }, {
- duration: 100,
- easing: tween.easeOut
- });
- // Arms up
- tween(self.leftArm, {
- rotation: -0.4
- }, {
- duration: 100,
- easing: tween.easeOut
- });
- tween(self.rightArm, {
- rotation: 0.4
- }, {
- 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];
+ 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
+ });
+ }
};
self.up = function (x, y, obj) {
// Play sound
LK.getSound('buttonClick').play();
- // Stretch effect - taller and thinner
+ // Return eyes to normal
+ if (self.facialContainer.children.length >= 2) {
+ var leftEye = self.facialContainer.children[0];
+ var rightEye = self.facialContainer.children[1];
+ 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
+ });
+ }
+ // Expand then return to normal size
tween(self, {
- scaleX: 0.9,
- scaleY: 1.2
+ scaleX: 1.1,
+ scaleY: 1.1
}, {
duration: 200,
easing: tween.elasticOut,
onFinish: function onFinish() {
- // Head bounce
- tween(self.head, {
- scaleY: 1.1,
- y: self.head.y - 15
+ // Celebrate selection with a spin
+ tween(self.headContainer, {
+ rotation: Math.PI * 2
}, {
- duration: 200,
- easing: tween.elasticOut,
- onFinish: function onFinish() {
- tween(self.head, {
- scaleY: 1.0,
- y: self.head.y + 15
- }, {
- duration: 200,
- easing: tween.easeOut
- });
- }
+ duration: 500,
+ easing: tween.elasticOut
});
- // Arms celebration
- tween(self.leftArm, {
- rotation: -0.8
- }, {
- duration: 200,
- easing: tween.elasticOut,
- onFinish: function onFinish() {
- tween(self.leftArm, {
- rotation: 0.2
- }, {
- duration: 200,
- easing: tween.easeOut
- });
- }
- });
- tween(self.rightArm, {
- rotation: 0.8
- }, {
- duration: 200,
- easing: tween.elasticOut,
- onFinish: function onFinish() {
- tween(self.rightArm, {
- rotation: -0.2
- }, {
- duration: 200,
- easing: tween.easeOut
- });
- }
- });
- // Main character animation
tween(self, {
scaleX: 1.0,
scaleY: 1.0
}, {
@@ -406,11 +347,8 @@
easing: tween.easeOut,
onFinish: function onFinish() {
// Character selected!
characterSelected(self.type);
- self.isHovered = false;
- // Restart idle animation
- self.startIdleAnimation();
}
});
}
});
@@ -629,8 +567,18 @@
var showingCharacterSelection = false;
var selectedCharacter = null;
var boyCharacter = null;
var girlCharacter = null;
+// Update function for character animations
+game.update = function () {
+ // Update character animations if they exist
+ if (boyCharacter) {
+ boyCharacter.update();
+ }
+ if (girlCharacter) {
+ girlCharacter.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
@@ -675,91 +623,114 @@
// Function called when a character is selected
function characterSelected(characterType) {
selectedCharacter = characterType;
console.log("Selected character: " + characterType);
- // Make the non-selected character disappear with a fun spin animation
+ // Make the non-selected character sad and disappear
var nonSelectedCharacter = characterType === "boy" ? girlCharacter : boyCharacter;
- // First spin quickly
+ 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, {
- rotation: Math.PI * 2,
- scaleX: 0.8,
- scaleY: 0.8
+ alpha: 0,
+ scaleX: 0,
+ scaleY: 0
}, {
- duration: 400,
- easing: tween.easeInOut,
+ duration: 500,
+ easing: tween.easeOut,
onFinish: function onFinish() {
- // Then shrink away
- tween(nonSelectedCharacter, {
- alpha: 0,
- scaleX: 0,
- scaleY: 0,
- y: nonSelectedCharacter.y + 100
- }, {
- duration: 500,
- easing: tween.backIn,
- onFinish: function onFinish() {
- game.removeChild(nonSelectedCharacter);
- }
- });
+ game.removeChild(nonSelectedCharacter);
}
});
- // Move the selected character to center with a jumping animation
- var selectedCharacterObj = characterType === "boy" ? boyCharacter : girlCharacter;
- // First jump up
- tween(selectedCharacterObj, {
- y: selectedCharacterObj.y - 100,
- scaleX: 1.2,
- scaleY: 1.2
- }, {
- duration: 300,
- easing: tween.easeOut,
- onFinish: function onFinish() {
- // Then move to center position
- tween(selectedCharacterObj, {
- x: 2048 / 2,
- y: 2732 / 2,
- scaleX: 1.5,
- scaleY: 1.5
- }, {
- duration: 700,
- easing: tween.elasticOut,
- onFinish: function onFinish() {
- // Celebrate animation
- var arms = [selectedCharacterObj.leftArm, selectedCharacterObj.rightArm];
- function armWave(index) {
- if (index >= 4) {
- // Game could start here with the selected character
- console.log("Game ready to start with character: " + characterType);
- return;
- }
- var upArm = arms[index % 2];
- var downArm = arms[(index + 1) % 2];
- // Raise one arm
- tween(upArm, {
- rotation: index % 2 === 0 ? -0.8 : 0.8
+ // 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: 200,
- easing: tween.easeOut,
+ duration: 300,
+ easing: tween.easeIn,
onFinish: function onFinish() {
- // Lower the other
- tween(downArm, {
- rotation: index % 2 === 0 ? 0.2 : -0.2
+ // Bounce back to normal
+ tween(selectedCharacterObj, {
+ scaleY: 1.1,
+ scaleX: 0.9
}, {
- duration: 200,
+ duration: 150,
easing: tween.easeOut,
onFinish: function onFinish() {
- armWave(index + 1);
+ // 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;
+ // Game could start here with the selected character
+ console.log("Game ready to start with character: " + characterType);
+ }
+ });
+ }
+ });
}
});
}
});
}
- // Start the celebration wave
- armWave(0);
- }
- });
- }
- });
+ });
+ }
+ });
+ }, 300);
}
// Rainbow effect for the background
var rainbowColors = [0x66CC99, 0x66CCFF, 0xCC99FF, 0xFF99CC, 0xFFCC66, 0x99FF99];
var currentColorIndex = 0;
Sounds & Music
Used plugins
@upit/tween
