User prompt
haz que los botones de Jugar y Personajes del inicio no esten tan juntos, y mejora su diseño para que no parezca que esta bugeado
User prompt
haz que en el juego, haya un boton de pausa, si lo pulsas hay 2 botones, uno que sirve para volver al menu del juego, otro que sirve para ajustar la sensibilidad al momento de arrastrar al jugador ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
haz que los personajes se vean mas grandes pero no tanto
User prompt
rediseña el boton de jugar, hazlo un poco mas grande y con estilo de juego
User prompt
que al tocar el boton de "Personajes" salga un nuevo apartado de seleccion de personajes, en el cual al darle click a un personaje este se seleccione en el juego
User prompt
elimina los muebles, en la pantalla de inicio, agrega otro boton debajo de el de Jugar, que sirva para cambiarse de personaje, que el boton diga "Personajes"
User prompt
en la pantalla de inicio, agregale algunos efectos de neblina con un fondo que parezca una casa en el medio del bosque
User prompt
que en la pantalla de inicio antes de jugar, detras del boton de "jugar" se vea una pantalla Morada oscura con ambiente de terror
User prompt
ok entonces descartemos los controles de teclado, ahora necesito que hagas una pantalla de inicio, con un boton para jugar al juego
Code edit (1 edits merged)
Please save this source code
User prompt
Warm Room Explorer
Initial prompt
Haz una habitacion en perspectiva desde arriba un poco de frente al estilo de Deltarune, la habitacion debe tener rasgos calidos, el jugador debe ser un cuadro amarillo por ahora
/****
* Classes
****/
var Decoration = Container.expand(function (decorationType) {
var self = Container.call(this);
var decorationGraphics = self.attachAsset('decoration', {
anchorX: 0.5,
anchorY: 0.5
});
if (decorationType === 'plant') {
decorationGraphics.tint = 0x228B22;
} else if (decorationType === 'lamp') {
decorationGraphics.tint = 0xFFFF99;
} else if (decorationType === 'book') {
decorationGraphics.tint = 0x4169E1;
decorationGraphics.scaleX = 0.8;
decorationGraphics.scaleY = 0.6;
}
return self;
});
var Furniture = Container.expand(function (furnitureType) {
var self = Container.call(this);
var furnitureGraphics = self.attachAsset('furniture', {
anchorX: 0.5,
anchorY: 0.5
});
// Different furniture types can have different colors
if (furnitureType === 'table') {
furnitureGraphics.tint = 0x8B4513;
} else if (furnitureType === 'chair') {
furnitureGraphics.tint = 0x654321;
furnitureGraphics.scaleX = 0.7;
furnitureGraphics.scaleY = 0.7;
} else if (furnitureType === 'bed') {
furnitureGraphics.scaleX = 1.5;
furnitureGraphics.scaleY = 1.2;
furnitureGraphics.tint = 0xDC143C;
}
return self;
});
var Player = Container.expand(function () {
var self = Container.call(this);
var playerGraphics = self.attachAsset('player', {
anchorX: 0.5,
anchorY: 0.5
});
self.speed = 4;
self.update = function () {
// Movement will be handled in the game's main update loop
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x2F1B14
});
/****
* Game Code
****/
// Game state management
var gameState = 'menu'; // 'menu' or 'playing'
// Room dimensions
var roomWidth = 1800;
var roomHeight = 1400;
var roomStartX = (2048 - roomWidth) / 2;
var roomStartY = (2732 - roomHeight) / 2;
// Create room background
var floorTiles = [];
var wallTiles = [];
// Create floor tiles
for (var x = 0; x < Math.ceil(roomWidth / 100); x++) {
for (var y = 0; y < Math.ceil(roomHeight / 100); y++) {
var floorTile = LK.getAsset('floor', {
anchorX: 0,
anchorY: 0
});
floorTile.x = roomStartX + x * 100;
floorTile.y = roomStartY + y * 100;
game.addChild(floorTile);
floorTiles.push(floorTile);
}
}
// Create walls around the room
// Top wall
for (var x = 0; x < Math.ceil(roomWidth / 100); x++) {
var wallTile = LK.getAsset('wall', {
anchorX: 0,
anchorY: 0
});
wallTile.x = roomStartX + x * 100;
wallTile.y = roomStartY - 100;
game.addChild(wallTile);
wallTiles.push(wallTile);
}
// Bottom wall
for (var x = 0; x < Math.ceil(roomWidth / 100); x++) {
var wallTile = LK.getAsset('wall', {
anchorX: 0,
anchorY: 0
});
wallTile.x = roomStartX + x * 100;
wallTile.y = roomStartY + roomHeight;
game.addChild(wallTile);
wallTiles.push(wallTile);
}
// Left wall
for (var y = 0; y < Math.ceil(roomHeight / 100) + 2; y++) {
var wallTile = LK.getAsset('wall', {
anchorX: 0,
anchorY: 0
});
wallTile.x = roomStartX - 100;
wallTile.y = roomStartY - 100 + y * 100;
game.addChild(wallTile);
wallTiles.push(wallTile);
}
// Right wall
for (var y = 0; y < Math.ceil(roomHeight / 100) + 2; y++) {
var wallTile = LK.getAsset('wall', {
anchorX: 0,
anchorY: 0
});
wallTile.x = roomStartX + roomWidth;
wallTile.y = roomStartY - 100 + y * 100;
game.addChild(wallTile);
wallTiles.push(wallTile);
}
// Add carpet in the center
var carpet = LK.getAsset('carpet', {
anchorX: 0.5,
anchorY: 0.5
});
carpet.x = roomStartX + roomWidth / 2;
carpet.y = roomStartY + roomHeight / 2;
game.addChild(carpet);
// Create furniture
var furniture = [];
// Bed in top-right corner
var bed = new Furniture('bed');
bed.x = roomStartX + roomWidth - 200;
bed.y = roomStartY + 150;
game.addChild(bed);
furniture.push(bed);
// Table in center-left
var table = new Furniture('table');
table.x = roomStartX + 300;
table.y = roomStartY + roomHeight / 2;
game.addChild(table);
furniture.push(table);
// Chair near table
var chair1 = new Furniture('chair');
chair1.x = roomStartX + 200;
chair1.y = roomStartY + roomHeight / 2 - 50;
game.addChild(chair1);
furniture.push(chair1);
var chair2 = new Furniture('chair');
chair2.x = roomStartX + 400;
chair2.y = roomStartY + roomHeight / 2 + 50;
game.addChild(chair2);
furniture.push(chair2);
// Create decorations
var decorations = [];
// Plant in corner
var plant = new Decoration('plant');
plant.x = roomStartX + 100;
plant.y = roomStartY + 100;
game.addChild(plant);
decorations.push(plant);
// Lamp near bed
var lamp = new Decoration('lamp');
lamp.x = roomStartX + roomWidth - 300;
lamp.y = roomStartY + 100;
game.addChild(lamp);
decorations.push(lamp);
// Books on table
var book1 = new Decoration('book');
book1.x = roomStartX + 280;
book1.y = roomStartY + roomHeight / 2 - 20;
game.addChild(book1);
decorations.push(book1);
var book2 = new Decoration('book');
book2.x = roomStartX + 320;
book2.y = roomStartY + roomHeight / 2 + 10;
game.addChild(book2);
decorations.push(book2);
// More plants and decorations
var plant2 = new Decoration('plant');
plant2.x = roomStartX + roomWidth - 100;
plant2.y = roomStartY + roomHeight - 100;
game.addChild(plant2);
decorations.push(plant2);
// Create player (but don't add to game yet)
var player = new Player();
player.x = roomStartX + roomWidth / 2;
player.y = roomStartY + roomHeight - 200;
// Create dark purple horror background for menu
var horrorBackground = LK.getAsset('floor', {
anchorX: 0,
anchorY: 0
});
horrorBackground.x = 0;
horrorBackground.y = 0;
horrorBackground.width = 2048;
horrorBackground.height = 2732;
horrorBackground.tint = 0x301934; // Dark purple color
game.addChild(horrorBackground);
// Create forest background with trees
var forestElements = [];
for (var i = 0; i < 15; i++) {
var tree = LK.getAsset('tree', {
anchorX: 0.5,
anchorY: 1
});
tree.x = Math.random() * 2048;
tree.y = 1800 + Math.random() * 400; // Trees at bottom part
tree.tint = 0x1a2e14; // Very dark green
tree.alpha = 0.6;
tree.scaleX = 0.8 + Math.random() * 0.8;
tree.scaleY = 1 + Math.random() * 0.5;
game.addChild(tree);
forestElements.push(tree);
}
// Add more trees in background
for (var i = 0; i < 10; i++) {
var tree = LK.getAsset('tree', {
anchorX: 0.5,
anchorY: 1
});
tree.x = Math.random() * 2048;
tree.y = 1000 + Math.random() * 600;
tree.tint = 0x0f1a0a; // Even darker green
tree.alpha = 0.4;
tree.scaleX = 0.5 + Math.random() * 0.6;
tree.scaleY = 0.8 + Math.random() * 0.4;
game.addChild(tree);
forestElements.push(tree);
}
// Create spooky house in the center
var spookyHouse = LK.getAsset('house', {
anchorX: 0.5,
anchorY: 0.5
});
spookyHouse.x = 2048 / 2;
spookyHouse.y = 1600;
spookyHouse.tint = 0x2a1f17; // Dark brown
spookyHouse.alpha = 0.8;
game.addChild(spookyHouse);
forestElements.push(spookyHouse);
// Add house windows (dark rectangles)
var window1 = LK.getAsset('decoration', {
anchorX: 0.5,
anchorY: 0.5
});
window1.x = spookyHouse.x - 60;
window1.y = spookyHouse.y - 20;
window1.tint = 0x000000;
window1.scaleX = 1.2;
window1.scaleY = 1.5;
game.addChild(window1);
forestElements.push(window1);
var window2 = LK.getAsset('decoration', {
anchorX: 0.5,
anchorY: 0.5
});
window2.x = spookyHouse.x + 60;
window2.y = spookyHouse.y - 20;
window2.tint = 0x000000;
window2.scaleX = 1.2;
window2.scaleY = 1.5;
game.addChild(window2);
forestElements.push(window2);
// Create animated fog effects
var fogElements = [];
for (var i = 0; i < 12; i++) {
var fog = LK.getAsset('fog', {
anchorX: 0.5,
anchorY: 0.5
});
fog.x = Math.random() * 2048;
fog.y = 1200 + Math.random() * 800;
fog.tint = 0x4a4a4a; // Gray fog
fog.alpha = 0.2 + Math.random() * 0.3;
fog.scaleX = 1 + Math.random() * 2;
fog.scaleY = 0.8 + Math.random() * 1.2;
fog.fogSpeed = 0.5 + Math.random() * 1;
fog.fogDirection = Math.random() * Math.PI * 2;
game.addChild(fog);
fogElements.push(fog);
}
// Create multiple shadow/fog elements for horror atmosphere
var shadowElements = [];
for (var i = 0; i < 8; i++) {
var shadow = LK.getAsset('decoration', {
anchorX: 0.5,
anchorY: 0.5
});
shadow.x = Math.random() * 2048;
shadow.y = Math.random() * 2732;
shadow.tint = 0x1a0d1f; // Very dark purple
shadow.alpha = 0.3;
shadow.scaleX = Math.random() * 3 + 2;
shadow.scaleY = Math.random() * 3 + 2;
game.addChild(shadow);
shadowElements.push(shadow);
}
// Create start screen elements
var titleText = new Text2('Warm Room Explorer', {
size: 120,
fill: 0xFFD700
});
titleText.anchor.set(0.5, 0.5);
titleText.x = 2048 / 2;
titleText.y = 2732 / 3;
var playButton = LK.getAsset('furniture', {
anchorX: 0.5,
anchorY: 0.5
});
playButton.x = 2048 / 2;
playButton.y = 2732 / 2;
playButton.tint = 0x32CD32;
playButton.scaleX = 1.5;
playButton.scaleY = 1;
var playButtonText = new Text2('JUGAR', {
size: 80,
fill: 0xFFFFFF
});
playButtonText.anchor.set(0.5, 0.5);
playButtonText.x = playButton.x;
playButtonText.y = playButton.y;
// Add start screen elements
game.addChild(titleText);
game.addChild(playButton);
game.addChild(playButtonText);
// Store references for easy removal (including horror elements)
var menuElements = [horrorBackground, titleText, playButton, playButtonText].concat(shadowElements).concat(forestElements).concat(fogElements);
// Function to start the game
function startGame() {
gameState = 'playing';
// Remove menu elements
for (var i = 0; i < menuElements.length; i++) {
game.removeChild(menuElements[i]);
}
// Add player to game
game.addChild(player);
}
// Movement controls
var keys = {
up: false,
down: false,
left: false,
right: false
};
// Touch/mouse controls
var isDragging = false;
var lastTouchX = 0;
var lastTouchY = 0;
game.down = function (x, y, obj) {
if (gameState === 'menu') {
// Check if play button was clicked
var buttonBounds = {
left: playButton.x - playButton.width * playButton.scaleX / 2,
right: playButton.x + playButton.width * playButton.scaleX / 2,
top: playButton.y - playButton.height * playButton.scaleY / 2,
bottom: playButton.y + playButton.height * playButton.scaleY / 2
};
if (x >= buttonBounds.left && x <= buttonBounds.right && y >= buttonBounds.top && y <= buttonBounds.bottom) {
startGame();
}
} else if (gameState === 'playing') {
isDragging = true;
lastTouchX = x;
lastTouchY = y;
}
};
game.move = function (x, y, obj) {
if (gameState === 'playing' && isDragging) {
var deltaX = x - lastTouchX;
var deltaY = y - lastTouchY;
// Move player based on touch movement
var newX = player.x + deltaX * 0.5;
var newY = player.y + deltaY * 0.5;
// Check boundaries
if (newX >= roomStartX + 30 && newX <= roomStartX + roomWidth - 30) {
player.x = newX;
}
if (newY >= roomStartY + 30 && newY <= roomStartY + roomHeight - 30) {
player.y = newY;
}
lastTouchX = x;
lastTouchY = y;
}
};
game.up = function (x, y, obj) {
isDragging = false;
};
// Check collision with furniture
function checkFurnitureCollision(newX, newY) {
var playerBounds = {
left: newX - 30,
right: newX + 30,
top: newY - 30,
bottom: newY + 30
};
for (var i = 0; i < furniture.length; i++) {
var item = furniture[i];
var itemBounds = {
left: item.x - 60,
right: item.x + 60,
top: item.y - 40,
bottom: item.y + 40
};
if (playerBounds.left < itemBounds.right && playerBounds.right > itemBounds.left && playerBounds.top < itemBounds.bottom && playerBounds.bottom > itemBounds.top) {
return true;
}
}
return false;
}
// Main game update
game.update = function () {
// Animate fog elements in menu
if (gameState === 'menu') {
for (var i = 0; i < fogElements.length; i++) {
var fog = fogElements[i];
fog.x += Math.cos(fog.fogDirection) * fog.fogSpeed;
fog.y += Math.sin(fog.fogDirection) * fog.fogSpeed * 0.3;
fog.alpha += Math.sin(LK.ticks * 0.02 + i) * 0.01;
// Keep fog within bounds and wrap around
if (fog.x < -100) fog.x = 2148;
if (fog.x > 2148) fog.x = -100;
if (fog.y < 1000) fog.y = 2200;
if (fog.y > 2200) fog.y = 1000;
}
}
if (gameState === 'playing') {
// Alternative movement for non-touch devices (basic directional movement)
var moveSpeed = player.speed;
var newX = player.x;
var newY = player.y;
// Simple AI movement for demonstration (player moves slightly)
if (LK.ticks % 180 === 0) {
var randomDirection = Math.floor(Math.random() * 4);
var testX = player.x;
var testY = player.y;
switch (randomDirection) {
case 0:
testY -= moveSpeed * 5;
break;
// up
case 1:
testY += moveSpeed * 5;
break;
// down
case 2:
testX -= moveSpeed * 5;
break;
// left
case 3:
testX += moveSpeed * 5;
break;
// right
}
// Check boundaries and collisions
if (testX >= roomStartX + 30 && testX <= roomStartX + roomWidth - 30 && testY >= roomStartY + 30 && testY <= roomStartY + roomHeight - 30 && !checkFurnitureCollision(testX, testY)) {
player.x = testX;
player.y = testY;
}
}
}
}; ===================================================================
--- original.js
+++ change.js
@@ -207,8 +207,91 @@
horrorBackground.width = 2048;
horrorBackground.height = 2732;
horrorBackground.tint = 0x301934; // Dark purple color
game.addChild(horrorBackground);
+// Create forest background with trees
+var forestElements = [];
+for (var i = 0; i < 15; i++) {
+ var tree = LK.getAsset('tree', {
+ anchorX: 0.5,
+ anchorY: 1
+ });
+ tree.x = Math.random() * 2048;
+ tree.y = 1800 + Math.random() * 400; // Trees at bottom part
+ tree.tint = 0x1a2e14; // Very dark green
+ tree.alpha = 0.6;
+ tree.scaleX = 0.8 + Math.random() * 0.8;
+ tree.scaleY = 1 + Math.random() * 0.5;
+ game.addChild(tree);
+ forestElements.push(tree);
+}
+// Add more trees in background
+for (var i = 0; i < 10; i++) {
+ var tree = LK.getAsset('tree', {
+ anchorX: 0.5,
+ anchorY: 1
+ });
+ tree.x = Math.random() * 2048;
+ tree.y = 1000 + Math.random() * 600;
+ tree.tint = 0x0f1a0a; // Even darker green
+ tree.alpha = 0.4;
+ tree.scaleX = 0.5 + Math.random() * 0.6;
+ tree.scaleY = 0.8 + Math.random() * 0.4;
+ game.addChild(tree);
+ forestElements.push(tree);
+}
+// Create spooky house in the center
+var spookyHouse = LK.getAsset('house', {
+ anchorX: 0.5,
+ anchorY: 0.5
+});
+spookyHouse.x = 2048 / 2;
+spookyHouse.y = 1600;
+spookyHouse.tint = 0x2a1f17; // Dark brown
+spookyHouse.alpha = 0.8;
+game.addChild(spookyHouse);
+forestElements.push(spookyHouse);
+// Add house windows (dark rectangles)
+var window1 = LK.getAsset('decoration', {
+ anchorX: 0.5,
+ anchorY: 0.5
+});
+window1.x = spookyHouse.x - 60;
+window1.y = spookyHouse.y - 20;
+window1.tint = 0x000000;
+window1.scaleX = 1.2;
+window1.scaleY = 1.5;
+game.addChild(window1);
+forestElements.push(window1);
+var window2 = LK.getAsset('decoration', {
+ anchorX: 0.5,
+ anchorY: 0.5
+});
+window2.x = spookyHouse.x + 60;
+window2.y = spookyHouse.y - 20;
+window2.tint = 0x000000;
+window2.scaleX = 1.2;
+window2.scaleY = 1.5;
+game.addChild(window2);
+forestElements.push(window2);
+// Create animated fog effects
+var fogElements = [];
+for (var i = 0; i < 12; i++) {
+ var fog = LK.getAsset('fog', {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ fog.x = Math.random() * 2048;
+ fog.y = 1200 + Math.random() * 800;
+ fog.tint = 0x4a4a4a; // Gray fog
+ fog.alpha = 0.2 + Math.random() * 0.3;
+ fog.scaleX = 1 + Math.random() * 2;
+ fog.scaleY = 0.8 + Math.random() * 1.2;
+ fog.fogSpeed = 0.5 + Math.random() * 1;
+ fog.fogDirection = Math.random() * Math.PI * 2;
+ game.addChild(fog);
+ fogElements.push(fog);
+}
// Create multiple shadow/fog elements for horror atmosphere
var shadowElements = [];
for (var i = 0; i < 8; i++) {
var shadow = LK.getAsset('decoration', {
@@ -252,9 +335,9 @@
game.addChild(titleText);
game.addChild(playButton);
game.addChild(playButtonText);
// Store references for easy removal (including horror elements)
-var menuElements = [horrorBackground, titleText, playButton, playButtonText].concat(shadowElements);
+var menuElements = [horrorBackground, titleText, playButton, playButtonText].concat(shadowElements).concat(forestElements).concat(fogElements);
// Function to start the game
function startGame() {
gameState = 'playing';
// Remove menu elements
@@ -337,8 +420,22 @@
return false;
}
// Main game update
game.update = function () {
+ // Animate fog elements in menu
+ if (gameState === 'menu') {
+ for (var i = 0; i < fogElements.length; i++) {
+ var fog = fogElements[i];
+ fog.x += Math.cos(fog.fogDirection) * fog.fogSpeed;
+ fog.y += Math.sin(fog.fogDirection) * fog.fogSpeed * 0.3;
+ fog.alpha += Math.sin(LK.ticks * 0.02 + i) * 0.01;
+ // Keep fog within bounds and wrap around
+ if (fog.x < -100) fog.x = 2148;
+ if (fog.x > 2148) fog.x = -100;
+ if (fog.y < 1000) fog.y = 2200;
+ if (fog.y > 2200) fog.y = 1000;
+ }
+ }
if (gameState === 'playing') {
// Alternative movement for non-touch devices (basic directional movement)
var moveSpeed = player.speed;
var newX = player.x;
Niebla terrorifica. In-Game asset. 2d. High contrast. No shadows
marco de boton de inicio sin palabras en el. In-Game asset. 2d. High contrast. No shadows
una estrella hermosa con cara kawai que en su frente diga Dazai. In-Game asset. 2d. High contrast. No shadows
una luna redondita kawai con lentes de sol, en su frente lleva una sinta que dice STAR. In-Game asset. 2d. High contrast. No shadows
sacale el fondo de color negro, dejando solo al personaje con el redondeado rojo
un oso redondo. In-Game asset. 2d. High contrast. No shadows
un monito en una imagen redonda, el monito lleva gafas de sol, es de plastico y tiene una sonrisa. In-Game asset. 2d. High contrast. No shadows
un oso redondito, con una aureola, cara kawai y con los brazitos juntitos como rezando y cantando. In-Game asset. 2d. High contrast. No shadows
Nube realista de noche. In-Game asset. 2d. High contrast. No shadows
un edificio pixel art por la noche. In-Game asset. 2d. High contrast. No shadows
un boton color rojo, dentro de el hay un dibujo de dos flechas como indicando que se mezcla algo. In-Game asset. 2d. High contrast. No shadows
un boton redondo color amarillo, dentro de el hay un dinujo de una corona brillante. In-Game asset. 2d. High contrast. No shadows
una tabla de madera alargada como si fuese de una cocina. In-Game asset. 2d. High contrast. No shadows
Una luna brillante. In-Game asset. 2d. High contrast. No shadows
un corazon pixeleado al estilo de DELTARUNE u Undertale. In-Game asset. 2d. High contrast. No shadows
Jevil, un jefe del capitulo 1 de deltarune, es pixleado y el fondo detras de este es color blanco. In-Game asset. 2d. High contrast. No shadows
un diamante, es pixeleado, solo mejora su calidad, no cambies su forma
haz que este trebol blanco, sea pixeleado de 16x16
Jevil de deltarune capitulo uno siendo golpeado en el estomago echandose un poco para atras aunque con una risa loca en su rostro (pixeleado con fondo blanco). In-Game asset. 2d. High contrast. No shadows
Una caja sorpresa cerrada en blanco y negro pixeleado en 16x16 pixeles, en la caja hay un dibujo de unos ojos y sonrisa de Jevil de deltarune. el fondo de la imagen es de color rojo
un corazon de color blanco con bordes negros, el mismo que lanza Jevil en deltarune capitulo 1, el corazon es pixeleado 16x16 (el fondo de la imagen sea roja). In-Game asset. 2d. High contrast. No shadows
una bomba redonda, color blanco con bordes de color negro, es pixeleada de 16x16 (la imagen tiene fondo rojo). In-Game asset. 2d. High contrast. No shadows