/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var Character = Container.expand(function () { var self = Container.call(this); // Character body var body = self.attachAsset('character_body', { anchorX: 0.5, anchorY: 1, x: 0, y: 200 }); // Character head var head = self.attachAsset('character_head', { anchorX: 0.5, anchorY: 0.5, x: 0, y: -100 }); // Character hair var hair = self.attachAsset('character_hair', { anchorX: 0.5, anchorY: 0.5, x: 0, y: -180 }); // Hair sections for interactive styling var hairSections = []; var sectionPositions = [{ x: -120, y: -200 }, // Left side { x: 0, y: -250 }, // Top { x: 120, y: -200 }, // Right side { x: -60, y: -150 }, // Left front { x: 60, y: -150 }, // Right front { x: 0, y: -120 } // Back ]; for (var i = 0; i < sectionPositions.length; i++) { var section = self.attachAsset('hair_section', { anchorX: 0.5, anchorY: 0.5, x: sectionPositions[i].x, y: sectionPositions[i].y, alpha: 0.3 }); section.sectionIndex = i; section.originalColor = hair.tint; section.isCut = false; section.isBraided = false; hairSections.push(section); } // Accessories array var accessories = []; self.getHair = function () { return hair; }; self.getHairSections = function () { return hairSections; }; self.addAccessory = function (accessoryType, x, y) { var accessory = self.attachAsset(accessoryType, { anchorX: 0.5, anchorY: 0.5, x: x, y: y }); accessories.push(accessory); return accessory; }; self.getAccessories = function () { return accessories; }; return self; }); var ColorSwatch = Container.expand(function (colorType, colorValue) { var self = Container.call(this); var colorGraphic = self.attachAsset(colorType, { anchorX: 0.5, anchorY: 0.5 }); self.colorValue = colorValue; self.isSelected = false; self.setSelected = function (selected) { self.isSelected = selected; if (selected) { colorGraphic.scaleX = 1.3; colorGraphic.scaleY = 1.3; } else { colorGraphic.scaleX = 1; colorGraphic.scaleY = 1; } }; self.down = function (x, y, obj) { selectedColor = self.colorValue; updateColorSelection(); }; return self; }); var Tool = Container.expand(function (toolType) { var self = Container.call(this); var toolGraphic = self.attachAsset(toolType, { anchorX: 0.5, anchorY: 0.5 }); self.toolType = toolType; self.isSelected = false; self.setSelected = function (selected) { self.isSelected = selected; if (selected) { toolGraphic.tint = 0xffff00; // Yellow highlight toolGraphic.scaleX = 1.2; toolGraphic.scaleY = 1.2; } else { toolGraphic.tint = 0xffffff; toolGraphic.scaleX = 1; toolGraphic.scaleY = 1; } }; self.down = function (x, y, obj) { selectedTool = self.toolType; updateToolSelection(); }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x87ceeb }); /**** * Game Code ****/ // Sound effects // Hair section indicators // UI elements // Color palette // Accessory assets // Tool assets // Character assets // Game state variables var currentCharacter; var selectedTool = 'scissors'; var selectedColor = 0xff0000; var tools = []; var colorSwatches = []; var isPhotoMode = false; // Create character currentCharacter = game.addChild(new Character()); currentCharacter.x = 1024; currentCharacter.y = 1600; // Create tool panel var toolPanel = game.addChild(LK.getAsset('tool_panel', { anchorX: 0.5, anchorY: 0, x: 1024, y: 2400 })); // Create color panel var colorPanel = game.addChild(LK.getAsset('color_panel', { anchorX: 0.5, anchorY: 0, x: 1024, y: 2520 })); // Create tools var toolTypes = ['scissors', 'spray_paint', 'braiding_wand', 'camera']; var toolPositions = [800, 950, 1100, 1250]; for (var i = 0; i < toolTypes.length; i++) { var tool = game.addChild(new Tool(toolTypes[i])); tool.x = toolPositions[i]; tool.y = 2500; tools.push(tool); } // Create color swatches var colorTypes = ['color_red', 'color_blue', 'color_green', 'color_purple', 'color_yellow', 'color_pink']; var colorValues = [0xff0000, 0x0000ff, 0x00ff00, 0x800080, 0xffff00, 0xff69b4]; var colorPositions = [800, 880, 960, 1040, 1120, 1200]; for (var i = 0; i < colorTypes.length; i++) { var swatch = game.addChild(new ColorSwatch(colorTypes[i], colorValues[i])); swatch.x = colorPositions[i]; swatch.y = 2580; colorSwatches.push(swatch); } // Instructions text var instructionText = new Text2('Tap a tool, then tap on hair to style!', { size: 60, fill: 0x333333 }); instructionText.anchor.set(0.5, 0); instructionText.x = 1024; instructionText.y = 200; game.addChild(instructionText); // Initialize tool selection function updateToolSelection() { for (var i = 0; i < tools.length; i++) { tools[i].setSelected(tools[i].toolType === selectedTool); } // Update instruction text var instructions = { 'scissors': 'Tap hair sections to cut!', 'spray_paint': 'Choose a color and spray hair!', 'braiding_wand': 'Tap hair sections to braid!', 'camera': 'Tap to take a photo!' }; instructionText.setText(instructions[selectedTool] || 'Select a tool!'); } function updateColorSelection() { for (var i = 0; i < colorSwatches.length; i++) { colorSwatches[i].setSelected(colorSwatches[i].colorValue === selectedColor); } } // Initialize selections updateToolSelection(); updateColorSelection(); // Game interaction handlers game.down = function (x, y, obj) { // Handle hair section interactions var hairSections = currentCharacter.getHairSections(); for (var i = 0; i < hairSections.length; i++) { var section = hairSections[i]; var globalPos = section.parent.toGlobal(section.position); var distance = Math.sqrt(Math.pow(x - globalPos.x, 2) + Math.pow(y - globalPos.y, 2)); if (distance < 60) { handleHairSectionClick(section); return; } } // Handle camera tool special case if (selectedTool === 'camera') { takePhoto(); } }; function handleHairSectionClick(section) { switch (selectedTool) { case 'scissors': cutHair(section); break; case 'spray_paint': colorHair(section); break; case 'braiding_wand': braidHair(section); break; } } function cutHair(section) { if (!section.isCut) { section.isCut = true; section.scaleY = 0.7; section.y += 20; // Play cutting sound LK.getSound('snip').play(); // Add cutting animation tween(section, { scaleX: 0.8 }, { duration: 200, easing: tween.easeOut }); } } function colorHair(section) { section.tint = selectedColor; currentCharacter.getHair().tint = selectedColor; // Play spray sound LK.getSound('spray').play(); // Add color animation var originalScale = section.scaleX; tween(section, { scaleX: originalScale * 1.2, scaleY: section.scaleY * 1.2 }, { duration: 150, easing: tween.easeOut, onFinish: function onFinish() { tween(section, { scaleX: originalScale, scaleY: section.scaleY / 1.2 }, { duration: 150, easing: tween.easeIn }); } }); } function braidHair(section) { if (!section.isBraided) { section.isBraided = true; section.rotation = Math.PI / 8; section.scaleX = 0.8; // Add braiding animation tween(section, { rotation: -Math.PI / 8 }, { duration: 300, easing: tween.easeInOut, onFinish: function onFinish() { tween(section, { rotation: Math.PI / 8 }, { duration: 300, easing: tween.easeInOut }); } }); } } function takePhoto() { // Play camera sound LK.getSound('camera_click').play(); // Flash effect LK.effects.flashScreen(0xffffff, 300); // Show photo taken message var photoText = new Text2('Photo Saved!', { size: 80, fill: 0x00FF00 }); photoText.anchor.set(0.5, 0.5); photoText.x = 1024; photoText.y = 1000; photoText.alpha = 0; game.addChild(photoText); // Animate photo text tween(photoText, { alpha: 1 }, { duration: 300, easing: tween.easeOut, onFinish: function onFinish() { tween(photoText, { alpha: 0 }, { duration: 1000, easing: tween.easeIn, onFinish: function onFinish() { photoText.destroy(); } }); } }); } // Add some random accessories on character creation LK.setTimeout(function () { // Add a bow currentCharacter.addAccessory('bow', 80, -220); // Add clips currentCharacter.addAccessory('clip', -100, -160); currentCharacter.addAccessory('clip', 100, -160); }, 1000); game.update = function () { // Gentle hair animation var hair = currentCharacter.getHair(); hair.rotation = Math.sin(LK.ticks * 0.02) * 0.05; // Animate hair sections gently var hairSections = currentCharacter.getHairSections(); for (var i = 0; i < hairSections.length; i++) { var section = hairSections[i]; if (!section.isBraided) { section.rotation += Math.sin(LK.ticks * 0.01 + i) * 0.002; } } };
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var Character = Container.expand(function () {
var self = Container.call(this);
// Character body
var body = self.attachAsset('character_body', {
anchorX: 0.5,
anchorY: 1,
x: 0,
y: 200
});
// Character head
var head = self.attachAsset('character_head', {
anchorX: 0.5,
anchorY: 0.5,
x: 0,
y: -100
});
// Character hair
var hair = self.attachAsset('character_hair', {
anchorX: 0.5,
anchorY: 0.5,
x: 0,
y: -180
});
// Hair sections for interactive styling
var hairSections = [];
var sectionPositions = [{
x: -120,
y: -200
},
// Left side
{
x: 0,
y: -250
},
// Top
{
x: 120,
y: -200
},
// Right side
{
x: -60,
y: -150
},
// Left front
{
x: 60,
y: -150
},
// Right front
{
x: 0,
y: -120
} // Back
];
for (var i = 0; i < sectionPositions.length; i++) {
var section = self.attachAsset('hair_section', {
anchorX: 0.5,
anchorY: 0.5,
x: sectionPositions[i].x,
y: sectionPositions[i].y,
alpha: 0.3
});
section.sectionIndex = i;
section.originalColor = hair.tint;
section.isCut = false;
section.isBraided = false;
hairSections.push(section);
}
// Accessories array
var accessories = [];
self.getHair = function () {
return hair;
};
self.getHairSections = function () {
return hairSections;
};
self.addAccessory = function (accessoryType, x, y) {
var accessory = self.attachAsset(accessoryType, {
anchorX: 0.5,
anchorY: 0.5,
x: x,
y: y
});
accessories.push(accessory);
return accessory;
};
self.getAccessories = function () {
return accessories;
};
return self;
});
var ColorSwatch = Container.expand(function (colorType, colorValue) {
var self = Container.call(this);
var colorGraphic = self.attachAsset(colorType, {
anchorX: 0.5,
anchorY: 0.5
});
self.colorValue = colorValue;
self.isSelected = false;
self.setSelected = function (selected) {
self.isSelected = selected;
if (selected) {
colorGraphic.scaleX = 1.3;
colorGraphic.scaleY = 1.3;
} else {
colorGraphic.scaleX = 1;
colorGraphic.scaleY = 1;
}
};
self.down = function (x, y, obj) {
selectedColor = self.colorValue;
updateColorSelection();
};
return self;
});
var Tool = Container.expand(function (toolType) {
var self = Container.call(this);
var toolGraphic = self.attachAsset(toolType, {
anchorX: 0.5,
anchorY: 0.5
});
self.toolType = toolType;
self.isSelected = false;
self.setSelected = function (selected) {
self.isSelected = selected;
if (selected) {
toolGraphic.tint = 0xffff00; // Yellow highlight
toolGraphic.scaleX = 1.2;
toolGraphic.scaleY = 1.2;
} else {
toolGraphic.tint = 0xffffff;
toolGraphic.scaleX = 1;
toolGraphic.scaleY = 1;
}
};
self.down = function (x, y, obj) {
selectedTool = self.toolType;
updateToolSelection();
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x87ceeb
});
/****
* Game Code
****/
// Sound effects
// Hair section indicators
// UI elements
// Color palette
// Accessory assets
// Tool assets
// Character assets
// Game state variables
var currentCharacter;
var selectedTool = 'scissors';
var selectedColor = 0xff0000;
var tools = [];
var colorSwatches = [];
var isPhotoMode = false;
// Create character
currentCharacter = game.addChild(new Character());
currentCharacter.x = 1024;
currentCharacter.y = 1600;
// Create tool panel
var toolPanel = game.addChild(LK.getAsset('tool_panel', {
anchorX: 0.5,
anchorY: 0,
x: 1024,
y: 2400
}));
// Create color panel
var colorPanel = game.addChild(LK.getAsset('color_panel', {
anchorX: 0.5,
anchorY: 0,
x: 1024,
y: 2520
}));
// Create tools
var toolTypes = ['scissors', 'spray_paint', 'braiding_wand', 'camera'];
var toolPositions = [800, 950, 1100, 1250];
for (var i = 0; i < toolTypes.length; i++) {
var tool = game.addChild(new Tool(toolTypes[i]));
tool.x = toolPositions[i];
tool.y = 2500;
tools.push(tool);
}
// Create color swatches
var colorTypes = ['color_red', 'color_blue', 'color_green', 'color_purple', 'color_yellow', 'color_pink'];
var colorValues = [0xff0000, 0x0000ff, 0x00ff00, 0x800080, 0xffff00, 0xff69b4];
var colorPositions = [800, 880, 960, 1040, 1120, 1200];
for (var i = 0; i < colorTypes.length; i++) {
var swatch = game.addChild(new ColorSwatch(colorTypes[i], colorValues[i]));
swatch.x = colorPositions[i];
swatch.y = 2580;
colorSwatches.push(swatch);
}
// Instructions text
var instructionText = new Text2('Tap a tool, then tap on hair to style!', {
size: 60,
fill: 0x333333
});
instructionText.anchor.set(0.5, 0);
instructionText.x = 1024;
instructionText.y = 200;
game.addChild(instructionText);
// Initialize tool selection
function updateToolSelection() {
for (var i = 0; i < tools.length; i++) {
tools[i].setSelected(tools[i].toolType === selectedTool);
}
// Update instruction text
var instructions = {
'scissors': 'Tap hair sections to cut!',
'spray_paint': 'Choose a color and spray hair!',
'braiding_wand': 'Tap hair sections to braid!',
'camera': 'Tap to take a photo!'
};
instructionText.setText(instructions[selectedTool] || 'Select a tool!');
}
function updateColorSelection() {
for (var i = 0; i < colorSwatches.length; i++) {
colorSwatches[i].setSelected(colorSwatches[i].colorValue === selectedColor);
}
}
// Initialize selections
updateToolSelection();
updateColorSelection();
// Game interaction handlers
game.down = function (x, y, obj) {
// Handle hair section interactions
var hairSections = currentCharacter.getHairSections();
for (var i = 0; i < hairSections.length; i++) {
var section = hairSections[i];
var globalPos = section.parent.toGlobal(section.position);
var distance = Math.sqrt(Math.pow(x - globalPos.x, 2) + Math.pow(y - globalPos.y, 2));
if (distance < 60) {
handleHairSectionClick(section);
return;
}
}
// Handle camera tool special case
if (selectedTool === 'camera') {
takePhoto();
}
};
function handleHairSectionClick(section) {
switch (selectedTool) {
case 'scissors':
cutHair(section);
break;
case 'spray_paint':
colorHair(section);
break;
case 'braiding_wand':
braidHair(section);
break;
}
}
function cutHair(section) {
if (!section.isCut) {
section.isCut = true;
section.scaleY = 0.7;
section.y += 20;
// Play cutting sound
LK.getSound('snip').play();
// Add cutting animation
tween(section, {
scaleX: 0.8
}, {
duration: 200,
easing: tween.easeOut
});
}
}
function colorHair(section) {
section.tint = selectedColor;
currentCharacter.getHair().tint = selectedColor;
// Play spray sound
LK.getSound('spray').play();
// Add color animation
var originalScale = section.scaleX;
tween(section, {
scaleX: originalScale * 1.2,
scaleY: section.scaleY * 1.2
}, {
duration: 150,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(section, {
scaleX: originalScale,
scaleY: section.scaleY / 1.2
}, {
duration: 150,
easing: tween.easeIn
});
}
});
}
function braidHair(section) {
if (!section.isBraided) {
section.isBraided = true;
section.rotation = Math.PI / 8;
section.scaleX = 0.8;
// Add braiding animation
tween(section, {
rotation: -Math.PI / 8
}, {
duration: 300,
easing: tween.easeInOut,
onFinish: function onFinish() {
tween(section, {
rotation: Math.PI / 8
}, {
duration: 300,
easing: tween.easeInOut
});
}
});
}
}
function takePhoto() {
// Play camera sound
LK.getSound('camera_click').play();
// Flash effect
LK.effects.flashScreen(0xffffff, 300);
// Show photo taken message
var photoText = new Text2('Photo Saved!', {
size: 80,
fill: 0x00FF00
});
photoText.anchor.set(0.5, 0.5);
photoText.x = 1024;
photoText.y = 1000;
photoText.alpha = 0;
game.addChild(photoText);
// Animate photo text
tween(photoText, {
alpha: 1
}, {
duration: 300,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(photoText, {
alpha: 0
}, {
duration: 1000,
easing: tween.easeIn,
onFinish: function onFinish() {
photoText.destroy();
}
});
}
});
}
// Add some random accessories on character creation
LK.setTimeout(function () {
// Add a bow
currentCharacter.addAccessory('bow', 80, -220);
// Add clips
currentCharacter.addAccessory('clip', -100, -160);
currentCharacter.addAccessory('clip', 100, -160);
}, 1000);
game.update = function () {
// Gentle hair animation
var hair = currentCharacter.getHair();
hair.rotation = Math.sin(LK.ticks * 0.02) * 0.05;
// Animate hair sections gently
var hairSections = currentCharacter.getHairSections();
for (var i = 0; i < hairSections.length; i++) {
var section = hairSections[i];
if (!section.isBraided) {
section.rotation += Math.sin(LK.ticks * 0.01 + i) * 0.002;
}
}
};