User prompt
no se si es un bug o que pero hay una imagen negra que aumenta su opacidad y luego la disminuye, elimina eso, el texto: "terror paint draw if you dare" elimínalo gracias, también que todos los colores seleccionables sean diferentes entre si, también has que todas las brochas funciones como la de hacer un circulo, la de line y casi todas no funcionan, ARREGLALAS, gracias, y has que en si los botones estén un poco mas abajo y sean mas pequeños porque el botón de pausa interfiere con ellos.
User prompt
Please fix the bug: 'TypeError: Cannot use 'in' operator to search for 'rotation' in undefined' in or related to this line: 'tween(strokes[i], {' Line Number: 342 ↪💡 Consider importing and using the following plugins: @upit/tween.v1
Code edit (1 edits merged)
Please save this source code
User prompt
Terror Paint - Horror Drawing Nightmare
Initial prompt
quiero programar un juego estilo paint pero de terror, comenzemos primero por sus mecanicas estilo paint: Lápiz: dibujar trazos libres como si fuera a mano alzada. Pinceles: trazos con distintos grosores y estilos. Borrador: elimina parte del dibujo. Cubeta de relleno: rellena áreas cerradas con color. Línea, rectángulo, círculo y otras formas: permite dibujar figuras geométricas. Texto: insertar palabras con fuentes y tamaños. Selección: cortar, copiar, mover o redimensionar partes del dibujo. Colores: elegir color de trazo y de relleno. Zoom y recorte: ajustar la vista y cortar secciones de la imagen.
/**** * 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, tint: color, scaleX: size / 20, scaleY: size / 20 }); self.x = x; self.y = y; self.originalColor = color; self.corruptionLevel = 0; self.corrupt = function () { self.corruptionLevel += 0.1; if (self.corruptionLevel > 1) self.corruptionLevel = 1; var red = Math.floor(color >> 16 & 0xFF); var green = Math.floor(color >> 8 & 0xFF); var blue = Math.floor(color & 0xFF); red = Math.floor(red * (1 - self.corruptionLevel * 0.5)); green = Math.floor(green * (1 - self.corruptionLevel * 0.7)); blue = Math.floor(blue * (1 - self.corruptionLevel * 0.3)); var corruptedColor = red << 16 | green << 8 | blue; stroke.tint = corruptedColor; if (Math.random() < self.corruptionLevel * 0.1) { self.x += (Math.random() - 0.5) * 20; self.y += (Math.random() - 0.5) * 20; } }; return self; }); var ColorSwatch = Container.expand(function (color, x, y) { var self = Container.call(this); self.color = color; var swatch = self.attachAsset('colorSwatch', { anchorX: 0.5, anchorY: 0.5, tint: color }); self.x = x; self.y = y; self.down = function (x, y, obj) { currentColor = self.color; updateColorSelection(); }; return self; }); var DrawingTool = Container.expand(function (toolType, x, y) { var self = Container.call(this); self.toolType = toolType; self.isActive = false; var buttonBg = self.attachAsset('toolButton', { anchorX: 0.5, anchorY: 0.5 }); var toolLabel = new Text2(toolType, { size: 24, fill: 0xFFFFFF }); toolLabel.anchor.set(0.5, 0.5); self.addChild(toolLabel); self.x = x; self.y = y; self.setActive = function (active) { self.isActive = active; if (active) { buttonBg.tint = 0x666666; } else { buttonBg.tint = 0x333333; } }; self.down = function (x, y, obj) { currentTool = self.toolType; updateToolSelection(); }; return self; }); var HorrorEffect = Container.expand(function () { var self = Container.call(this); self.intensity = 0; var overlay = self.attachAsset('horrorOverlay', { anchorX: 0.5, anchorY: 0.5, alpha: 0 }); self.x = 1024; self.y = 1366; self.increaseIntensity = function () { self.intensity += 0.05; if (self.intensity > 1) self.intensity = 1; overlay.alpha = self.intensity * 0.3; overlay.tint = 0x330000; }; self.flashEffect = function () { tween(overlay, { alpha: 0.8 }, { duration: 200, onFinish: function onFinish() { tween(overlay, { alpha: self.intensity * 0.3 }, { duration: 300 }); } }); }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x222222 }); /**** * Game Code ****/ // Drawing canvas var drawingCanvas = game.addChild(LK.getAsset('canvas', { anchorX: 0.5, anchorY: 0.5, x: 1024, y: 900 })); // Tool palette var tools = ['Pen', 'Brush', 'Eraser', 'Fill', 'Line', 'Rect', 'Circle']; var toolButtons = []; var currentTool = 'Pen'; for (var i = 0; i < tools.length; i++) { var toolButton = new DrawingTool(tools[i], 150 + i * 140, 200); game.addChild(toolButton); toolButtons.push(toolButton); } // Color palette var colors = [0x000000, 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 0xffffff]; var colorSwatches = []; var currentColor = 0x000000; for (var j = 0; j < colors.length; j++) { var colorSwatch = new ColorSwatch(colors[j], 150 + j * 100, 350); game.addChild(colorSwatch); colorSwatches.push(colorSwatch); } // Drawing variables var isDrawing = false; var lastDrawX = 0; var lastDrawY = 0; var brushSize = 20; var strokes = []; var horrorTimer = 0; var corruptionTimer = 0; // Horror effects var horrorEffect = game.addChild(new HorrorEffect()); // UI Elements var titleText = new Text2('TERROR PAINT', { size: 60, fill: 0xFF0000 }); titleText.anchor.set(0.5, 0); titleText.x = 1024; titleText.y = 50; game.addChild(titleText); var instructionText = new Text2('Draw... if you dare', { size: 30, fill: 0xCCCCCC }); instructionText.anchor.set(0.5, 0); instructionText.x = 1024; instructionText.y = 120; game.addChild(instructionText); // Functions function updateToolSelection() { for (var i = 0; i < toolButtons.length; i++) { toolButtons[i].setActive(toolButtons[i].toolType === currentTool); } } function updateColorSelection() { // Visual feedback for color selection could be added here } function isPointInCanvas(x, y) { var canvasLeft = drawingCanvas.x - drawingCanvas.width * 0.5; var canvasRight = drawingCanvas.x + drawingCanvas.width * 0.5; var canvasTop = drawingCanvas.y - drawingCanvas.height * 0.5; var canvasBottom = drawingCanvas.y + drawingCanvas.height * 0.5; return x >= canvasLeft && x <= canvasRight && y >= canvasTop && y <= canvasBottom; } function addBrushStroke(x, y) { if (isPointInCanvas(x, y)) { var stroke = new BrushStroke(x, y, currentColor, brushSize); game.addChild(stroke); strokes.push(stroke); if (Math.random() < 0.3) { LK.getSound('drawSound').play(); } } } function corruptDrawing() { for (var i = 0; i < strokes.length; i++) { if (Math.random() < 0.1) { strokes[i].corrupt(); } } } function triggerHorrorEvent() { horrorEffect.increaseIntensity(); horrorEffect.flashEffect(); if (Math.random() < 0.5) { LK.getSound('horrorAmbient').play(); } // Randomly corrupt some strokes corruptDrawing(); // Change canvas tint slightly if (Math.random() < 0.3) { var tintAmount = 0.05; var currentTint = drawingCanvas.tint || 0xffffff; var red = Math.floor((currentTint >> 16 & 0xFF) * (1 - tintAmount)); var green = Math.floor((currentTint >> 8 & 0xFF) * (1 - tintAmount * 0.5)); var blue = Math.floor((currentTint & 0xFF) * (1 - tintAmount * 0.3)); drawingCanvas.tint = red << 16 | green << 8 | blue; } } // Initialize tool selection updateToolSelection(); // Event handlers game.down = function (x, y, obj) { if (isPointInCanvas(x, y)) { isDrawing = true; lastDrawX = x; lastDrawY = y; if (currentTool === 'Pen' || currentTool === 'Brush') { addBrushStroke(x, y); } else if (currentTool === 'Eraser') { // Find and remove nearby strokes for (var i = strokes.length - 1; i >= 0; i--) { var stroke = strokes[i]; var distance = Math.sqrt((stroke.x - x) * (stroke.x - x) + (stroke.y - y) * (stroke.y - y)); if (distance < brushSize) { stroke.destroy(); strokes.splice(i, 1); } } } } }; game.move = function (x, y, obj) { if (isDrawing && isPointInCanvas(x, y)) { if (currentTool === 'Pen' || currentTool === 'Brush') { // Draw line between last position and current position var distance = Math.sqrt((x - lastDrawX) * (x - lastDrawX) + (y - lastDrawY) * (y - lastDrawY)); var steps = Math.floor(distance / 10); for (var i = 0; i <= steps; i++) { var interpolatedX = lastDrawX + (x - lastDrawX) * (i / steps); var interpolatedY = lastDrawY + (y - lastDrawY) * (i / steps); addBrushStroke(interpolatedX, interpolatedY); } } else if (currentTool === 'Eraser') { // Continue erasing for (var j = strokes.length - 1; j >= 0; j--) { var stroke = strokes[j]; var distance = Math.sqrt((stroke.x - x) * (stroke.x - x) + (stroke.y - y) * (stroke.y - y)); if (distance < brushSize) { stroke.destroy(); strokes.splice(j, 1); } } } lastDrawX = x; lastDrawY = y; } }; game.up = function (x, y, obj) { isDrawing = false; }; // Start ambient music LK.setTimeout(function () { LK.playMusic('creepyMusic'); }, 2000); // Main game loop game.update = function () { horrorTimer++; corruptionTimer++; // Trigger horror events based on drawing activity and time if (horrorTimer > 300 && strokes.length > 10) { // 5 seconds at 60fps if (Math.random() < 0.02) { // 2% chance per frame triggerHorrorEvent(); horrorTimer = 0; } } // Gradual corruption over time if (corruptionTimer > 180 && strokes.length > 0) { // 3 seconds if (Math.random() < 0.01) { corruptDrawing(); corruptionTimer = 0; } } // Increase horror intensity based on number of strokes if (strokes.length > 50 && Math.random() < 0.005) { horrorEffect.increaseIntensity(); } // Make some strokes occasionally twitch for (var i = 0; i < strokes.length; i++) { if (strokes[i].corruptionLevel > 0.5 && Math.random() < 0.001) { tween(strokes[i], { rotation: (Math.random() - 0.5) * 0.2, scaleX: 1 + (Math.random() - 0.5) * 0.1, scaleY: 1 + (Math.random() - 0.5) * 0.1 }, { duration: 100, easing: tween.easeOut, onFinish: function onFinish() { tween(strokes[i], { rotation: 0, scaleX: 1, scaleY: 1 }, { duration: 200 }); } }); } } };
===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,336 @@
-/****
+/****
+* 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,
+ tint: color,
+ scaleX: size / 20,
+ scaleY: size / 20
+ });
+ self.x = x;
+ self.y = y;
+ self.originalColor = color;
+ self.corruptionLevel = 0;
+ self.corrupt = function () {
+ self.corruptionLevel += 0.1;
+ if (self.corruptionLevel > 1) self.corruptionLevel = 1;
+ var red = Math.floor(color >> 16 & 0xFF);
+ var green = Math.floor(color >> 8 & 0xFF);
+ var blue = Math.floor(color & 0xFF);
+ red = Math.floor(red * (1 - self.corruptionLevel * 0.5));
+ green = Math.floor(green * (1 - self.corruptionLevel * 0.7));
+ blue = Math.floor(blue * (1 - self.corruptionLevel * 0.3));
+ var corruptedColor = red << 16 | green << 8 | blue;
+ stroke.tint = corruptedColor;
+ if (Math.random() < self.corruptionLevel * 0.1) {
+ self.x += (Math.random() - 0.5) * 20;
+ self.y += (Math.random() - 0.5) * 20;
+ }
+ };
+ return self;
+});
+var ColorSwatch = Container.expand(function (color, x, y) {
+ var self = Container.call(this);
+ self.color = color;
+ var swatch = self.attachAsset('colorSwatch', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ tint: color
+ });
+ self.x = x;
+ self.y = y;
+ self.down = function (x, y, obj) {
+ currentColor = self.color;
+ updateColorSelection();
+ };
+ return self;
+});
+var DrawingTool = Container.expand(function (toolType, x, y) {
+ var self = Container.call(this);
+ self.toolType = toolType;
+ self.isActive = false;
+ var buttonBg = self.attachAsset('toolButton', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ var toolLabel = new Text2(toolType, {
+ size: 24,
+ fill: 0xFFFFFF
+ });
+ toolLabel.anchor.set(0.5, 0.5);
+ self.addChild(toolLabel);
+ self.x = x;
+ self.y = y;
+ self.setActive = function (active) {
+ self.isActive = active;
+ if (active) {
+ buttonBg.tint = 0x666666;
+ } else {
+ buttonBg.tint = 0x333333;
+ }
+ };
+ self.down = function (x, y, obj) {
+ currentTool = self.toolType;
+ updateToolSelection();
+ };
+ return self;
+});
+var HorrorEffect = Container.expand(function () {
+ var self = Container.call(this);
+ self.intensity = 0;
+ var overlay = self.attachAsset('horrorOverlay', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ alpha: 0
+ });
+ self.x = 1024;
+ self.y = 1366;
+ self.increaseIntensity = function () {
+ self.intensity += 0.05;
+ if (self.intensity > 1) self.intensity = 1;
+ overlay.alpha = self.intensity * 0.3;
+ overlay.tint = 0x330000;
+ };
+ self.flashEffect = function () {
+ tween(overlay, {
+ alpha: 0.8
+ }, {
+ duration: 200,
+ onFinish: function onFinish() {
+ tween(overlay, {
+ alpha: self.intensity * 0.3
+ }, {
+ duration: 300
+ });
+ }
+ });
+ };
+ return self;
+});
+
+/****
* Initialize Game
-****/
+****/
var game = new LK.Game({
- backgroundColor: 0x000000
-});
\ No newline at end of file
+ backgroundColor: 0x222222
+});
+
+/****
+* Game Code
+****/
+// Drawing canvas
+var drawingCanvas = game.addChild(LK.getAsset('canvas', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ x: 1024,
+ y: 900
+}));
+// Tool palette
+var tools = ['Pen', 'Brush', 'Eraser', 'Fill', 'Line', 'Rect', 'Circle'];
+var toolButtons = [];
+var currentTool = 'Pen';
+for (var i = 0; i < tools.length; i++) {
+ var toolButton = new DrawingTool(tools[i], 150 + i * 140, 200);
+ game.addChild(toolButton);
+ toolButtons.push(toolButton);
+}
+// Color palette
+var colors = [0x000000, 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 0xffffff];
+var colorSwatches = [];
+var currentColor = 0x000000;
+for (var j = 0; j < colors.length; j++) {
+ var colorSwatch = new ColorSwatch(colors[j], 150 + j * 100, 350);
+ game.addChild(colorSwatch);
+ colorSwatches.push(colorSwatch);
+}
+// Drawing variables
+var isDrawing = false;
+var lastDrawX = 0;
+var lastDrawY = 0;
+var brushSize = 20;
+var strokes = [];
+var horrorTimer = 0;
+var corruptionTimer = 0;
+// Horror effects
+var horrorEffect = game.addChild(new HorrorEffect());
+// UI Elements
+var titleText = new Text2('TERROR PAINT', {
+ size: 60,
+ fill: 0xFF0000
+});
+titleText.anchor.set(0.5, 0);
+titleText.x = 1024;
+titleText.y = 50;
+game.addChild(titleText);
+var instructionText = new Text2('Draw... if you dare', {
+ size: 30,
+ fill: 0xCCCCCC
+});
+instructionText.anchor.set(0.5, 0);
+instructionText.x = 1024;
+instructionText.y = 120;
+game.addChild(instructionText);
+// Functions
+function updateToolSelection() {
+ for (var i = 0; i < toolButtons.length; i++) {
+ toolButtons[i].setActive(toolButtons[i].toolType === currentTool);
+ }
+}
+function updateColorSelection() {
+ // Visual feedback for color selection could be added here
+}
+function isPointInCanvas(x, y) {
+ var canvasLeft = drawingCanvas.x - drawingCanvas.width * 0.5;
+ var canvasRight = drawingCanvas.x + drawingCanvas.width * 0.5;
+ var canvasTop = drawingCanvas.y - drawingCanvas.height * 0.5;
+ var canvasBottom = drawingCanvas.y + drawingCanvas.height * 0.5;
+ return x >= canvasLeft && x <= canvasRight && y >= canvasTop && y <= canvasBottom;
+}
+function addBrushStroke(x, y) {
+ if (isPointInCanvas(x, y)) {
+ var stroke = new BrushStroke(x, y, currentColor, brushSize);
+ game.addChild(stroke);
+ strokes.push(stroke);
+ if (Math.random() < 0.3) {
+ LK.getSound('drawSound').play();
+ }
+ }
+}
+function corruptDrawing() {
+ for (var i = 0; i < strokes.length; i++) {
+ if (Math.random() < 0.1) {
+ strokes[i].corrupt();
+ }
+ }
+}
+function triggerHorrorEvent() {
+ horrorEffect.increaseIntensity();
+ horrorEffect.flashEffect();
+ if (Math.random() < 0.5) {
+ LK.getSound('horrorAmbient').play();
+ }
+ // Randomly corrupt some strokes
+ corruptDrawing();
+ // Change canvas tint slightly
+ if (Math.random() < 0.3) {
+ var tintAmount = 0.05;
+ var currentTint = drawingCanvas.tint || 0xffffff;
+ var red = Math.floor((currentTint >> 16 & 0xFF) * (1 - tintAmount));
+ var green = Math.floor((currentTint >> 8 & 0xFF) * (1 - tintAmount * 0.5));
+ var blue = Math.floor((currentTint & 0xFF) * (1 - tintAmount * 0.3));
+ drawingCanvas.tint = red << 16 | green << 8 | blue;
+ }
+}
+// Initialize tool selection
+updateToolSelection();
+// Event handlers
+game.down = function (x, y, obj) {
+ if (isPointInCanvas(x, y)) {
+ isDrawing = true;
+ lastDrawX = x;
+ lastDrawY = y;
+ if (currentTool === 'Pen' || currentTool === 'Brush') {
+ addBrushStroke(x, y);
+ } else if (currentTool === 'Eraser') {
+ // Find and remove nearby strokes
+ for (var i = strokes.length - 1; i >= 0; i--) {
+ var stroke = strokes[i];
+ var distance = Math.sqrt((stroke.x - x) * (stroke.x - x) + (stroke.y - y) * (stroke.y - y));
+ if (distance < brushSize) {
+ stroke.destroy();
+ strokes.splice(i, 1);
+ }
+ }
+ }
+ }
+};
+game.move = function (x, y, obj) {
+ if (isDrawing && isPointInCanvas(x, y)) {
+ if (currentTool === 'Pen' || currentTool === 'Brush') {
+ // Draw line between last position and current position
+ var distance = Math.sqrt((x - lastDrawX) * (x - lastDrawX) + (y - lastDrawY) * (y - lastDrawY));
+ var steps = Math.floor(distance / 10);
+ for (var i = 0; i <= steps; i++) {
+ var interpolatedX = lastDrawX + (x - lastDrawX) * (i / steps);
+ var interpolatedY = lastDrawY + (y - lastDrawY) * (i / steps);
+ addBrushStroke(interpolatedX, interpolatedY);
+ }
+ } else if (currentTool === 'Eraser') {
+ // Continue erasing
+ for (var j = strokes.length - 1; j >= 0; j--) {
+ var stroke = strokes[j];
+ var distance = Math.sqrt((stroke.x - x) * (stroke.x - x) + (stroke.y - y) * (stroke.y - y));
+ if (distance < brushSize) {
+ stroke.destroy();
+ strokes.splice(j, 1);
+ }
+ }
+ }
+ lastDrawX = x;
+ lastDrawY = y;
+ }
+};
+game.up = function (x, y, obj) {
+ isDrawing = false;
+};
+// Start ambient music
+LK.setTimeout(function () {
+ LK.playMusic('creepyMusic');
+}, 2000);
+// Main game loop
+game.update = function () {
+ horrorTimer++;
+ corruptionTimer++;
+ // Trigger horror events based on drawing activity and time
+ if (horrorTimer > 300 && strokes.length > 10) {
+ // 5 seconds at 60fps
+ if (Math.random() < 0.02) {
+ // 2% chance per frame
+ triggerHorrorEvent();
+ horrorTimer = 0;
+ }
+ }
+ // Gradual corruption over time
+ if (corruptionTimer > 180 && strokes.length > 0) {
+ // 3 seconds
+ if (Math.random() < 0.01) {
+ corruptDrawing();
+ corruptionTimer = 0;
+ }
+ }
+ // Increase horror intensity based on number of strokes
+ if (strokes.length > 50 && Math.random() < 0.005) {
+ horrorEffect.increaseIntensity();
+ }
+ // Make some strokes occasionally twitch
+ for (var i = 0; i < strokes.length; i++) {
+ if (strokes[i].corruptionLevel > 0.5 && Math.random() < 0.001) {
+ tween(strokes[i], {
+ rotation: (Math.random() - 0.5) * 0.2,
+ scaleX: 1 + (Math.random() - 0.5) * 0.1,
+ scaleY: 1 + (Math.random() - 0.5) * 0.1
+ }, {
+ duration: 100,
+ easing: tween.easeOut,
+ onFinish: function onFinish() {
+ tween(strokes[i], {
+ rotation: 0,
+ scaleX: 1,
+ scaleY: 1
+ }, {
+ duration: 200
+ });
+ }
+ });
+ }
+ }
+};
\ No newline at end of file