/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); var storage = LK.import("@upit/storage.v1"); /**** * Classes ****/ var BrushStroke = Container.expand(function (x, y, color, size) { var self = Container.call(this); var stroke = self.attachAsset('brushStroke', { anchorX: 0.5, anchorY: 0.5, x: 0, y: 0 }); self.x = x; self.y = y; stroke.tint = color; self.setSize = function (newSize) { stroke.width = newSize; stroke.height = newSize; }; self.setSize(size); return self; }); var ColorButton = Container.expand(function (color, size, x, y) { var self = Container.call(this); var button = self.attachAsset('brushStroke', { anchorX: 0.5, anchorY: 0.5, x: 0, y: 0 }); button.tint = color; button.width = size; button.height = size; self.color = color; self.x = x; self.y = y; self.down = function () { tween(button, { width: size * 1.2, height: size * 1.2 }, { duration: 100, easing: tween.easeOut }); }; self.up = function () { tween(button, { width: size, height: size }, { duration: 100, easing: tween.easeOut }); }; return self; }); var SizeSlider = Container.expand(function (min, max, defaultValue, width, x, y) { var self = Container.call(this); self.min = min; self.max = max; self.value = defaultValue; var track = self.attachAsset('brushStroke', { anchorX: 0, anchorY: 0.5, x: 0, y: 0 }); track.tint = 0xDDDDDD; track.width = width; track.height = 10; var handle = self.attachAsset('brushStroke', { anchorX: 0.5, anchorY: 0.5, x: (defaultValue - min) / (max - min) * width, y: 0 }); handle.tint = 0x666666; handle.width = 30; handle.height = 30; var valueText = new Text2(defaultValue.toString(), { size: 24, fill: 0x000000 }); valueText.anchor.set(0.5, 0.5); valueText.y = -40; self.addChild(valueText); self.x = x; self.y = y; self.isDragging = false; self.setValue = function (newValue) { self.value = Math.max(self.min, Math.min(self.max, newValue)); handle.x = (self.value - self.min) / (self.max - self.min) * width; valueText.setText(Math.round(self.value).toString()); valueText.x = handle.x; }; self.getValueFromPosition = function (posX) { var normalizedPos = Math.max(0, Math.min(width, posX)); return self.min + normalizedPos / width * (self.max - self.min); }; self.down = function (x, y) { self.isDragging = true; self.setValue(self.getValueFromPosition(x)); }; self.up = function () { self.isDragging = false; }; self.move = function (x, y) { if (self.isDragging) { self.setValue(self.getValueFromPosition(x)); } }; return self; }); var ToolButton = Container.expand(function (icon, label, size, x, y) { var self = Container.call(this); var button = self.attachAsset('brushStroke', { anchorX: 0.5, anchorY: 0.5, x: 0, y: 0 }); button.tint = 0xDDDDDD; button.width = size; button.height = size; var text = new Text2(label, { size: size * 0.4, fill: 0x000000 }); text.anchor.set(0.5, 0.5); self.addChild(text); self.x = x; self.y = y; self.selected = false; self.setSelected = function (selected) { self.selected = selected; if (selected) { button.tint = 0x999999; } else { button.tint = 0xDDDDDD; } }; self.down = function () { tween(button, { width: size * 1.2, height: size * 1.2 }, { duration: 100, easing: tween.easeOut }); }; self.up = function () { tween(button, { width: size, height: size }, { duration: 100, easing: tween.easeOut }); }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0xFFFFFF }); /**** * Game Code ****/ // Constants and variables var CANVAS_WIDTH = 2048; var CANVAS_HEIGHT = 2732; var TOOLBAR_HEIGHT = 150; var PALETTE_SIZE = 80; var PALETTE_SPACING = 20; var PALETTE_Y = CANVAS_HEIGHT - TOOLBAR_HEIGHT / 2; var TOOL_SIZE = 80; var TOOL_SPACING = 20; var colors = [0x000000, 0xFFFFFF, 0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF, 0x996633, 0xFF9900]; var strokes = []; var colorButtons = []; var toolButtons = []; var currentColor = 0x000000; var currentSize = 20; var isDrawing = false; var lastX = 0; var lastY = 0; var currentTool = 'brush'; // 'brush' or 'eraser' // Canvas setup var canvas = new Container(); canvas.width = CANVAS_WIDTH; canvas.height = CANVAS_HEIGHT - TOOLBAR_HEIGHT; game.addChild(canvas); // Create toolbar background var toolbarBg = game.attachAsset('brushStroke', { anchorX: 0, anchorY: 0, x: 0, y: CANVAS_HEIGHT - TOOLBAR_HEIGHT }); toolbarBg.tint = 0xEEEEEE; toolbarBg.width = CANVAS_WIDTH; toolbarBg.height = TOOLBAR_HEIGHT; // Create cursor var cursor = game.attachAsset('cursor', { anchorX: 0.5, anchorY: 0.5, x: 0, y: 0 }); cursor.alpha = 0.5; cursor.width = currentSize; cursor.height = currentSize; cursor.tint = currentColor; // Create color palette for (var i = 0; i < colors.length; i++) { var x = 150 + (PALETTE_SIZE + PALETTE_SPACING) * i; var colorButton = new ColorButton(colors[i], PALETTE_SIZE, x, PALETTE_Y); colorButtons.push(colorButton); game.addChild(colorButton); } // Create tools var brushButton = new ToolButton('brush', 'BRUSH', TOOL_SIZE, CANVAS_WIDTH - 400, PALETTE_Y); brushButton.setSelected(true); toolButtons.push(brushButton); game.addChild(brushButton); var eraserButton = new ToolButton('eraser', 'ERASE', TOOL_SIZE, CANVAS_WIDTH - 300, PALETTE_Y); toolButtons.push(eraserButton); game.addChild(eraserButton); var clearButton = new ToolButton('clear', 'CLEAR', TOOL_SIZE, CANVAS_WIDTH - 200, PALETTE_Y); toolButtons.push(clearButton); game.addChild(clearButton); var saveButton = new ToolButton('save', 'SAVE', TOOL_SIZE, CANVAS_WIDTH - 100, PALETTE_Y); toolButtons.push(saveButton); game.addChild(saveButton); // Create size slider var sizeSlider = new SizeSlider(1, 100, 20, 400, 120, PALETTE_Y); game.addChild(sizeSlider); // Function to draw line between two points function drawLineBetween(startX, startY, endX, endY, color, size) { var distance = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2)); var angle = Math.atan2(endY - startY, endX - startX); var steps = Math.max(1, Math.floor(distance / (size / 4))); for (var i = 0; i <= steps; i++) { var x = startX + (endX - startX) * (i / steps); var y = startY + (endY - startY) * (i / steps); var stroke = new BrushStroke(x, y, color, size); canvas.addChild(stroke); strokes.push(stroke); } } // Function to check if a point is in toolbar area function isInToolbarArea(y) { return y > CANVAS_HEIGHT - TOOLBAR_HEIGHT; } // Function to clear the canvas function clearCanvas() { for (var i = strokes.length - 1; i >= 0; i--) { strokes[i].destroy(); } strokes = []; } // Function to save canvas (just displays message in this version) function saveCanvas() { var saveText = new Text2("Drawing Saved!", { size: 60, fill: 0x000000 }); saveText.anchor.set(0.5, 0.5); saveText.x = CANVAS_WIDTH / 2; saveText.y = CANVAS_HEIGHT / 2; game.addChild(saveText); LK.setTimeout(function () { saveText.destroy(); }, 2000); } // Event handlers function handleToolInteraction(x, y) { // Check color buttons for (var i = 0; i < colorButtons.length; i++) { var button = colorButtons[i]; if (Math.sqrt(Math.pow(x - button.x, 2) + Math.pow(y - button.y, 2)) < PALETTE_SIZE) { currentColor = button.color; cursor.tint = currentColor; return true; } } // Check tool buttons for (var i = 0; i < toolButtons.length; i++) { var button = toolButtons[i]; if (Math.sqrt(Math.pow(x - button.x, 2) + Math.pow(y - button.y, 2)) < TOOL_SIZE) { if (button === brushButton) { currentTool = 'brush'; cursor.tint = currentColor; brushButton.setSelected(true); eraserButton.setSelected(false); } else if (button === eraserButton) { currentTool = 'eraser'; cursor.tint = 0xFFFFFF; brushButton.setSelected(false); eraserButton.setSelected(true); } else if (button === clearButton) { clearCanvas(); } else if (button === saveButton) { saveCanvas(); } return true; } } // Check slider if (x >= sizeSlider.x && x <= sizeSlider.x + 400 && Math.abs(y - sizeSlider.y) < 50) { sizeSlider.down(x - sizeSlider.x, y - sizeSlider.y); currentSize = sizeSlider.value; cursor.width = currentSize; cursor.height = currentSize; return true; } return false; } game.down = function (x, y, obj) { if (isInToolbarArea(y)) { if (handleToolInteraction(x, y)) { return; } } else { isDrawing = true; lastX = x; lastY = y; // Create initial stroke if (currentTool === 'brush') { var stroke = new BrushStroke(x, y, currentColor, currentSize); canvas.addChild(stroke); strokes.push(stroke); LK.getSound('brushSound').play(); } else if (currentTool === 'eraser') { drawLineBetween(x, y, x, y, 0xFFFFFF, currentSize); LK.getSound('eraserSound').play(); } } }; game.up = function (x, y, obj) { isDrawing = false; // Release slider if it was being dragged sizeSlider.up(); }; game.move = function (x, y, obj) { // Update cursor position cursor.x = x; cursor.y = y; // Handle slider dragging if (sizeSlider.isDragging) { sizeSlider.move(x - sizeSlider.x, y - sizeSlider.y); currentSize = sizeSlider.value; cursor.width = currentSize; cursor.height = currentSize; return; } // Draw if we're in drawing mode if (isDrawing && !isInToolbarArea(y)) { if (currentTool === 'brush') { drawLineBetween(lastX, lastY, x, y, currentColor, currentSize); LK.getSound('brushSound').play(); } else if (currentTool === 'eraser') { drawLineBetween(lastX, lastY, x, y, 0xFFFFFF, currentSize); LK.getSound('eraserSound').play(); } lastX = x; lastY = y; } }; // Instructions text var instructionsText = new Text2("Draw on the canvas using the brush tool. Change colors and brush size using the toolbar.", { size: 30, fill: 0x666666 }); instructionsText.anchor.set(0.5, 0); instructionsText.x = CANVAS_WIDTH / 2; instructionsText.y = 20; game.addChild(instructionsText); // Play background music LK.playMusic('backgroundMusic', { fade: { start: 0, end: 0.5, duration: 1000 } }); // Set up game update game.update = function () { // Nothing needed here for a drawing app, as most functionality is event-driven };
===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,399 @@
-/****
+/****
+* Plugins
+****/
+var tween = LK.import("@upit/tween.v1");
+var storage = LK.import("@upit/storage.v1");
+
+/****
+* Classes
+****/
+var BrushStroke = Container.expand(function (x, y, color, size) {
+ var self = Container.call(this);
+ var stroke = self.attachAsset('brushStroke', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 0,
+ y: 0
+ });
+ self.x = x;
+ self.y = y;
+ stroke.tint = color;
+ self.setSize = function (newSize) {
+ stroke.width = newSize;
+ stroke.height = newSize;
+ };
+ self.setSize(size);
+ return self;
+});
+var ColorButton = Container.expand(function (color, size, x, y) {
+ var self = Container.call(this);
+ var button = self.attachAsset('brushStroke', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 0,
+ y: 0
+ });
+ button.tint = color;
+ button.width = size;
+ button.height = size;
+ self.color = color;
+ self.x = x;
+ self.y = y;
+ self.down = function () {
+ tween(button, {
+ width: size * 1.2,
+ height: size * 1.2
+ }, {
+ duration: 100,
+ easing: tween.easeOut
+ });
+ };
+ self.up = function () {
+ tween(button, {
+ width: size,
+ height: size
+ }, {
+ duration: 100,
+ easing: tween.easeOut
+ });
+ };
+ return self;
+});
+var SizeSlider = Container.expand(function (min, max, defaultValue, width, x, y) {
+ var self = Container.call(this);
+ self.min = min;
+ self.max = max;
+ self.value = defaultValue;
+ var track = self.attachAsset('brushStroke', {
+ anchorX: 0,
+ anchorY: 0.5,
+ x: 0,
+ y: 0
+ });
+ track.tint = 0xDDDDDD;
+ track.width = width;
+ track.height = 10;
+ var handle = self.attachAsset('brushStroke', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: (defaultValue - min) / (max - min) * width,
+ y: 0
+ });
+ handle.tint = 0x666666;
+ handle.width = 30;
+ handle.height = 30;
+ var valueText = new Text2(defaultValue.toString(), {
+ size: 24,
+ fill: 0x000000
+ });
+ valueText.anchor.set(0.5, 0.5);
+ valueText.y = -40;
+ self.addChild(valueText);
+ self.x = x;
+ self.y = y;
+ self.isDragging = false;
+ self.setValue = function (newValue) {
+ self.value = Math.max(self.min, Math.min(self.max, newValue));
+ handle.x = (self.value - self.min) / (self.max - self.min) * width;
+ valueText.setText(Math.round(self.value).toString());
+ valueText.x = handle.x;
+ };
+ self.getValueFromPosition = function (posX) {
+ var normalizedPos = Math.max(0, Math.min(width, posX));
+ return self.min + normalizedPos / width * (self.max - self.min);
+ };
+ self.down = function (x, y) {
+ self.isDragging = true;
+ self.setValue(self.getValueFromPosition(x));
+ };
+ self.up = function () {
+ self.isDragging = false;
+ };
+ self.move = function (x, y) {
+ if (self.isDragging) {
+ self.setValue(self.getValueFromPosition(x));
+ }
+ };
+ return self;
+});
+var ToolButton = Container.expand(function (icon, label, size, x, y) {
+ var self = Container.call(this);
+ var button = self.attachAsset('brushStroke', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 0,
+ y: 0
+ });
+ button.tint = 0xDDDDDD;
+ button.width = size;
+ button.height = size;
+ var text = new Text2(label, {
+ size: size * 0.4,
+ fill: 0x000000
+ });
+ text.anchor.set(0.5, 0.5);
+ self.addChild(text);
+ self.x = x;
+ self.y = y;
+ self.selected = false;
+ self.setSelected = function (selected) {
+ self.selected = selected;
+ if (selected) {
+ button.tint = 0x999999;
+ } else {
+ button.tint = 0xDDDDDD;
+ }
+ };
+ self.down = function () {
+ tween(button, {
+ width: size * 1.2,
+ height: size * 1.2
+ }, {
+ duration: 100,
+ easing: tween.easeOut
+ });
+ };
+ self.up = function () {
+ tween(button, {
+ width: size,
+ height: size
+ }, {
+ duration: 100,
+ easing: tween.easeOut
+ });
+ };
+ return self;
+});
+
+/****
* Initialize Game
-****/
+****/
var game = new LK.Game({
- backgroundColor: 0x000000
-});
\ No newline at end of file
+ backgroundColor: 0xFFFFFF
+});
+
+/****
+* Game Code
+****/
+// Constants and variables
+var CANVAS_WIDTH = 2048;
+var CANVAS_HEIGHT = 2732;
+var TOOLBAR_HEIGHT = 150;
+var PALETTE_SIZE = 80;
+var PALETTE_SPACING = 20;
+var PALETTE_Y = CANVAS_HEIGHT - TOOLBAR_HEIGHT / 2;
+var TOOL_SIZE = 80;
+var TOOL_SPACING = 20;
+var colors = [0x000000, 0xFFFFFF, 0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF, 0x996633, 0xFF9900];
+var strokes = [];
+var colorButtons = [];
+var toolButtons = [];
+var currentColor = 0x000000;
+var currentSize = 20;
+var isDrawing = false;
+var lastX = 0;
+var lastY = 0;
+var currentTool = 'brush'; // 'brush' or 'eraser'
+// Canvas setup
+var canvas = new Container();
+canvas.width = CANVAS_WIDTH;
+canvas.height = CANVAS_HEIGHT - TOOLBAR_HEIGHT;
+game.addChild(canvas);
+// Create toolbar background
+var toolbarBg = game.attachAsset('brushStroke', {
+ anchorX: 0,
+ anchorY: 0,
+ x: 0,
+ y: CANVAS_HEIGHT - TOOLBAR_HEIGHT
+});
+toolbarBg.tint = 0xEEEEEE;
+toolbarBg.width = CANVAS_WIDTH;
+toolbarBg.height = TOOLBAR_HEIGHT;
+// Create cursor
+var cursor = game.attachAsset('cursor', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 0,
+ y: 0
+});
+cursor.alpha = 0.5;
+cursor.width = currentSize;
+cursor.height = currentSize;
+cursor.tint = currentColor;
+// Create color palette
+for (var i = 0; i < colors.length; i++) {
+ var x = 150 + (PALETTE_SIZE + PALETTE_SPACING) * i;
+ var colorButton = new ColorButton(colors[i], PALETTE_SIZE, x, PALETTE_Y);
+ colorButtons.push(colorButton);
+ game.addChild(colorButton);
+}
+// Create tools
+var brushButton = new ToolButton('brush', 'BRUSH', TOOL_SIZE, CANVAS_WIDTH - 400, PALETTE_Y);
+brushButton.setSelected(true);
+toolButtons.push(brushButton);
+game.addChild(brushButton);
+var eraserButton = new ToolButton('eraser', 'ERASE', TOOL_SIZE, CANVAS_WIDTH - 300, PALETTE_Y);
+toolButtons.push(eraserButton);
+game.addChild(eraserButton);
+var clearButton = new ToolButton('clear', 'CLEAR', TOOL_SIZE, CANVAS_WIDTH - 200, PALETTE_Y);
+toolButtons.push(clearButton);
+game.addChild(clearButton);
+var saveButton = new ToolButton('save', 'SAVE', TOOL_SIZE, CANVAS_WIDTH - 100, PALETTE_Y);
+toolButtons.push(saveButton);
+game.addChild(saveButton);
+// Create size slider
+var sizeSlider = new SizeSlider(1, 100, 20, 400, 120, PALETTE_Y);
+game.addChild(sizeSlider);
+// Function to draw line between two points
+function drawLineBetween(startX, startY, endX, endY, color, size) {
+ var distance = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
+ var angle = Math.atan2(endY - startY, endX - startX);
+ var steps = Math.max(1, Math.floor(distance / (size / 4)));
+ for (var i = 0; i <= steps; i++) {
+ var x = startX + (endX - startX) * (i / steps);
+ var y = startY + (endY - startY) * (i / steps);
+ var stroke = new BrushStroke(x, y, color, size);
+ canvas.addChild(stroke);
+ strokes.push(stroke);
+ }
+}
+// Function to check if a point is in toolbar area
+function isInToolbarArea(y) {
+ return y > CANVAS_HEIGHT - TOOLBAR_HEIGHT;
+}
+// Function to clear the canvas
+function clearCanvas() {
+ for (var i = strokes.length - 1; i >= 0; i--) {
+ strokes[i].destroy();
+ }
+ strokes = [];
+}
+// Function to save canvas (just displays message in this version)
+function saveCanvas() {
+ var saveText = new Text2("Drawing Saved!", {
+ size: 60,
+ fill: 0x000000
+ });
+ saveText.anchor.set(0.5, 0.5);
+ saveText.x = CANVAS_WIDTH / 2;
+ saveText.y = CANVAS_HEIGHT / 2;
+ game.addChild(saveText);
+ LK.setTimeout(function () {
+ saveText.destroy();
+ }, 2000);
+}
+// Event handlers
+function handleToolInteraction(x, y) {
+ // Check color buttons
+ for (var i = 0; i < colorButtons.length; i++) {
+ var button = colorButtons[i];
+ if (Math.sqrt(Math.pow(x - button.x, 2) + Math.pow(y - button.y, 2)) < PALETTE_SIZE) {
+ currentColor = button.color;
+ cursor.tint = currentColor;
+ return true;
+ }
+ }
+ // Check tool buttons
+ for (var i = 0; i < toolButtons.length; i++) {
+ var button = toolButtons[i];
+ if (Math.sqrt(Math.pow(x - button.x, 2) + Math.pow(y - button.y, 2)) < TOOL_SIZE) {
+ if (button === brushButton) {
+ currentTool = 'brush';
+ cursor.tint = currentColor;
+ brushButton.setSelected(true);
+ eraserButton.setSelected(false);
+ } else if (button === eraserButton) {
+ currentTool = 'eraser';
+ cursor.tint = 0xFFFFFF;
+ brushButton.setSelected(false);
+ eraserButton.setSelected(true);
+ } else if (button === clearButton) {
+ clearCanvas();
+ } else if (button === saveButton) {
+ saveCanvas();
+ }
+ return true;
+ }
+ }
+ // Check slider
+ if (x >= sizeSlider.x && x <= sizeSlider.x + 400 && Math.abs(y - sizeSlider.y) < 50) {
+ sizeSlider.down(x - sizeSlider.x, y - sizeSlider.y);
+ currentSize = sizeSlider.value;
+ cursor.width = currentSize;
+ cursor.height = currentSize;
+ return true;
+ }
+ return false;
+}
+game.down = function (x, y, obj) {
+ if (isInToolbarArea(y)) {
+ if (handleToolInteraction(x, y)) {
+ return;
+ }
+ } else {
+ isDrawing = true;
+ lastX = x;
+ lastY = y;
+ // Create initial stroke
+ if (currentTool === 'brush') {
+ var stroke = new BrushStroke(x, y, currentColor, currentSize);
+ canvas.addChild(stroke);
+ strokes.push(stroke);
+ LK.getSound('brushSound').play();
+ } else if (currentTool === 'eraser') {
+ drawLineBetween(x, y, x, y, 0xFFFFFF, currentSize);
+ LK.getSound('eraserSound').play();
+ }
+ }
+};
+game.up = function (x, y, obj) {
+ isDrawing = false;
+ // Release slider if it was being dragged
+ sizeSlider.up();
+};
+game.move = function (x, y, obj) {
+ // Update cursor position
+ cursor.x = x;
+ cursor.y = y;
+ // Handle slider dragging
+ if (sizeSlider.isDragging) {
+ sizeSlider.move(x - sizeSlider.x, y - sizeSlider.y);
+ currentSize = sizeSlider.value;
+ cursor.width = currentSize;
+ cursor.height = currentSize;
+ return;
+ }
+ // Draw if we're in drawing mode
+ if (isDrawing && !isInToolbarArea(y)) {
+ if (currentTool === 'brush') {
+ drawLineBetween(lastX, lastY, x, y, currentColor, currentSize);
+ LK.getSound('brushSound').play();
+ } else if (currentTool === 'eraser') {
+ drawLineBetween(lastX, lastY, x, y, 0xFFFFFF, currentSize);
+ LK.getSound('eraserSound').play();
+ }
+ lastX = x;
+ lastY = y;
+ }
+};
+// Instructions text
+var instructionsText = new Text2("Draw on the canvas using the brush tool. Change colors and brush size using the toolbar.", {
+ size: 30,
+ fill: 0x666666
+});
+instructionsText.anchor.set(0.5, 0);
+instructionsText.x = CANVAS_WIDTH / 2;
+instructionsText.y = 20;
+game.addChild(instructionsText);
+// Play background music
+LK.playMusic('backgroundMusic', {
+ fade: {
+ start: 0,
+ end: 0.5,
+ duration: 1000
+ }
+});
+// Set up game update
+game.update = function () {
+ // Nothing needed here for a drawing app, as most functionality is event-driven
+};
\ No newline at end of file