/**** * Classes ****/ var ColorPalette = Container.expand(function () { var self = Container.call(this); // Available colors self.colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 0x000000, 0xffffff]; self.colorButtons = []; // Create color buttons for (var i = 0; i < self.colors.length; i++) { var colorButton = LK.getAsset('brush', { anchorX: 0.5, anchorY: 0.5, scaleX: 2, scaleY: 2 }); colorButton.tint = self.colors[i]; colorButton.x = 150 + i % 4 * 100; colorButton.y = 100 + Math.floor(i / 4) * 100; colorButton.colorIndex = i; // Add selection indicator colorButton.isSelected = i === 0; if (colorButton.isSelected) { colorButton.scaleX = 2.5; colorButton.scaleY = 2.5; } self.addChild(colorButton); self.colorButtons.push(colorButton); } self.down = function (x, y, obj) { var localPos = self.toLocal(obj.parent.toGlobal(obj.position)); // Check which color was clicked for (var i = 0; i < self.colorButtons.length; i++) { var button = self.colorButtons[i]; var dx = localPos.x - button.x; var dy = localPos.y - button.y; var distance = Math.sqrt(dx * dx + dy * dy); if (distance < 40) { // Deselect all buttons for (var j = 0; j < self.colorButtons.length; j++) { self.colorButtons[j].isSelected = false; self.colorButtons[j].scaleX = 2; self.colorButtons[j].scaleY = 2; } // Select clicked button button.isSelected = true; button.scaleX = 2.5; button.scaleY = 2.5; // Update canvas brush color if (drawingCanvas) { drawingCanvas.setBrushColor(self.colors[i]); } break; } } }; return self; }); // Set a light background for the art app var DrawingCanvas = Container.expand(function () { var self = Container.call(this); // Create canvas background var canvasBackground = self.attachAsset('canvas', { anchorX: 0, anchorY: 0 }); // Drawing state self.isDrawing = false; self.brushSize = 20; self.brushColor = 0xff0000; self.lastX = 0; self.lastY = 0; // Array to store drawn strokes self.strokes = []; self.startDrawing = function (x, y) { self.isDrawing = true; self.lastX = x; self.lastY = y; // Create new stroke var newStroke = []; newStroke.push({ x: x, y: y }); self.strokes.push(newStroke); // Draw initial point self.drawPoint(x, y); }; self.continueDrawing = function (x, y) { if (!self.isDrawing) return; // Add point to current stroke var currentStroke = self.strokes[self.strokes.length - 1]; currentStroke.push({ x: x, y: y }); // Draw line from last position to current self.drawLine(self.lastX, self.lastY, x, y); self.lastX = x; self.lastY = y; }; self.stopDrawing = function () { self.isDrawing = false; }; self.drawPoint = function (x, y) { var point = LK.getAsset('brush', { anchorX: 0.5, anchorY: 0.5, scaleX: self.brushSize / 20, scaleY: self.brushSize / 20 }); point.tint = self.brushColor; point.x = x; point.y = y; self.addChild(point); }; self.drawLine = function (x1, y1, x2, y2) { // Draw multiple points between start and end to create smooth line var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); var steps = Math.max(1, Math.floor(distance / 5)); for (var i = 0; i <= steps; i++) { var t = i / steps; var x = x1 + (x2 - x1) * t; var y = y1 + (y2 - y1) * t; self.drawPoint(x, y); } }; self.clearCanvas = function () { // Remove all drawn elements except canvas background for (var i = self.children.length - 1; i >= 1; i--) { self.children[i].destroy(); self.children.splice(i, 1); } self.strokes = []; }; self.setBrushSize = function (size) { self.brushSize = Math.max(5, Math.min(50, size)); }; self.setBrushColor = function (color) { self.brushColor = color; }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ // Set a light background for the art app // Canvas drawing assets game.setBackgroundColor(0xf0f0f0); // Create drawing canvas var drawingCanvas = game.addChild(new DrawingCanvas()); // Create color palette var colorPalette = game.addChild(new ColorPalette()); // Create UI elements var titleText = new Text2('Art Canvas', { size: 80, fill: 0x333333 }); titleText.anchor.set(0.5, 0); titleText.x = 2048 / 2; titleText.y = 20; game.addChild(titleText); // Create clear button var clearButton = LK.getAsset('canvas', { anchorX: 0.5, anchorY: 0.5, scaleX: 0.2, scaleY: 0.1 }); clearButton.tint = 0xcccccc; clearButton.x = 2048 - 200; clearButton.y = 150; game.addChild(clearButton); var clearText = new Text2('Clear', { size: 40, fill: 0x000000 }); clearText.anchor.set(0.5, 0.5); clearText.x = clearButton.x; clearText.y = clearButton.y; game.addChild(clearText); // Brush size controls var brushSizeText = new Text2('Brush Size: 20', { size: 50, fill: 0x333333 }); brushSizeText.anchor.set(0, 0); brushSizeText.x = 150; brushSizeText.y = 250; game.addChild(brushSizeText); // Size buttons var smallBrushButton = LK.getAsset('brush', { anchorX: 0.5, anchorY: 0.5, scaleX: 0.5, scaleY: 0.5 }); smallBrushButton.tint = 0x666666; smallBrushButton.x = 200; smallBrushButton.y = 350; game.addChild(smallBrushButton); var mediumBrushButton = LK.getAsset('brush', { anchorX: 0.5, anchorY: 0.5, scaleX: 1, scaleY: 1 }); mediumBrushButton.tint = 0x666666; mediumBrushButton.x = 300; mediumBrushButton.y = 350; game.addChild(mediumBrushButton); var largeBrushButton = LK.getAsset('brush', { anchorX: 0.5, anchorY: 0.5, scaleX: 2, scaleY: 2 }); largeBrushButton.tint = 0x666666; largeBrushButton.x = 400; largeBrushButton.y = 350; game.addChild(largeBrushButton); // Game event handlers game.down = function (x, y, obj) { // Check if clear button was pressed var dx = x - clearButton.x; var dy = y - clearButton.y; if (Math.abs(dx) < 100 && Math.abs(dy) < 30) { drawingCanvas.clearCanvas(); return; } // Check brush size buttons var smallDx = x - smallBrushButton.x; var smallDy = y - smallBrushButton.y; if (Math.sqrt(smallDx * smallDx + smallDy * smallDy) < 30) { drawingCanvas.setBrushSize(10); brushSizeText.setText('Brush Size: 10'); return; } var mediumDx = x - mediumBrushButton.x; var mediumDy = y - mediumBrushButton.y; if (Math.sqrt(mediumDx * mediumDx + mediumDy * mediumDy) < 30) { drawingCanvas.setBrushSize(20); brushSizeText.setText('Brush Size: 20'); return; } var largeDx = x - largeBrushButton.x; var largeDy = y - largeBrushButton.y; if (Math.sqrt(largeDx * largeDx + largeDy * largeDy) < 30) { drawingCanvas.setBrushSize(40); brushSizeText.setText('Brush Size: 40'); return; } // Start drawing on canvas (avoid drawing on UI area) if (y > 400) { drawingCanvas.startDrawing(x, y); } }; game.move = function (x, y, obj) { // Continue drawing if in canvas area if (y > 400) { drawingCanvas.continueDrawing(x, y); } }; game.up = function (x, y, obj) { drawingCanvas.stopDrawing(); };