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 } };
===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,350 @@
-/****
+/****
+* 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: 0x000000
-});
\ No newline at end of file
+ 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
+ }
+};
\ No newline at end of file