Play
:quality(85)/https:%2F%2Fcdn.frvr.ai/68643177dbb3d37099e4c832.png)
:quality(85)/https:%2F%2Fcdn.frvr.ai/686430e0dbb3d37099e4c830.png)
#gridgame
#puzzle
#navigation
#minimalist
#strategy
Creation History
User prompt
Add wooden textures to the spoon and table, and add metal textures to the pot.
User prompt
The spoon should be sitting on the table intitally until it is picked up.
User prompt
Fix bug where the spoon can still go through the pot.
User prompt
Fix bug where the spoon can still go through the pot.
User prompt
Update collsion detection for the spoon and pot.
User prompt
Move the table and pot down some more until the table itself is at the bottom of the screen.
User prompt
Move the table and pot down a bit.
User prompt
Make a table in the screen with the spoon and pot, where the pot can sit at.
User prompt
Fix collision when the spoon flips upside down.
User prompt
Fix this bug where the spoon doesn't look like the cursor is actually holding the spoon. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Make it when you click and drag the spoon, the spoon flips upside down and looks like it is hanging from my cursor. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
There is a bug where the spoon cannot stir the pot.
User prompt
Make the pot hitbox be the lines, exept for the rim, that made the pot.
User prompt
Make the spoon and pot 2 times bigger than they were before. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
There is a bug where the spoon gets stuck next to the pot.
User prompt
The collision detection sn't working, the spoon is still able to go though the pot, and I cannot place the spoon in the pot either.
User prompt
There should be collision detection when the spoon is hitting the pot, or if the spoon is in the pot.
User prompt
The spoon will detect when it's in the pot, and that is when you can stir, when it's "in the pot", it's when the spoon is over the pot.
User prompt
The spoon should be able to dip into the pot, handle sticking out, and I can manually stir the pot myself. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
There is a bug where I cannot interact with the spoon.
User prompt
Make the seperate screen be white, there should be a medieval looking pot, and a spoon you can pick up and drag around, so you can use it to stir the pot. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Make a seperate screen from the grid, which can be interacted with my cursor.
User prompt
Have the center square have the word Void in it, then 2 squares down and 2 squares to the left from the center square, make that square have the word Earth in it.
User prompt
Make it that the flashing square isn't filled with any color, and is hollow.
Code edit (1 edits merged)
Please save this source code
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var GridCell = Container.expand(function () {
var self = Container.call(this);
var border = self.attachAsset('gridBorder', {
anchorX: 0.5,
anchorY: 0.5
});
var cell = self.attachAsset('gridCell', {
anchorX: 0.5,
anchorY: 0.5
});
return self;
});
var Player = Container.expand(function () {
var self = Container.call(this);
var playerBorder = self.attachAsset('playerBorder', {
anchorX: 0.5,
anchorY: 0.5
});
var playerInner = self.attachAsset('playerInner', {
anchorX: 0.5,
anchorY: 0.5
});
self.gridX = 5; // Center position (0-indexed)
self.gridY = 5; // Center position (0-indexed)
self.isFlashing = false;
self.flashTimer = 0;
self.update = function () {
// Handle flashing animation
self.flashTimer++;
if (self.flashTimer >= 30) {
// Flash every 30 frames (0.5 seconds at 60fps)
self.flashTimer = 0;
self.isFlashing = !self.isFlashing;
playerBorder.alpha = self.isFlashing ? 0.3 : 1.0;
playerInner.alpha = self.isFlashing ? 0.3 : 1.0;
}
};
self.moveToGridPosition = function () {
var cellSize = 164;
var gridStartX = 2048 / 2 - 11 * cellSize / 2 + cellSize / 2;
var gridStartY = 2732 / 2 - 11 * cellSize / 2 + cellSize / 2;
self.x = gridStartX + self.gridX * cellSize;
self.y = gridStartY + self.gridY * cellSize;
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x111111
});
/****
* Game Code
****/
var gridSize = 11;
var cellSize = 164;
var gridCells = [];
var player;
// Game state management
var gameState = 'grid'; // 'grid' or 'cursor'
var gridScreen;
var cursorScreen;
// Create screen containers
gridScreen = new Container();
cursorScreen = new Container();
game.addChild(gridScreen);
game.addChild(cursorScreen);
// Create the grid
var gridStartX = 2048 / 2 - gridSize * cellSize / 2 + cellSize / 2;
var gridStartY = 2732 / 2 - gridSize * cellSize / 2 + cellSize / 2;
for (var row = 0; row < gridSize; row++) {
gridCells[row] = [];
for (var col = 0; col < gridSize; col++) {
var cell = new GridCell();
cell.x = gridStartX + col * cellSize;
cell.y = gridStartY + row * cellSize;
gridCells[row][col] = cell;
gridScreen.addChild(cell);
}
}
// Add text labels to specific grid cells
var voidLabel = new Text2('Void', {
size: 40,
fill: 0xFFFFFF
});
voidLabel.anchor.set(0.5, 0.5);
voidLabel.x = gridStartX + 5 * cellSize; // Center column (5)
voidLabel.y = gridStartY + 5 * cellSize; // Center row (5)
gridScreen.addChild(voidLabel);
var earthLabel = new Text2('Earth', {
size: 40,
fill: 0xFFFFFF
});
earthLabel.anchor.set(0.5, 0.5);
earthLabel.x = gridStartX + 3 * cellSize; // 2 squares left from center (5-2=3)
earthLabel.y = gridStartY + 7 * cellSize; // 2 squares down from center (5+2=7)
gridScreen.addChild(earthLabel);
// Create player
player = gridScreen.addChild(new Player());
player.moveToGridPosition();
// Input handling for WASD keys
var keyStates = {
w: false,
a: false,
s: false,
d: false
};
var lastKeyStates = {
w: false,
a: false,
s: false,
d: false
};
// Simulate keyboard input through touch controls
var controlButtons = [];
var buttonSize = 120;
var buttonSpacing = 140;
// Create virtual WASD buttons
var wButton = gridScreen.addChild(LK.getAsset('gridCell', {
anchorX: 0.5,
anchorY: 0.5,
width: buttonSize,
height: buttonSize
}));
wButton.x = 2048 - 200;
wButton.y = 2732 - 400;
var aButton = gridScreen.addChild(LK.getAsset('gridCell', {
anchorX: 0.5,
anchorY: 0.5,
width: buttonSize,
height: buttonSize
}));
aButton.x = 2048 - 340;
aButton.y = 2732 - 260;
var sButton = gridScreen.addChild(LK.getAsset('gridCell', {
anchorX: 0.5,
anchorY: 0.5,
width: buttonSize,
height: buttonSize
}));
sButton.x = 2048 - 200;
sButton.y = 2732 - 260;
var dButton = gridScreen.addChild(LK.getAsset('gridCell', {
anchorX: 0.5,
anchorY: 0.5,
width: buttonSize,
height: buttonSize
}));
dButton.x = 2048 - 60;
dButton.y = 2732 - 260;
// Add labels to buttons
var wLabel = new Text2('W', {
size: 60,
fill: 0xFFFFFF
});
wLabel.anchor.set(0.5, 0.5);
wLabel.x = wButton.x;
wLabel.y = wButton.y;
gridScreen.addChild(wLabel);
var aLabel = new Text2('A', {
size: 60,
fill: 0xFFFFFF
});
aLabel.anchor.set(0.5, 0.5);
aLabel.x = aButton.x;
aLabel.y = aButton.y;
gridScreen.addChild(aLabel);
var sLabel = new Text2('S', {
size: 60,
fill: 0xFFFFFF
});
sLabel.anchor.set(0.5, 0.5);
sLabel.x = sButton.x;
sLabel.y = sButton.y;
gridScreen.addChild(sLabel);
var dLabel = new Text2('D', {
size: 60,
fill: 0xFFFFFF
});
dLabel.anchor.set(0.5, 0.5);
dLabel.x = dButton.x;
dLabel.y = dButton.y;
gridScreen.addChild(dLabel);
// Button event handlers
wButton.down = function () {
keyStates.w = true;
};
wButton.up = function () {
keyStates.w = false;
};
aButton.down = function () {
keyStates.a = true;
};
aButton.up = function () {
keyStates.a = false;
};
sButton.down = function () {
keyStates.s = true;
};
sButton.up = function () {
keyStates.s = false;
};
dButton.down = function () {
keyStates.d = true;
};
dButton.up = function () {
keyStates.d = false;
};
// Create cursor screen content
var cursorTitle = new Text2('Cursor Screen', {
size: 80,
fill: 0xFFFFFF
});
cursorTitle.anchor.set(0.5, 0.5);
cursorTitle.x = 2048 / 2;
cursorTitle.y = 400;
cursorScreen.addChild(cursorTitle);
// Create interactive elements for cursor screen
var interactiveCircle = cursorScreen.addChild(LK.getAsset('gridBorder', {
anchorX: 0.5,
anchorY: 0.5,
width: 200,
height: 200
}));
interactiveCircle.x = 2048 / 2;
interactiveCircle.y = 1000;
var circleLabel = new Text2('Click Me!', {
size: 40,
fill: 0xFFFFFF
});
circleLabel.anchor.set(0.5, 0.5);
circleLabel.x = interactiveCircle.x;
circleLabel.y = interactiveCircle.y;
cursorScreen.addChild(circleLabel);
// Add click interaction to circle
interactiveCircle.down = function () {
// Change color when clicked
tween.to(interactiveCircle, {
tint: 0xff0000
}, 200).then(function () {
tween.to(interactiveCircle, {
tint: 0xffffff
}, 200);
});
};
// Create switch button for both screens
var switchButton = game.addChild(LK.getAsset('gridCell', {
anchorX: 0.5,
anchorY: 0.5,
width: 200,
height: 80
}));
switchButton.x = 2048 / 2;
switchButton.y = 200;
var switchLabel = new Text2('Switch Screen', {
size: 30,
fill: 0xFFFFFF
});
switchLabel.anchor.set(0.5, 0.5);
switchLabel.x = switchButton.x;
switchLabel.y = switchButton.y;
game.addChild(switchLabel);
// Switch button functionality
switchButton.down = function () {
if (gameState === 'grid') {
gameState = 'cursor';
gridScreen.visible = false;
cursorScreen.visible = true;
} else {
gameState = 'grid';
gridScreen.visible = true;
cursorScreen.visible = false;
}
};
// Initialize screen visibility
gridScreen.visible = true;
cursorScreen.visible = false;
function movePlayer(direction) {
var newX = player.gridX;
var newY = player.gridY;
switch (direction) {
case 'w':
// Up
newY = Math.max(0, player.gridY - 1);
break;
case 's':
// Down
newY = Math.min(gridSize - 1, player.gridY + 1);
break;
case 'a':
// Left
newX = Math.max(0, player.gridX - 1);
break;
case 'd':
// Right
newX = Math.min(gridSize - 1, player.gridX + 1);
break;
}
// Only move if position changed
if (newX !== player.gridX || newY !== player.gridY) {
player.gridX = newX;
player.gridY = newY;
player.moveToGridPosition();
}
}
game.update = function () {
// Only handle grid controls when on grid screen
if (gameState === 'grid') {
// Check for key press transitions (just pressed)
if (!lastKeyStates.w && keyStates.w) {
movePlayer('w');
}
if (!lastKeyStates.a && keyStates.a) {
movePlayer('a');
}
if (!lastKeyStates.s && keyStates.s) {
movePlayer('s');
}
if (!lastKeyStates.d && keyStates.d) {
movePlayer('d');
}
// Update last key states
lastKeyStates.w = keyStates.w;
lastKeyStates.a = keyStates.a;
lastKeyStates.s = keyStates.s;
lastKeyStates.d = keyStates.d;
}
}; ===================================================================
--- original.js
+++ change.js
@@ -66,8 +66,17 @@
var gridSize = 11;
var cellSize = 164;
var gridCells = [];
var player;
+// Game state management
+var gameState = 'grid'; // 'grid' or 'cursor'
+var gridScreen;
+var cursorScreen;
+// Create screen containers
+gridScreen = new Container();
+cursorScreen = new Container();
+game.addChild(gridScreen);
+game.addChild(cursorScreen);
// Create the grid
var gridStartX = 2048 / 2 - gridSize * cellSize / 2 + cellSize / 2;
var gridStartY = 2732 / 2 - gridSize * cellSize / 2 + cellSize / 2;
for (var row = 0; row < gridSize; row++) {
@@ -76,9 +85,9 @@
var cell = new GridCell();
cell.x = gridStartX + col * cellSize;
cell.y = gridStartY + row * cellSize;
gridCells[row][col] = cell;
- game.addChild(cell);
+ gridScreen.addChild(cell);
}
}
// Add text labels to specific grid cells
var voidLabel = new Text2('Void', {
@@ -87,19 +96,19 @@
});
voidLabel.anchor.set(0.5, 0.5);
voidLabel.x = gridStartX + 5 * cellSize; // Center column (5)
voidLabel.y = gridStartY + 5 * cellSize; // Center row (5)
-game.addChild(voidLabel);
+gridScreen.addChild(voidLabel);
var earthLabel = new Text2('Earth', {
size: 40,
fill: 0xFFFFFF
});
earthLabel.anchor.set(0.5, 0.5);
earthLabel.x = gridStartX + 3 * cellSize; // 2 squares left from center (5-2=3)
earthLabel.y = gridStartY + 7 * cellSize; // 2 squares down from center (5+2=7)
-game.addChild(earthLabel);
+gridScreen.addChild(earthLabel);
// Create player
-player = game.addChild(new Player());
+player = gridScreen.addChild(new Player());
player.moveToGridPosition();
// Input handling for WASD keys
var keyStates = {
w: false,
@@ -117,33 +126,33 @@
var controlButtons = [];
var buttonSize = 120;
var buttonSpacing = 140;
// Create virtual WASD buttons
-var wButton = game.addChild(LK.getAsset('gridCell', {
+var wButton = gridScreen.addChild(LK.getAsset('gridCell', {
anchorX: 0.5,
anchorY: 0.5,
width: buttonSize,
height: buttonSize
}));
wButton.x = 2048 - 200;
wButton.y = 2732 - 400;
-var aButton = game.addChild(LK.getAsset('gridCell', {
+var aButton = gridScreen.addChild(LK.getAsset('gridCell', {
anchorX: 0.5,
anchorY: 0.5,
width: buttonSize,
height: buttonSize
}));
aButton.x = 2048 - 340;
aButton.y = 2732 - 260;
-var sButton = game.addChild(LK.getAsset('gridCell', {
+var sButton = gridScreen.addChild(LK.getAsset('gridCell', {
anchorX: 0.5,
anchorY: 0.5,
width: buttonSize,
height: buttonSize
}));
sButton.x = 2048 - 200;
sButton.y = 2732 - 260;
-var dButton = game.addChild(LK.getAsset('gridCell', {
+var dButton = gridScreen.addChild(LK.getAsset('gridCell', {
anchorX: 0.5,
anchorY: 0.5,
width: buttonSize,
height: buttonSize
@@ -157,33 +166,33 @@
});
wLabel.anchor.set(0.5, 0.5);
wLabel.x = wButton.x;
wLabel.y = wButton.y;
-game.addChild(wLabel);
+gridScreen.addChild(wLabel);
var aLabel = new Text2('A', {
size: 60,
fill: 0xFFFFFF
});
aLabel.anchor.set(0.5, 0.5);
aLabel.x = aButton.x;
aLabel.y = aButton.y;
-game.addChild(aLabel);
+gridScreen.addChild(aLabel);
var sLabel = new Text2('S', {
size: 60,
fill: 0xFFFFFF
});
sLabel.anchor.set(0.5, 0.5);
sLabel.x = sButton.x;
sLabel.y = sButton.y;
-game.addChild(sLabel);
+gridScreen.addChild(sLabel);
var dLabel = new Text2('D', {
size: 60,
fill: 0xFFFFFF
});
dLabel.anchor.set(0.5, 0.5);
dLabel.x = dButton.x;
dLabel.y = dButton.y;
-game.addChild(dLabel);
+gridScreen.addChild(dLabel);
// Button event handlers
wButton.down = function () {
keyStates.w = true;
};
@@ -207,8 +216,77 @@
};
dButton.up = function () {
keyStates.d = false;
};
+// Create cursor screen content
+var cursorTitle = new Text2('Cursor Screen', {
+ size: 80,
+ fill: 0xFFFFFF
+});
+cursorTitle.anchor.set(0.5, 0.5);
+cursorTitle.x = 2048 / 2;
+cursorTitle.y = 400;
+cursorScreen.addChild(cursorTitle);
+// Create interactive elements for cursor screen
+var interactiveCircle = cursorScreen.addChild(LK.getAsset('gridBorder', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ width: 200,
+ height: 200
+}));
+interactiveCircle.x = 2048 / 2;
+interactiveCircle.y = 1000;
+var circleLabel = new Text2('Click Me!', {
+ size: 40,
+ fill: 0xFFFFFF
+});
+circleLabel.anchor.set(0.5, 0.5);
+circleLabel.x = interactiveCircle.x;
+circleLabel.y = interactiveCircle.y;
+cursorScreen.addChild(circleLabel);
+// Add click interaction to circle
+interactiveCircle.down = function () {
+ // Change color when clicked
+ tween.to(interactiveCircle, {
+ tint: 0xff0000
+ }, 200).then(function () {
+ tween.to(interactiveCircle, {
+ tint: 0xffffff
+ }, 200);
+ });
+};
+// Create switch button for both screens
+var switchButton = game.addChild(LK.getAsset('gridCell', {
+ anchorX: 0.5,
+ anchorY: 0.5,
+ width: 200,
+ height: 80
+}));
+switchButton.x = 2048 / 2;
+switchButton.y = 200;
+var switchLabel = new Text2('Switch Screen', {
+ size: 30,
+ fill: 0xFFFFFF
+});
+switchLabel.anchor.set(0.5, 0.5);
+switchLabel.x = switchButton.x;
+switchLabel.y = switchButton.y;
+game.addChild(switchLabel);
+// Switch button functionality
+switchButton.down = function () {
+ if (gameState === 'grid') {
+ gameState = 'cursor';
+ gridScreen.visible = false;
+ cursorScreen.visible = true;
+ } else {
+ gameState = 'grid';
+ gridScreen.visible = true;
+ cursorScreen.visible = false;
+ }
+};
+// Initialize screen visibility
+gridScreen.visible = true;
+cursorScreen.visible = false;
function movePlayer(direction) {
var newX = player.gridX;
var newY = player.gridY;
switch (direction) {
@@ -236,23 +314,26 @@
player.moveToGridPosition();
}
}
game.update = function () {
- // Check for key press transitions (just pressed)
- if (!lastKeyStates.w && keyStates.w) {
- movePlayer('w');
+ // Only handle grid controls when on grid screen
+ if (gameState === 'grid') {
+ // Check for key press transitions (just pressed)
+ if (!lastKeyStates.w && keyStates.w) {
+ movePlayer('w');
+ }
+ if (!lastKeyStates.a && keyStates.a) {
+ movePlayer('a');
+ }
+ if (!lastKeyStates.s && keyStates.s) {
+ movePlayer('s');
+ }
+ if (!lastKeyStates.d && keyStates.d) {
+ movePlayer('d');
+ }
+ // Update last key states
+ lastKeyStates.w = keyStates.w;
+ lastKeyStates.a = keyStates.a;
+ lastKeyStates.s = keyStates.s;
+ lastKeyStates.d = keyStates.d;
}
- if (!lastKeyStates.a && keyStates.a) {
- movePlayer('a');
- }
- if (!lastKeyStates.s && keyStates.s) {
- movePlayer('s');
- }
- if (!lastKeyStates.d && keyStates.d) {
- movePlayer('d');
- }
- // Update last key states
- lastKeyStates.w = keyStates.w;
- lastKeyStates.a = keyStates.a;
- lastKeyStates.s = keyStates.s;
- lastKeyStates.d = keyStates.d;
};
\ No newline at end of file
Used plugins
@upit/tween
