/**** * Classes ****/ var BrushButton = Container.expand(function (size, asset) { var self = Container.call(this); var button = self.attachAsset(asset, { anchorX: 0.5, anchorY: 0.5 }); self.size = size; self.down = function () { currentBrushSize = self.size; updateBrushPreview(); }; return self; }); var ColorButton = Container.expand(function (color) { var self = Container.call(this); var button = self.attachAsset('colorButton', { anchorX: 0.5, anchorY: 0.5 }); button.tint = color; self.color = color; self.down = function () { currentColor = self.color; updateBrushPreview(); }; return self; }); var PaintDot = Container.expand(function (color, size) { var self = Container.call(this); var dot = self.attachAsset('paintDot', { anchorX: 0.5, anchorY: 0.5, scaleX: size / 20, scaleY: size / 20 }); dot.tint = color; return self; }); var ToolButton = Container.expand(function (label, action) { var self = Container.call(this); var button = self.attachAsset('toolButton', { anchorX: 0.5, anchorY: 0.5 }); var text = new Text2(label, { size: 24, fill: 0xFFFFFF }); text.anchor.set(0.5, 0.5); self.addChild(text); self.action = action; self.down = function () { self.action(); }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0xf0f0f0 }); /**** * Game Code ****/ // Game state var isPainting = false; var currentColor = 0x000000; var currentBrushSize = 20; var paintingMode = true; var isErasing = false; var currentPaintingDots = []; var lastPaintX = null; var lastPaintY = null; // Canvas setup - made larger var canvas = game.addChild(LK.getAsset('canvas', { anchorX: 0.5, anchorY: 0.5, x: 1024, y: 800 })); // Scale up the canvas to make it larger canvas.scaleX = 1.3; canvas.scaleY = 1.3; // Brush size buttons - moved down var brushSizes = [{ size: 15, asset: 'brushSmall' }, { size: 30, asset: 'brushMedium' }, { size: 45, asset: 'brushLarge' }]; var brushButtons = []; var brushSpacing = 400; var brushStartX = 1024 - (brushSizes.length - 1) * brushSpacing / 2; for (var i = 0; i < brushSizes.length; i++) { var brushBtn = new BrushButton(brushSizes[i].size, brushSizes[i].asset); brushBtn.x = brushStartX + i * brushSpacing; brushBtn.y = 2100; brushBtn.scaleX = 4.0; brushBtn.scaleY = 4.0; game.addChild(brushBtn); brushButtons.push(brushBtn); } // Individual tool buttons - separated with more spacing var buttonSpacing = 350; var totalButtons = 2; var totalWidth = (totalButtons - 1) * buttonSpacing; var startX = 1024 - totalWidth / 2; // Clear button var clearBtn = new ToolButton('Clear', function () { clearCanvas(); }); clearBtn.x = startX + 0 * buttonSpacing; clearBtn.y = 2580; clearBtn.scaleX = 3.5; clearBtn.scaleY = 3.5; game.addChild(clearBtn); // Erase button var eraseBtn = new ToolButton('Erase', function () { toggleEraser(); }); eraseBtn.x = startX + 1 * buttonSpacing; eraseBtn.y = 2580; eraseBtn.scaleX = 3.5; eraseBtn.scaleY = 3.5; game.addChild(eraseBtn); // Brush preview var brushPreview = game.addChild(LK.getAsset('brushSmall', { anchorX: 0.5, anchorY: 0.5, x: 1900, y: 2200 })); function updateBrushPreview() { brushPreview.tint = isErasing ? 0xff0000 : currentColor; brushPreview.scaleX = currentBrushSize / 20; brushPreview.scaleY = currentBrushSize / 20; } function clearCanvas() { // Remove all paint dots from canvas for (var i = canvas.children.length - 1; i >= 0; i--) { var child = canvas.children[i]; if (child instanceof PaintDot) { canvas.removeChild(child); } } currentPaintingDots = []; } function toggleEraser() { isErasing = !isErasing; updateBrushPreview(); } function paintAt(x, y) { var localPos = canvas.toLocal({ x: x, y: y }); // Check if within canvas bounds - updated for larger canvas if (localPos.x < -1170 || localPos.x > 1170 || localPos.y < -910 || localPos.y > 910) { return; } if (isErasing) { // Remove dots near the eraser position for (var i = canvas.children.length - 1; i >= 0; i--) { var child = canvas.children[i]; if (child instanceof PaintDot) { var dx = child.x - localPos.x; var dy = child.y - localPos.y; var distance = Math.sqrt(dx * dx + dy * dy); if (distance < currentBrushSize) { canvas.removeChild(child); // Remove from currentPaintingDots array for (var j = currentPaintingDots.length - 1; j >= 0; j--) { var dot = currentPaintingDots[j]; if (Math.abs(dot.x - localPos.x) < 5 && Math.abs(dot.y - localPos.y) < 5) { currentPaintingDots.splice(j, 1); break; } } } } } } else { // Draw line from last position to current position if (lastPaintX !== null && lastPaintY !== null) { // Calculate distance between points var dx = localPos.x - lastPaintX; var dy = localPos.y - lastPaintY; var distance = Math.sqrt(dx * dx + dy * dy); // Draw dots along the line to create smooth stroke var steps = Math.max(1, Math.floor(distance / (currentBrushSize * 0.3))); for (var i = 0; i <= steps; i++) { var t = i / steps; var x = lastPaintX + dx * t; var y = lastPaintY + dy * t; var dot = new PaintDot(currentColor, currentBrushSize); dot.x = x; dot.y = y; canvas.addChild(dot); currentPaintingDots.push({ x: x, y: y, color: currentColor, size: currentBrushSize }); } } else { // First dot var dot = new PaintDot(currentColor, currentBrushSize); dot.x = localPos.x; dot.y = localPos.y; canvas.addChild(dot); currentPaintingDots.push({ x: localPos.x, y: localPos.y, color: currentColor, size: currentBrushSize }); } // Update last paint position lastPaintX = localPos.x; lastPaintY = localPos.y; } } // Initialize brush preview updateBrushPreview(); // Start background music LK.playMusic('backgroundMusic'); game.down = function (x, y, obj) { isPainting = true; lastPaintX = null; lastPaintY = null; paintAt(x, y); }; game.up = function (x, y, obj) { isPainting = false; lastPaintX = null; lastPaintY = null; }; game.move = function (x, y, obj) { if (isPainting) { paintAt(x, y); } }; game.update = function () { // Game loop - nothing specific needed for painting };
/****
* Classes
****/
var BrushButton = Container.expand(function (size, asset) {
var self = Container.call(this);
var button = self.attachAsset(asset, {
anchorX: 0.5,
anchorY: 0.5
});
self.size = size;
self.down = function () {
currentBrushSize = self.size;
updateBrushPreview();
};
return self;
});
var ColorButton = Container.expand(function (color) {
var self = Container.call(this);
var button = self.attachAsset('colorButton', {
anchorX: 0.5,
anchorY: 0.5
});
button.tint = color;
self.color = color;
self.down = function () {
currentColor = self.color;
updateBrushPreview();
};
return self;
});
var PaintDot = Container.expand(function (color, size) {
var self = Container.call(this);
var dot = self.attachAsset('paintDot', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: size / 20,
scaleY: size / 20
});
dot.tint = color;
return self;
});
var ToolButton = Container.expand(function (label, action) {
var self = Container.call(this);
var button = self.attachAsset('toolButton', {
anchorX: 0.5,
anchorY: 0.5
});
var text = new Text2(label, {
size: 24,
fill: 0xFFFFFF
});
text.anchor.set(0.5, 0.5);
self.addChild(text);
self.action = action;
self.down = function () {
self.action();
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xf0f0f0
});
/****
* Game Code
****/
// Game state
var isPainting = false;
var currentColor = 0x000000;
var currentBrushSize = 20;
var paintingMode = true;
var isErasing = false;
var currentPaintingDots = [];
var lastPaintX = null;
var lastPaintY = null;
// Canvas setup - made larger
var canvas = game.addChild(LK.getAsset('canvas', {
anchorX: 0.5,
anchorY: 0.5,
x: 1024,
y: 800
}));
// Scale up the canvas to make it larger
canvas.scaleX = 1.3;
canvas.scaleY = 1.3;
// Brush size buttons - moved down
var brushSizes = [{
size: 15,
asset: 'brushSmall'
}, {
size: 30,
asset: 'brushMedium'
}, {
size: 45,
asset: 'brushLarge'
}];
var brushButtons = [];
var brushSpacing = 400;
var brushStartX = 1024 - (brushSizes.length - 1) * brushSpacing / 2;
for (var i = 0; i < brushSizes.length; i++) {
var brushBtn = new BrushButton(brushSizes[i].size, brushSizes[i].asset);
brushBtn.x = brushStartX + i * brushSpacing;
brushBtn.y = 2100;
brushBtn.scaleX = 4.0;
brushBtn.scaleY = 4.0;
game.addChild(brushBtn);
brushButtons.push(brushBtn);
}
// Individual tool buttons - separated with more spacing
var buttonSpacing = 350;
var totalButtons = 2;
var totalWidth = (totalButtons - 1) * buttonSpacing;
var startX = 1024 - totalWidth / 2;
// Clear button
var clearBtn = new ToolButton('Clear', function () {
clearCanvas();
});
clearBtn.x = startX + 0 * buttonSpacing;
clearBtn.y = 2580;
clearBtn.scaleX = 3.5;
clearBtn.scaleY = 3.5;
game.addChild(clearBtn);
// Erase button
var eraseBtn = new ToolButton('Erase', function () {
toggleEraser();
});
eraseBtn.x = startX + 1 * buttonSpacing;
eraseBtn.y = 2580;
eraseBtn.scaleX = 3.5;
eraseBtn.scaleY = 3.5;
game.addChild(eraseBtn);
// Brush preview
var brushPreview = game.addChild(LK.getAsset('brushSmall', {
anchorX: 0.5,
anchorY: 0.5,
x: 1900,
y: 2200
}));
function updateBrushPreview() {
brushPreview.tint = isErasing ? 0xff0000 : currentColor;
brushPreview.scaleX = currentBrushSize / 20;
brushPreview.scaleY = currentBrushSize / 20;
}
function clearCanvas() {
// Remove all paint dots from canvas
for (var i = canvas.children.length - 1; i >= 0; i--) {
var child = canvas.children[i];
if (child instanceof PaintDot) {
canvas.removeChild(child);
}
}
currentPaintingDots = [];
}
function toggleEraser() {
isErasing = !isErasing;
updateBrushPreview();
}
function paintAt(x, y) {
var localPos = canvas.toLocal({
x: x,
y: y
});
// Check if within canvas bounds - updated for larger canvas
if (localPos.x < -1170 || localPos.x > 1170 || localPos.y < -910 || localPos.y > 910) {
return;
}
if (isErasing) {
// Remove dots near the eraser position
for (var i = canvas.children.length - 1; i >= 0; i--) {
var child = canvas.children[i];
if (child instanceof PaintDot) {
var dx = child.x - localPos.x;
var dy = child.y - localPos.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance < currentBrushSize) {
canvas.removeChild(child);
// Remove from currentPaintingDots array
for (var j = currentPaintingDots.length - 1; j >= 0; j--) {
var dot = currentPaintingDots[j];
if (Math.abs(dot.x - localPos.x) < 5 && Math.abs(dot.y - localPos.y) < 5) {
currentPaintingDots.splice(j, 1);
break;
}
}
}
}
}
} else {
// Draw line from last position to current position
if (lastPaintX !== null && lastPaintY !== null) {
// Calculate distance between points
var dx = localPos.x - lastPaintX;
var dy = localPos.y - lastPaintY;
var distance = Math.sqrt(dx * dx + dy * dy);
// Draw dots along the line to create smooth stroke
var steps = Math.max(1, Math.floor(distance / (currentBrushSize * 0.3)));
for (var i = 0; i <= steps; i++) {
var t = i / steps;
var x = lastPaintX + dx * t;
var y = lastPaintY + dy * t;
var dot = new PaintDot(currentColor, currentBrushSize);
dot.x = x;
dot.y = y;
canvas.addChild(dot);
currentPaintingDots.push({
x: x,
y: y,
color: currentColor,
size: currentBrushSize
});
}
} else {
// First dot
var dot = new PaintDot(currentColor, currentBrushSize);
dot.x = localPos.x;
dot.y = localPos.y;
canvas.addChild(dot);
currentPaintingDots.push({
x: localPos.x,
y: localPos.y,
color: currentColor,
size: currentBrushSize
});
}
// Update last paint position
lastPaintX = localPos.x;
lastPaintY = localPos.y;
}
}
// Initialize brush preview
updateBrushPreview();
// Start background music
LK.playMusic('backgroundMusic');
game.down = function (x, y, obj) {
isPainting = true;
lastPaintX = null;
lastPaintY = null;
paintAt(x, y);
};
game.up = function (x, y, obj) {
isPainting = false;
lastPaintX = null;
lastPaintY = null;
};
game.move = function (x, y, obj) {
if (isPainting) {
paintAt(x, y);
}
};
game.update = function () {
// Game loop - nothing specific needed for painting
};