User prompt
When pressing the palette asset, it changes colors from red, orange, yellow, green, blue, violet, and gray.
User prompt
Palette assets should be shown in the bottom of the Pixel asset
User prompt
Show palette 1, palette 2, palette 3, palette 4, palette 5, palette 6, and palette 7 to the game class
User prompt
Delete I'd palette
User prompt
Show all palette assets
User prompt
Add 7 assets for pallets
User prompt
Dragging added in Pixel asset
User prompt
Dragging when drawing
User prompt
Fix Bug: 'ReferenceError: currentColor is not defined' in this line: 'self.setColor(currentColor);' Line Number: 10
Initial prompt
Draw a Pixel Art
var currentColor = 0x000000; var Pixel = Container.expand(function () { var self = Container.call(this); var pixelGraphics = self.createAsset('pixel', 'Pixel Graphics', .5, .5); self.color = 0x000000; self.setColor = function (color) { self.color = color; pixelGraphics.tint = color; }; self.isDragging = false; self.on('down', function (obj) { self.setColor(currentColor); self.isDragging = true; }); self.on('up', function (obj) { self.isDragging = false; }); self.on('move', function (obj) { if (self.isDragging) { self.setColor(currentColor); } }); stage.on('move', function (obj) { if (self.isDragging) { self.setColor(currentColor); } }); stage.on('up', function (obj) { self.isDragging = false; }); }); var Palette = Container.expand(function () { var self = Container.call(this); self.createAsset('palette', 'Palette Graphics', .5, .5); self.on('down', function (obj) { currentColor = self.color; }); }); var Game = Container.expand(function () { var self = Container.call(this); var pixels = []; var gridSize = 50; var pixelSize = 2048 / gridSize; for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { var pixel = self.addChild(new Pixel()); pixel.x = i * pixelSize + pixelSize / 2; pixel.y = j * pixelSize + pixelSize / 2; pixels.push(pixel); } } var palette1 = self.addChild(new Palette()); palette1.x = 2048 / 2 - 3 * palette1.width; palette1.y = 2732 - palette1.height; var palette2 = self.addChild(new Palette()); palette2.x = 2048 / 2 - 2 * palette2.width; palette2.y = 2732 - palette2.height; var palette3 = self.addChild(new Palette()); palette3.x = 2048 / 2 - palette3.width; palette3.y = 2732 - palette3.height; var palette4 = self.addChild(new Palette()); palette4.x = 2048 / 2; palette4.y = 2732 - palette4.height; var palette5 = self.addChild(new Palette()); palette5.x = 2048 / 2 + palette5.width; palette5.y = 2732 - palette5.height; var palette6 = self.addChild(new Palette()); palette6.x = 2048 / 2 + 2 * palette6.width; palette6.y = 2732 - palette6.height; var palette7 = self.addChild(new Palette()); palette7.x = 2048 / 2 + 3 * palette7.width; palette7.y = 2732 - palette7.height; LK.on('tick', function () { pixels.forEach(function (pixel) { if (pixel.isDragging) { pixel.setColor(currentColor); } }); }); });
===================================================================
--- original.js
+++ change.js
@@ -28,8 +28,15 @@
stage.on('up', function (obj) {
self.isDragging = false;
});
});
+var Palette = Container.expand(function () {
+ var self = Container.call(this);
+ self.createAsset('palette', 'Palette Graphics', .5, .5);
+ self.on('down', function (obj) {
+ currentColor = self.color;
+ });
+});
var Game = Container.expand(function () {
var self = Container.call(this);
var pixels = [];
var gridSize = 50;
@@ -41,8 +48,29 @@
pixel.y = j * pixelSize + pixelSize / 2;
pixels.push(pixel);
}
}
+ var palette1 = self.addChild(new Palette());
+ palette1.x = 2048 / 2 - 3 * palette1.width;
+ palette1.y = 2732 - palette1.height;
+ var palette2 = self.addChild(new Palette());
+ palette2.x = 2048 / 2 - 2 * palette2.width;
+ palette2.y = 2732 - palette2.height;
+ var palette3 = self.addChild(new Palette());
+ palette3.x = 2048 / 2 - palette3.width;
+ palette3.y = 2732 - palette3.height;
+ var palette4 = self.addChild(new Palette());
+ palette4.x = 2048 / 2;
+ palette4.y = 2732 - palette4.height;
+ var palette5 = self.addChild(new Palette());
+ palette5.x = 2048 / 2 + palette5.width;
+ palette5.y = 2732 - palette5.height;
+ var palette6 = self.addChild(new Palette());
+ palette6.x = 2048 / 2 + 2 * palette6.width;
+ palette6.y = 2732 - palette6.height;
+ var palette7 = self.addChild(new Palette());
+ palette7.x = 2048 / 2 + 3 * palette7.width;
+ palette7.y = 2732 - palette7.height;
LK.on('tick', function () {
pixels.forEach(function (pixel) {
if (pixel.isDragging) {
pixel.setColor(currentColor);