Code edit (1 edits merged)
Please save this source code
User prompt
Hair Salon Studio
Initial prompt
Toca hair salon you (2011). Take a photo of you being a character, tap on any tool to get started, tap on the colored spray paint to color your hair, tap on any accessory onto your hair, tap on the camera to take a photo.
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var facekit = LK.import("@upit/facekit.v1");
/****
* Classes
****/
var Accessory = Container.expand(function (accessoryType, x, y) {
var self = Container.call(this);
self.accessoryType = accessoryType;
self.isDragging = false;
var accessoryGraphics = self.attachAsset(accessoryType, {
anchorX: 0.5,
anchorY: 0.5
});
self.x = x;
self.y = y;
self.down = function (x, y, obj) {
self.isDragging = true;
draggedAccessory = self;
tween(accessoryGraphics, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 150
});
};
self.up = function (x, y, obj) {
self.isDragging = false;
draggedAccessory = null;
tween(accessoryGraphics, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 150
});
};
return self;
});
var ColorSwatch = Container.expand(function (colorName, colorValue) {
var self = Container.call(this);
self.colorName = colorName;
self.colorValue = colorValue;
var colorGraphics = self.attachAsset(colorName, {
anchorX: 0.5,
anchorY: 0.5
});
self.down = function (x, y, obj) {
currentColor = self.colorValue;
LK.getSound('click').play();
// Visual feedback
tween(colorGraphics, {
scaleX: 1.3,
scaleY: 1.3
}, {
duration: 100,
onFinish: function onFinish() {
tween(colorGraphics, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 100
});
}
});
};
return self;
});
var CutEffect = Container.expand(function (x, y) {
var self = Container.call(this);
var cutGraphics = self.attachAsset('cutEffect', {
anchorX: 0.5,
anchorY: 0.5
});
self.x = x;
self.y = y;
self.alpha = 1.0;
self.update = function () {
self.alpha -= 0.05;
cutGraphics.scaleX += 0.1;
cutGraphics.scaleY += 0.1;
if (self.alpha <= 0) {
self.destroy();
var index = cutEffects.indexOf(self);
if (index > -1) {
cutEffects.splice(index, 1);
}
}
};
return self;
});
var HairSpray = Container.expand(function (x, y, color) {
var self = Container.call(this);
var sprayGraphics = self.attachAsset('hairSpray', {
anchorX: 0.5,
anchorY: 0.5,
tint: color
});
self.x = x;
self.y = y;
self.alpha = 1.0;
self.update = function () {
self.alpha -= 0.02;
sprayGraphics.scaleX += 0.05;
sprayGraphics.scaleY += 0.05;
if (self.alpha <= 0) {
self.destroy();
var index = hairSprays.indexOf(self);
if (index > -1) {
hairSprays.splice(index, 1);
}
}
};
return self;
});
var Tool = Container.expand(function (toolType, color) {
var self = Container.call(this);
self.toolType = toolType;
self.isSelected = false;
var toolGraphics = self.attachAsset(toolType, {
anchorX: 0.5,
anchorY: 0.5
});
self.select = function () {
self.isSelected = true;
toolGraphics.alpha = 1.0;
tween(toolGraphics, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 200
});
};
self.deselect = function () {
self.isSelected = false;
toolGraphics.alpha = 0.7;
tween(toolGraphics, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 200
});
};
self.down = function (x, y, obj) {
currentTool = self.toolType;
selectTool(self);
LK.getSound('click').play();
};
// Initial state
self.deselect();
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xf0f0f0
});
/****
* Game Code
****/
// Sounds
// UI elements
// Accessories
// Color palette
// Styling tools
var currentTool = 'sprayPaint';
var currentColor = 0xff6b6b;
var tools = [];
var colorSwatches = [];
var accessories = [];
var hairSprays = [];
var cutEffects = [];
var draggedAccessory = null;
var isDrawing = false;
var lastSprayTime = 0;
// Create toolbar
var toolbar = game.addChild(LK.getAsset('toolbar', {
anchorX: 0,
anchorY: 1,
x: 0,
y: 2732
}));
// Create tools
var toolTypes = ['sprayPaint', 'scissors', 'brush', 'comb'];
for (var i = 0; i < toolTypes.length; i++) {
var tool = new Tool(toolTypes[i]);
tool.x = 150 + i * 120;
tool.y = 2732 - 75;
tools.push(tool);
game.addChild(tool);
}
// Create color palette
var colorPalette = game.addChild(LK.getAsset('colorPalette', {
anchorX: 0.5,
anchorY: 1,
x: 1024,
y: 2732
}));
// Create color swatches
var colors = [{
name: 'redColor',
value: 0xff0000
}, {
name: 'blueColor',
value: 0x0000ff
}, {
name: 'greenColor',
value: 0x00ff00
}, {
name: 'yellowColor',
value: 0xffff00
}, {
name: 'pinkColor',
value: 0xff69b4
}, {
name: 'purpleColor',
value: 0x9370db
}];
for (var i = 0; i < colors.length; i++) {
var colorSwatch = new ColorSwatch(colors[i].name, colors[i].value);
colorSwatch.x = 824 + i * 70;
colorSwatch.y = 2732 - 50;
colorSwatches.push(colorSwatch);
game.addChild(colorSwatch);
}
// Create camera button
var cameraButton = game.addChild(LK.getAsset('cameraButton', {
anchorX: 0.5,
anchorY: 0.5,
x: 1900,
y: 2732 - 75
}));
// Create some initial accessories
var accessoryTypes = ['bow', 'headband', 'clip', 'flower'];
for (var i = 0; i < accessoryTypes.length; i++) {
var accessory = new Accessory(accessoryTypes[i], 1700 + i * 100, 200 + i * 100);
accessories.push(accessory);
game.addChild(accessory);
}
// Select initial tool
function selectTool(selectedTool) {
for (var i = 0; i < tools.length; i++) {
tools[i].deselect();
}
selectedTool.select();
}
// Initialize with spray paint selected
selectTool(tools[0]);
// Instructions text
var instructionText = new Text2('Use your camera to style your hair! Tap tools to switch, colors to change, and accessories to place.', {
size: 40,
fill: 0x2C3E50
});
instructionText.anchor.set(0.5, 0);
instructionText.x = 1024;
instructionText.y = 50;
game.addChild(instructionText);
// Game interaction handlers
game.down = function (x, y, obj) {
isDrawing = true;
handleStyling(x, y);
};
game.move = function (x, y, obj) {
if (draggedAccessory) {
draggedAccessory.x = x;
draggedAccessory.y = y;
return;
}
if (isDrawing) {
handleStyling(x, y);
}
};
game.up = function (x, y, obj) {
isDrawing = false;
if (draggedAccessory) {
draggedAccessory.up(x, y, obj);
}
};
function handleStyling(x, y) {
// Don't style if clicking on toolbar area
if (y > 2580) return;
var currentTime = LK.ticks;
if (currentTool === 'sprayPaint') {
if (currentTime - lastSprayTime > 3) {
// Spray every 3 frames
var spray = new HairSpray(x, y, currentColor);
hairSprays.push(spray);
game.addChild(spray);
lastSprayTime = currentTime;
LK.getSound('spray').play();
}
} else if (currentTool === 'scissors') {
var cutEffect = new CutEffect(x, y);
cutEffects.push(cutEffect);
game.addChild(cutEffect);
LK.getSound('cut').play();
} else if (currentTool === 'brush' || currentTool === 'comb') {
// Create styling effect
var spray = new HairSpray(x, y, 0xffffff);
spray.alpha = 0.3;
hairSprays.push(spray);
game.addChild(spray);
}
}
// Camera button functionality
cameraButton.down = function (x, y, obj) {
LK.getSound('camera').play();
// Flash effect for photo
LK.effects.flashScreen(0xffffff, 300);
// Scale animation
tween(cameraButton, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 150,
onFinish: function onFinish() {
tween(cameraButton, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 150
});
}
});
};
// Main game update loop
game.update = function () {
// Update hair spray effects
for (var i = hairSprays.length - 1; i >= 0; i--) {
if (hairSprays[i] && hairSprays[i].update) {
hairSprays[i].update();
}
}
// Update cut effects
for (var i = cutEffects.length - 1; i >= 0; i--) {
if (cutEffects[i] && cutEffects[i].update) {
cutEffects[i].update();
}
}
// Use facekit to position elements relative to face
if (facekit && facekit.mouthCenter) {
// You can add face-relative positioning here
// For example, accessories could snap to face positions
}
}; /****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var facekit = LK.import("@upit/facekit.v1");
/****
* Classes
****/
var Accessory = Container.expand(function (accessoryType, x, y) {
var self = Container.call(this);
self.accessoryType = accessoryType;
self.isDragging = false;
var accessoryGraphics = self.attachAsset(accessoryType, {
anchorX: 0.5,
anchorY: 0.5
});
self.x = x;
self.y = y;
self.down = function (x, y, obj) {
self.isDragging = true;
draggedAccessory = self;
tween(accessoryGraphics, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 150
});
};
self.up = function (x, y, obj) {
self.isDragging = false;
draggedAccessory = null;
tween(accessoryGraphics, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 150
});
};
return self;
});
var ColorSwatch = Container.expand(function (colorName, colorValue) {
var self = Container.call(this);
self.colorName = colorName;
self.colorValue = colorValue;
var colorGraphics = self.attachAsset(colorName, {
anchorX: 0.5,
anchorY: 0.5
});
self.down = function (x, y, obj) {
currentColor = self.colorValue;
LK.getSound('click').play();
// Visual feedback
tween(colorGraphics, {
scaleX: 1.3,
scaleY: 1.3
}, {
duration: 100,
onFinish: function onFinish() {
tween(colorGraphics, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 100
});
}
});
};
return self;
});
var CutEffect = Container.expand(function (x, y) {
var self = Container.call(this);
var cutGraphics = self.attachAsset('cutEffect', {
anchorX: 0.5,
anchorY: 0.5
});
self.x = x;
self.y = y;
self.alpha = 1.0;
self.update = function () {
self.alpha -= 0.05;
cutGraphics.scaleX += 0.1;
cutGraphics.scaleY += 0.1;
if (self.alpha <= 0) {
self.destroy();
var index = cutEffects.indexOf(self);
if (index > -1) {
cutEffects.splice(index, 1);
}
}
};
return self;
});
var HairSpray = Container.expand(function (x, y, color) {
var self = Container.call(this);
var sprayGraphics = self.attachAsset('hairSpray', {
anchorX: 0.5,
anchorY: 0.5,
tint: color
});
self.x = x;
self.y = y;
self.alpha = 1.0;
self.update = function () {
self.alpha -= 0.02;
sprayGraphics.scaleX += 0.05;
sprayGraphics.scaleY += 0.05;
if (self.alpha <= 0) {
self.destroy();
var index = hairSprays.indexOf(self);
if (index > -1) {
hairSprays.splice(index, 1);
}
}
};
return self;
});
var Tool = Container.expand(function (toolType, color) {
var self = Container.call(this);
self.toolType = toolType;
self.isSelected = false;
var toolGraphics = self.attachAsset(toolType, {
anchorX: 0.5,
anchorY: 0.5
});
self.select = function () {
self.isSelected = true;
toolGraphics.alpha = 1.0;
tween(toolGraphics, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 200
});
};
self.deselect = function () {
self.isSelected = false;
toolGraphics.alpha = 0.7;
tween(toolGraphics, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 200
});
};
self.down = function (x, y, obj) {
currentTool = self.toolType;
selectTool(self);
LK.getSound('click').play();
};
// Initial state
self.deselect();
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xf0f0f0
});
/****
* Game Code
****/
// Sounds
// UI elements
// Accessories
// Color palette
// Styling tools
var currentTool = 'sprayPaint';
var currentColor = 0xff6b6b;
var tools = [];
var colorSwatches = [];
var accessories = [];
var hairSprays = [];
var cutEffects = [];
var draggedAccessory = null;
var isDrawing = false;
var lastSprayTime = 0;
// Create toolbar
var toolbar = game.addChild(LK.getAsset('toolbar', {
anchorX: 0,
anchorY: 1,
x: 0,
y: 2732
}));
// Create tools
var toolTypes = ['sprayPaint', 'scissors', 'brush', 'comb'];
for (var i = 0; i < toolTypes.length; i++) {
var tool = new Tool(toolTypes[i]);
tool.x = 150 + i * 120;
tool.y = 2732 - 75;
tools.push(tool);
game.addChild(tool);
}
// Create color palette
var colorPalette = game.addChild(LK.getAsset('colorPalette', {
anchorX: 0.5,
anchorY: 1,
x: 1024,
y: 2732
}));
// Create color swatches
var colors = [{
name: 'redColor',
value: 0xff0000
}, {
name: 'blueColor',
value: 0x0000ff
}, {
name: 'greenColor',
value: 0x00ff00
}, {
name: 'yellowColor',
value: 0xffff00
}, {
name: 'pinkColor',
value: 0xff69b4
}, {
name: 'purpleColor',
value: 0x9370db
}];
for (var i = 0; i < colors.length; i++) {
var colorSwatch = new ColorSwatch(colors[i].name, colors[i].value);
colorSwatch.x = 824 + i * 70;
colorSwatch.y = 2732 - 50;
colorSwatches.push(colorSwatch);
game.addChild(colorSwatch);
}
// Create camera button
var cameraButton = game.addChild(LK.getAsset('cameraButton', {
anchorX: 0.5,
anchorY: 0.5,
x: 1900,
y: 2732 - 75
}));
// Create some initial accessories
var accessoryTypes = ['bow', 'headband', 'clip', 'flower'];
for (var i = 0; i < accessoryTypes.length; i++) {
var accessory = new Accessory(accessoryTypes[i], 1700 + i * 100, 200 + i * 100);
accessories.push(accessory);
game.addChild(accessory);
}
// Select initial tool
function selectTool(selectedTool) {
for (var i = 0; i < tools.length; i++) {
tools[i].deselect();
}
selectedTool.select();
}
// Initialize with spray paint selected
selectTool(tools[0]);
// Instructions text
var instructionText = new Text2('Use your camera to style your hair! Tap tools to switch, colors to change, and accessories to place.', {
size: 40,
fill: 0x2C3E50
});
instructionText.anchor.set(0.5, 0);
instructionText.x = 1024;
instructionText.y = 50;
game.addChild(instructionText);
// Game interaction handlers
game.down = function (x, y, obj) {
isDrawing = true;
handleStyling(x, y);
};
game.move = function (x, y, obj) {
if (draggedAccessory) {
draggedAccessory.x = x;
draggedAccessory.y = y;
return;
}
if (isDrawing) {
handleStyling(x, y);
}
};
game.up = function (x, y, obj) {
isDrawing = false;
if (draggedAccessory) {
draggedAccessory.up(x, y, obj);
}
};
function handleStyling(x, y) {
// Don't style if clicking on toolbar area
if (y > 2580) return;
var currentTime = LK.ticks;
if (currentTool === 'sprayPaint') {
if (currentTime - lastSprayTime > 3) {
// Spray every 3 frames
var spray = new HairSpray(x, y, currentColor);
hairSprays.push(spray);
game.addChild(spray);
lastSprayTime = currentTime;
LK.getSound('spray').play();
}
} else if (currentTool === 'scissors') {
var cutEffect = new CutEffect(x, y);
cutEffects.push(cutEffect);
game.addChild(cutEffect);
LK.getSound('cut').play();
} else if (currentTool === 'brush' || currentTool === 'comb') {
// Create styling effect
var spray = new HairSpray(x, y, 0xffffff);
spray.alpha = 0.3;
hairSprays.push(spray);
game.addChild(spray);
}
}
// Camera button functionality
cameraButton.down = function (x, y, obj) {
LK.getSound('camera').play();
// Flash effect for photo
LK.effects.flashScreen(0xffffff, 300);
// Scale animation
tween(cameraButton, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 150,
onFinish: function onFinish() {
tween(cameraButton, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 150
});
}
});
};
// Main game update loop
game.update = function () {
// Update hair spray effects
for (var i = hairSprays.length - 1; i >= 0; i--) {
if (hairSprays[i] && hairSprays[i].update) {
hairSprays[i].update();
}
}
// Update cut effects
for (var i = cutEffects.length - 1; i >= 0; i--) {
if (cutEffects[i] && cutEffects[i].update) {
cutEffects[i].update();
}
}
// Use facekit to position elements relative to face
if (facekit && facekit.mouthCenter) {
// You can add face-relative positioning here
// For example, accessories could snap to face positions
}
};