User prompt
Fix Bug: 'Uncaught ReferenceError: palette is not defined' in this line: 'palette.x = 2048 / 2;' Line Number: 121
User prompt
Fix Bug: 'Uncaught ReferenceError: palette is not defined' in this line: 'palette.y = 2732 - palette.height / 2;' Line Number: 122
User prompt
Fix all bugs and fix what it needs to fix.
User prompt
Fix Bug: 'Uncaught TypeError: Cannot set properties of undefined (setting 'selectPaletteColor')' in this line: 'self.selectPaletteColor = function (color) {' Line Number: 78
User prompt
Fix Bug: 'Uncaught ReferenceError: palette is not defined' in this line: 'palette.on('down', function (obj) {' Line Number: 94
User prompt
Fix Bug: 'Uncaught ReferenceError: palette is not defined' in this line: 'pinkPalette.x = palette.x - palette.width / 2 - pinkPalette.width / 2;' Line Number: 106
User prompt
Fix Bug: 'Uncaught ReferenceError: palette is not defined' in this line: 'pinkPalette.y = palette.y;' Line Number: 107
User prompt
Add eraser asset and has the ability to erase palette blocks on pixel art.
User prompt
Place the eraser asset to the bottom right side of the screen.
User prompt
Migrate to the latest version of LK
===================================================================
--- original.js
+++ change.js
@@ -1,81 +1,99 @@
-var YellowPalette = Container.expand(function () {
+/****
+* Classes
+****/
+var BlackPalette = Container.expand(function () {
var self = Container.call(this);
- var paletteGraphics = self.createAsset('yellowPalette', 'Yellow Palette Graphics', .5, .5);
- self.colors = [0xFFFF00];
- self.on('down', function (obj) {
- var pos = obj.event.getLocalPosition(self);
+ var paletteGraphics = self.attachAsset('blackPalette', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ self.colors = [0x000000];
+ self.on('down', function (x, y, obj) {
+ var pos = self.toLocal(obj.global);
currentColor = self.colors[0];
});
});
-var PurplePalette = Container.expand(function () {
+var BluePalette = Container.expand(function () {
var self = Container.call(this);
- var paletteGraphics = self.createAsset('purplePalette', 'Purple Palette Graphics', .5, .5);
- self.colors = [0x800080];
- self.on('down', function (obj) {
- var pos = obj.event.getLocalPosition(self);
+ var paletteGraphics = self.attachAsset('bluePalette', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ self.colors = [0x0000FF];
+ self.on('down', function (x, y, obj) {
+ var pos = self.toLocal(obj.global);
currentColor = self.colors[0];
});
});
-var RedPalette = Container.expand(function () {
+var EraserPalette = Container.expand(function () {
var self = Container.call(this);
- var paletteGraphics = self.createAsset('redPalette', 'Red Palette Graphics', .5, .5);
- self.colors = [0xFF0000];
- self.on('down', function (obj) {
- var pos = obj.event.getLocalPosition(self);
- currentColor = self.colors[0];
+ var paletteGraphics = self.attachAsset('eraserPalette', {
+ anchorX: 0.5,
+ anchorY: 0.5
});
+ self.on('down', function (x, y, obj) {
+ currentColor = 0x000000;
+ self.isEraser = true;
+ });
+ self.on('up', function (x, y, obj) {
+ self.isEraser = false;
+ });
});
var GreenPalette = Container.expand(function () {
var self = Container.call(this);
- var paletteGraphics = self.createAsset('greenPalette', 'Green Palette Graphics', .5, .5);
+ var paletteGraphics = self.attachAsset('greenPalette', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
self.colors = [0x008000];
- self.on('down', function (obj) {
- var pos = obj.event.getLocalPosition(self);
+ self.on('down', function (x, y, obj) {
+ var pos = self.toLocal(obj.global);
currentColor = self.colors[0];
});
});
-var BlackPalette = Container.expand(function () {
+var Palette = Container.expand(function () {
var self = Container.call(this);
- var paletteGraphics = self.createAsset('blackPalette', 'Black Palette Graphics', .5, .5);
- self.colors = [0x000000];
- self.on('down', function (obj) {
- var pos = obj.event.getLocalPosition(self);
- currentColor = self.colors[0];
+ var paletteGraphics = self.attachAsset('palette', {
+ anchorX: 0.5,
+ anchorY: 0.5
});
-});
-var PinkPalette = Container.expand(function () {
- var self = Container.call(this);
- var paletteGraphics = self.createAsset('pinkPalette', 'Pink Palette Graphics', .5, .5);
- self.colors = [0xFFC0CB];
- self.on('down', function (obj) {
- var pos = obj.event.getLocalPosition(self);
- currentColor = self.colors[0];
+ self.colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF, 0xFFFFFF, 0x000000, 0x808080];
+ self.on('down', function (x, y, obj) {
+ self.isDragging = true;
+ var pos = self.toLocal(obj.global);
+ self.x = pos.x;
+ self.y = pos.y;
});
-});
-var EraserPalette = Container.expand(function () {
- var self = Container.call(this);
- var paletteGraphics = self.createAsset('eraserPalette', 'Eraser Palette Graphics', .5, .5);
- self.on('down', function (obj) {
- currentColor = 0x000000;
- self.isEraser = true;
+ self.on('move', function (x, y, obj) {
+ if (self.isDragging) {
+ var pos = self.parent.toLocal(obj.global);
+ self.x = pos.x;
+ self.y = pos.y;
+ }
});
- self.on('up', function (obj) {
- self.isEraser = false;
+ self.on('up', function (x, y, obj) {
+ self.isDragging = false;
});
});
-var BluePalette = Container.expand(function () {
+var PinkPalette = Container.expand(function () {
var self = Container.call(this);
- var paletteGraphics = self.createAsset('bluePalette', 'Blue Palette Graphics', .5, .5);
- self.colors = [0x0000FF];
- self.on('down', function (obj) {
- var pos = obj.event.getLocalPosition(self);
+ var paletteGraphics = self.attachAsset('pinkPalette', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ self.colors = [0xFFC0CB];
+ self.on('down', function (x, y, obj) {
+ var pos = self.toLocal(obj.global);
currentColor = self.colors[0];
});
});
var Pixel = Container.expand(function () {
var self = Container.call(this);
- var pixelGraphics = self.createAsset('pixel', 'Pixel Graphics', .5, .5);
+ var pixelGraphics = self.attachAsset('pixel', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
self.color = 0x000000;
self.setColor = function (color, isEraser) {
if (isEraser) {
self.color = 0x000000;
@@ -85,95 +103,118 @@
pixelGraphics.tint = color;
}
};
self.isDragging = false;
- self.on('down', function (obj) {
+ self.on('down', function (x, y, obj) {
self.setColor(currentColor);
self.isDragging = true;
});
- self.on('up', function (obj) {
+ self.on('up', function (x, y, obj) {
self.isDragging = false;
});
- self.on('move', function (obj) {
+ self.on('move', function (x, y, obj) {
if (self.isDragging) {
self.setColor(currentColor);
}
});
- stage.on('move', function (obj) {
+ game.on('move', function (x, y, obj) {
if (self.isDragging) {
self.setColor(currentColor);
}
});
- stage.on('up', function (obj) {
+ game.on('up', function (x, y, obj) {
self.isDragging = false;
});
});
-var Palette = Container.expand(function () {
+var PurplePalette = Container.expand(function () {
var self = Container.call(this);
- var paletteGraphics = self.createAsset('palette', 'Palette Graphics', .5, .5);
- self.colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF, 0xFFFFFF, 0x000000, 0x808080];
- self.on('down', function (obj) {
- self.isDragging = true;
- var pos = obj.event.getLocalPosition(self);
- self.x = pos.x;
- self.y = pos.y;
+ var paletteGraphics = self.attachAsset('purplePalette', {
+ anchorX: 0.5,
+ anchorY: 0.5
});
- self.on('move', function (obj) {
- if (self.isDragging) {
- var pos = obj.event.getLocalPosition(self.parent);
- self.x = pos.x;
- self.y = pos.y;
- }
+ self.colors = [0x800080];
+ self.on('down', function (x, y, obj) {
+ var pos = self.toLocal(obj.global);
+ currentColor = self.colors[0];
});
- self.on('up', function (obj) {
- self.isDragging = false;
+});
+var RedPalette = Container.expand(function () {
+ var self = Container.call(this);
+ var paletteGraphics = self.attachAsset('redPalette', {
+ anchorX: 0.5,
+ anchorY: 0.5
});
+ self.colors = [0xFF0000];
+ self.on('down', function (x, y, obj) {
+ var pos = self.toLocal(obj.global);
+ currentColor = self.colors[0];
+ });
});
-var currentColor = 0x000000;
-var Game = Container.expand(function () {
+var YellowPalette = Container.expand(function () {
var self = Container.call(this);
- var pixels = [];
- var palette = self.addChild(new Palette());
- palette.x = 2048 / 2;
- palette.y = 2732 - palette.height / 2;
- var pinkPalette = self.addChild(new PinkPalette());
- pinkPalette.x = palette.x - palette.width / 2 - pinkPalette.width / 2;
- pinkPalette.y = palette.y;
- var redPalette = self.addChild(new RedPalette());
- redPalette.x = pinkPalette.x;
- redPalette.y = pinkPalette.y - redPalette.height;
- var greenPalette = self.addChild(new GreenPalette());
- greenPalette.x = redPalette.x;
- greenPalette.y = redPalette.y - greenPalette.height;
- var bluePalette = self.addChild(new BluePalette());
- bluePalette.x = 2048 / 2;
- bluePalette.y = palette.y - bluePalette.height;
- var eraserPalette = self.addChild(new EraserPalette());
- eraserPalette.x = 2048 - eraserPalette.width / 2;
- eraserPalette.y = 2732 - eraserPalette.height / 2;
- var blackPalette = self.addChild(new BlackPalette());
- blackPalette.x = palette.x + palette.width / 2 + blackPalette.width / 2;
- blackPalette.y = palette.y;
- var yellowPalette = self.addChild(new YellowPalette());
- yellowPalette.x = blackPalette.x;
- yellowPalette.y = blackPalette.y - yellowPalette.height;
- var purplePalette = self.addChild(new PurplePalette());
- purplePalette.x = yellowPalette.x;
- purplePalette.y = yellowPalette.y - purplePalette.height;
- 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);
- }
- }
- LK.on('tick', function () {
- pixels.forEach(function (pixel) {
- if (pixel.isDragging) {
- pixel.setColor(currentColor, eraserPalette.isEraser);
- }
- });
+ var paletteGraphics = self.attachAsset('yellowPalette', {
+ anchorX: 0.5,
+ anchorY: 0.5
});
+ self.colors = [0xFFFF00];
+ self.on('down', function (x, y, obj) {
+ var pos = self.toLocal(obj.global);
+ currentColor = self.colors[0];
+ });
});
+
+/****
+* Initialize Game
+****/
+var game = new LK.Game({
+ backgroundColor: 0x000000
+});
+
+/****
+* Game Code
+****/
+var currentColor = 0x000000;
+var pixels = [];
+var palette = game.addChild(new Palette());
+palette.x = 2048 / 2;
+palette.y = 2732 - palette.height / 2;
+var pinkPalette = game.addChild(new PinkPalette());
+pinkPalette.x = palette.x - palette.width / 2 - pinkPalette.width / 2;
+pinkPalette.y = palette.y;
+var redPalette = game.addChild(new RedPalette());
+redPalette.x = pinkPalette.x;
+redPalette.y = pinkPalette.y - redPalette.height;
+var greenPalette = game.addChild(new GreenPalette());
+greenPalette.x = redPalette.x;
+greenPalette.y = redPalette.y - greenPalette.height;
+var bluePalette = game.addChild(new BluePalette());
+bluePalette.x = 2048 / 2;
+bluePalette.y = palette.y - bluePalette.height;
+var eraserPalette = game.addChild(new EraserPalette());
+eraserPalette.x = 2048 - eraserPalette.width / 2;
+eraserPalette.y = 2732 - eraserPalette.height / 2;
+var blackPalette = game.addChild(new BlackPalette());
+blackPalette.x = palette.x + palette.width / 2 + blackPalette.width / 2;
+blackPalette.y = palette.y;
+var yellowPalette = game.addChild(new YellowPalette());
+yellowPalette.x = blackPalette.x;
+yellowPalette.y = blackPalette.y - yellowPalette.height;
+var purplePalette = game.addChild(new PurplePalette());
+purplePalette.x = yellowPalette.x;
+purplePalette.y = yellowPalette.y - purplePalette.height;
+var gridSize = 50;
+var pixelSize = 2048 / gridSize;
+for (var i = 0; i < gridSize; i++) {
+ for (var j = 0; j < gridSize; j++) {
+ var pixel = game.addChild(new Pixel());
+ pixel.x = i * pixelSize + pixelSize / 2;
+ pixel.y = j * pixelSize + pixelSize / 2;
+ pixels.push(pixel);
+ }
+}
+LK.on('tick', function () {
+ pixels.forEach(function (pixel) {
+ if (pixel.isDragging) {
+ pixel.setColor(currentColor, eraserPalette.isEraser);
+ }
+ });
+});
\ No newline at end of file