Play
:quality(85)/https://cdn.frvr.ai/68a8f856920e15881d5f764a.png)
:quality(85)/https://cdn.frvr.ai/68a8f2fe920e15881d5f7648.png)
#HorrorGames
#DrawingGame
#DigitalArt
#SupernaturalHorror
#CreativeHorror
Creation History
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: 18,
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;
});
/****
* 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 * 100, 300);
game.addChild(toolButton);
toolButtons.push(toolButton);
}
// Color palette
var colors = [0x000000, 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff8000, 0x8000ff, 0xffffff];
var colorSwatches = [];
var currentColor = 0x000000;
for (var j = 0; j < colors.length; j++) {
var colorSwatch = new ColorSwatch(colors[j], 150 + j * 100, 420);
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;
var shapeStartX = 0;
var shapeStartY = 0;
var isDrawingShape = false;
// 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);
// 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)) {
if (currentTool === 'Line' || currentTool === 'Rect' || currentTool === 'Circle') {
isDrawingShape = true;
shapeStartX = x;
shapeStartY = y;
} else {
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);
}
}
} else if (currentTool === 'Fill') {
// Simple fill - add a larger brush stroke
var fillStroke = new BrushStroke(x, y, currentColor, brushSize * 3);
game.addChild(fillStroke);
strokes.push(fillStroke);
}
}
};
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) {
if (isDrawingShape && isPointInCanvas(x, y)) {
if (currentTool === 'Line') {
// Draw line from start to end
var distance = Math.sqrt((x - shapeStartX) * (x - shapeStartX) + (y - shapeStartY) * (y - shapeStartY));
var steps = Math.floor(distance / 5);
for (var i = 0; i <= steps; i++) {
var lineX = shapeStartX + (x - shapeStartX) * (i / steps);
var lineY = shapeStartY + (y - shapeStartY) * (i / steps);
var lineStroke = new BrushStroke(lineX, lineY, currentColor, brushSize);
game.addChild(lineStroke);
strokes.push(lineStroke);
}
} else if (currentTool === 'Rect') {
// Draw rectangle outline
var rectWidth = Math.abs(x - shapeStartX);
var rectHeight = Math.abs(y - shapeStartY);
var minX = Math.min(shapeStartX, x);
var minY = Math.min(shapeStartY, y);
// Top and bottom lines
for (var j = 0; j <= rectWidth; j += 10) {
var topStroke = new BrushStroke(minX + j, minY, currentColor, brushSize);
var bottomStroke = new BrushStroke(minX + j, minY + rectHeight, currentColor, brushSize);
game.addChild(topStroke);
game.addChild(bottomStroke);
strokes.push(topStroke);
strokes.push(bottomStroke);
}
// Left and right lines
for (var k = 0; k <= rectHeight; k += 10) {
var leftStroke = new BrushStroke(minX, minY + k, currentColor, brushSize);
var rightStroke = new BrushStroke(minX + rectWidth, minY + k, currentColor, brushSize);
game.addChild(leftStroke);
game.addChild(rightStroke);
strokes.push(leftStroke);
strokes.push(rightStroke);
}
} else if (currentTool === 'Circle') {
// Draw circle
var centerX = (shapeStartX + x) / 2;
var centerY = (shapeStartY + y) / 2;
var radius = Math.sqrt((x - shapeStartX) * (x - shapeStartX) + (y - shapeStartY) * (y - shapeStartY)) / 2;
var circumference = 2 * Math.PI * radius;
var steps = Math.floor(circumference / 8);
for (var l = 0; l < steps; l++) {
var angle = l / steps * 2 * Math.PI;
var circleX = centerX + Math.cos(angle) * radius;
var circleY = centerY + Math.sin(angle) * radius;
var circleStroke = new BrushStroke(circleX, circleY, currentColor, brushSize);
game.addChild(circleStroke);
strokes.push(circleStroke);
}
}
}
isDrawing = false;
isDrawingShape = 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;
}
}
// Make some strokes occasionally twitch
for (var i = 0; i < strokes.length; i++) {
if (strokes[i].corruptionLevel > 0.5 && Math.random() < 0.001) {
var currentStroke = strokes[i];
tween(currentStroke, {
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(currentStroke, {
rotation: 0,
scaleX: 1,
scaleY: 1
}, {
duration: 200
});
}
});
}
}
}; ===================================================================
--- original.js
+++ change.js
@@ -62,9 +62,9 @@
anchorX: 0.5,
anchorY: 0.5
});
var toolLabel = new Text2(toolType, {
- size: 24,
+ size: 18,
fill: 0xFFFFFF
});
toolLabel.anchor.set(0.5, 0.5);
self.addChild(toolLabel);
@@ -83,40 +83,8 @@
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
****/
@@ -138,18 +106,18 @@
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);
+ var toolButton = new DrawingTool(tools[i], 150 + i * 100, 300);
game.addChild(toolButton);
toolButtons.push(toolButton);
}
// Color palette
-var colors = [0x000000, 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 0xffffff];
+var colors = [0x000000, 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff8000, 0x8000ff, 0xffffff];
var colorSwatches = [];
var currentColor = 0x000000;
for (var j = 0; j < colors.length; j++) {
- var colorSwatch = new ColorSwatch(colors[j], 150 + j * 100, 350);
+ var colorSwatch = new ColorSwatch(colors[j], 150 + j * 100, 420);
game.addChild(colorSwatch);
colorSwatches.push(colorSwatch);
}
// Drawing variables
@@ -159,10 +127,11 @@
var brushSize = 20;
var strokes = [];
var horrorTimer = 0;
var corruptionTimer = 0;
-// Horror effects
-var horrorEffect = game.addChild(new HorrorEffect());
+var shapeStartX = 0;
+var shapeStartY = 0;
+var isDrawingShape = false;
// UI Elements
var titleText = new Text2('TERROR PAINT', {
size: 60,
fill: 0xFF0000
@@ -170,16 +139,8 @@
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);
@@ -234,9 +195,15 @@
updateToolSelection();
// Event handlers
game.down = function (x, y, obj) {
if (isPointInCanvas(x, y)) {
- isDrawing = true;
+ if (currentTool === 'Line' || currentTool === 'Rect' || currentTool === 'Circle') {
+ isDrawingShape = true;
+ shapeStartX = x;
+ shapeStartY = y;
+ } else {
+ isDrawing = true;
+ }
lastDrawX = x;
lastDrawY = y;
if (currentTool === 'Pen' || currentTool === 'Brush') {
addBrushStroke(x, y);
@@ -249,8 +216,13 @@
stroke.destroy();
strokes.splice(i, 1);
}
}
+ } else if (currentTool === 'Fill') {
+ // Simple fill - add a larger brush stroke
+ var fillStroke = new BrushStroke(x, y, currentColor, brushSize * 3);
+ game.addChild(fillStroke);
+ strokes.push(fillStroke);
}
}
};
game.move = function (x, y, obj) {
@@ -279,9 +251,63 @@
lastDrawY = y;
}
};
game.up = function (x, y, obj) {
+ if (isDrawingShape && isPointInCanvas(x, y)) {
+ if (currentTool === 'Line') {
+ // Draw line from start to end
+ var distance = Math.sqrt((x - shapeStartX) * (x - shapeStartX) + (y - shapeStartY) * (y - shapeStartY));
+ var steps = Math.floor(distance / 5);
+ for (var i = 0; i <= steps; i++) {
+ var lineX = shapeStartX + (x - shapeStartX) * (i / steps);
+ var lineY = shapeStartY + (y - shapeStartY) * (i / steps);
+ var lineStroke = new BrushStroke(lineX, lineY, currentColor, brushSize);
+ game.addChild(lineStroke);
+ strokes.push(lineStroke);
+ }
+ } else if (currentTool === 'Rect') {
+ // Draw rectangle outline
+ var rectWidth = Math.abs(x - shapeStartX);
+ var rectHeight = Math.abs(y - shapeStartY);
+ var minX = Math.min(shapeStartX, x);
+ var minY = Math.min(shapeStartY, y);
+ // Top and bottom lines
+ for (var j = 0; j <= rectWidth; j += 10) {
+ var topStroke = new BrushStroke(minX + j, minY, currentColor, brushSize);
+ var bottomStroke = new BrushStroke(minX + j, minY + rectHeight, currentColor, brushSize);
+ game.addChild(topStroke);
+ game.addChild(bottomStroke);
+ strokes.push(topStroke);
+ strokes.push(bottomStroke);
+ }
+ // Left and right lines
+ for (var k = 0; k <= rectHeight; k += 10) {
+ var leftStroke = new BrushStroke(minX, minY + k, currentColor, brushSize);
+ var rightStroke = new BrushStroke(minX + rectWidth, minY + k, currentColor, brushSize);
+ game.addChild(leftStroke);
+ game.addChild(rightStroke);
+ strokes.push(leftStroke);
+ strokes.push(rightStroke);
+ }
+ } else if (currentTool === 'Circle') {
+ // Draw circle
+ var centerX = (shapeStartX + x) / 2;
+ var centerY = (shapeStartY + y) / 2;
+ var radius = Math.sqrt((x - shapeStartX) * (x - shapeStartX) + (y - shapeStartY) * (y - shapeStartY)) / 2;
+ var circumference = 2 * Math.PI * radius;
+ var steps = Math.floor(circumference / 8);
+ for (var l = 0; l < steps; l++) {
+ var angle = l / steps * 2 * Math.PI;
+ var circleX = centerX + Math.cos(angle) * radius;
+ var circleY = centerY + Math.sin(angle) * radius;
+ var circleStroke = new BrushStroke(circleX, circleY, currentColor, brushSize);
+ game.addChild(circleStroke);
+ strokes.push(circleStroke);
+ }
+ }
+ }
isDrawing = false;
+ isDrawingShape = false;
};
// Start ambient music
LK.setTimeout(function () {
LK.playMusic('creepyMusic');
@@ -306,12 +332,8 @@
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) {
var currentStroke = strokes[i];
Images
:quality(85)/https://cdn.frvr.ai/68a5f9a2b458a38c39700688.png%3F3)
:quality(85)/https://cdn.frvr.ai/68a5f9cbb458a38c3970068a.png%3F3)
:quality(85)/https://cdn.frvr.ai/68a5f9deb458a38c3970068c.png%3F3)
:quality(85)/https://cdn.frvr.ai/68a5fa08b458a38c3970068e.png%3F3)
:quality(85)/https://cdn.frvr.ai/68a676d9013fc42d22cbe8a0.png%3F3)
:quality(85)/https://cdn.frvr.ai/68a68106b458a38c397006da.png%3F3)
:quality(85)/https://cdn.frvr.ai/68a687b0013fc42d22cbe8a4.png%3F3)
:quality(85)/https://cdn.frvr.ai/68a8ec28920e15881d5f7644.png%3F3)
:quality(85)/https://cdn.frvr.ai/68a91a528dd31a5909194b2f.png%3F3)
:quality(85)/https://cdn.frvr.ai/68a91c408dd31a5909194b31.png%3F3)
:quality(85)/https://cdn.frvr.ai/68a92c55237a907efad9eb82.png%3F3)
:quality(85)/https://cdn.frvr.ai/68a94513237a907efad9eb98.png%3F3)
:quality(85)/https://cdn.frvr.ai/68a948708dd31a5909194b41.png%3F3)
:quality(85)/https://cdn.frvr.ai/68aa773d579ec3dd877957b5.png%3F3)
:quality(85)/https://cdn.frvr.ai/68aa78ff579ec3dd877957b7.png%3F3)
:quality(85)/https://cdn.frvr.ai/68aa855066ea0815134dead7.png%3F3)
:quality(85)/https://cdn.frvr.ai/68acd0e466ea0815134deb77.png%3F3)
:quality(85)/https://cdn.frvr.ai/68acd5b666ea0815134deb79.png%3F3)
Used plugins
@upit/tween@upit/storage
