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;
});
var Pot = Container.expand(function () {
var self = Container.call(this);
var potBase = self.attachAsset('pot', {
anchorX: 0.5,
anchorY: 0.5
});
var rim = self.attachAsset('potRim', {
anchorX: 0.5,
anchorY: 0.5
});
rim.y = -200;
return self;
});
var Spoon = Container.expand(function () {
var self = Container.call(this);
var handle = self.attachAsset('spoonHandle', {
anchorX: 0.5,
anchorY: 1.0
});
var bowl = self.attachAsset('spoonBowl', {
anchorX: 0.5,
anchorY: 0.5
});
bowl.y = -360;
self.isDragging = false;
self.isInPot = false;
self.lastIsInPot = false;
self.isCollidingWithPot = false;
self.lastIsCollidingWithPot = false;
self.isStirring = false;
self.stirAngle = 0;
self.originalBowlTint = bowl.tint;
self.down = function (x, y, obj) {
self.isDragging = true;
draggedSpoon = self;
};
self.up = function (x, y, obj) {
self.isDragging = false;
self.isStirring = false;
draggedSpoon = null;
};
self.update = function () {
// Check if spoon bowl is in pot
var potCenterX = 2048 / 2;
var potCenterY = 1400;
var bowlWorldX = self.x;
var bowlWorldY = self.y - 360; // Bowl offset
var distanceToPot = Math.sqrt(Math.pow(bowlWorldX - potCenterX, 2) + Math.pow(bowlWorldY - potCenterY, 2));
// Update collision detection state
self.lastIsCollidingWithPot = self.isCollidingWithPot;
// Collision detection - spoon is hitting the pot rim/edge
var potOuterRadius = 350; // Pot outer boundary
var potInnerRadius = 240; // Pot inner boundary for stirring
self.isCollidingWithPot = distanceToPot >= potInnerRadius && distanceToPot <= potOuterRadius;
// Update pot state
self.lastIsInPot = self.isInPot;
self.isInPot = distanceToPot <= potInnerRadius; // Inside pot for stirring
// Handle collision feedback
if (!self.lastIsCollidingWithPot && self.isCollidingWithPot) {
// Just started colliding with pot edge
tween(self, {
scaleX: 0.95,
scaleY: 0.95
}, {
duration: 150,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(self, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 150,
easing: tween.easeIn
});
}
});
}
// Visual feedback when entering/leaving pot
if (!self.lastIsInPot && self.isInPot) {
// Just entered pot - tint spoon darker
tween(bowl, {
tint: 0x654321
}, {
duration: 300
});
tween(handle, {
tint: 0x654321
}, {
duration: 300
});
} else if (self.lastIsInPot && !self.isInPot) {
// Just left pot - restore original color
tween(bowl, {
tint: 0x8b4513
}, {
duration: 300
});
tween(handle, {
tint: 0x8b4513
}, {
duration: 300
});
}
// Handle depth when in pot
if (self.isInPot) {
// Make bowl appear to dip into pot
var depthFactor = Math.max(0, 1 - distanceToPot / 240);
bowl.y = -360 + depthFactor * 60; // Bowl sinks up to 60 pixels
// Adjust handle visibility based on depth
handle.alpha = Math.max(0.3, 1 - depthFactor * 0.7);
} else {
// Restore normal position when outside pot
bowl.y = -360;
handle.alpha = 1.0;
}
};
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 white background for cursor screen
var whiteBackground = cursorScreen.addChild(LK.getAsset('gridCell', {
anchorX: 0,
anchorY: 0,
width: 2048,
height: 2732
}));
whiteBackground.tint = 0xFFFFFF;
whiteBackground.x = 0;
whiteBackground.y = 0;
// Create cursor screen content
var cursorTitle = new Text2('Medieval Kitchen', {
size: 80,
fill: 0x000000
});
cursorTitle.anchor.set(0.5, 0.5);
cursorTitle.x = 2048 / 2;
cursorTitle.y = 400;
cursorScreen.addChild(cursorTitle);
// Create pot
var pot = cursorScreen.addChild(new Pot());
pot.x = 2048 / 2;
pot.y = 1400;
// Create spoon
var spoon = cursorScreen.addChild(new Spoon());
spoon.x = 2048 / 2 + 300;
spoon.y = 1200;
var draggedSpoon = null;
// 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;
}
};
// Cursor screen interaction
cursorScreen.move = function (x, y, obj) {
if (draggedSpoon && gameState === 'cursor') {
var potCenterX = 2048 / 2;
var potCenterY = 1400;
var newX = x;
var newY = y;
// Simplified collision detection - only prevent going through the pot wall from outside
var bowlWorldX = newX;
var bowlWorldY = newY - 360; // Bowl offset
var distanceToPot = Math.sqrt(Math.pow(bowlWorldX - potCenterX, 2) + Math.pow(bowlWorldY - potCenterY, 2));
var potOuterRadius = 350;
var potInnerRadius = 240;
// Get current spoon position
var currentBowlX = draggedSpoon.x;
var currentBowlY = draggedSpoon.y - 360;
var currentDistance = Math.sqrt(Math.pow(currentBowlX - potCenterX, 2) + Math.pow(currentBowlY - potCenterY, 2));
// Only prevent movement if trying to pass through pot wall from outside to inside
var wouldCollide = false;
if (currentDistance > potOuterRadius && distanceToPot >= potInnerRadius && distanceToPot <= potOuterRadius) {
// Trying to move from outside directly into the collision zone - not allowed
wouldCollide = true;
}
if (wouldCollide) {
// Don't allow the movement - keep spoon at current position
return;
}
// Allow all other movements - spoon can freely move in and out of pot
draggedSpoon.x = newX;
draggedSpoon.y = newY;
// Enhanced stirring mechanics - only when spoon is in pot
var potCenterX = 2048 / 2;
var potCenterY = 1400;
// Manual stirring when in pot and moving
if (draggedSpoon.isInPot && draggedSpoon.isDragging) {
// Calculate angle for stirring effect
var angle = Math.atan2(y - potCenterY, x - potCenterX);
draggedSpoon.rotation = angle + Math.PI / 4;
// Create stirring particles effect using tween
if (LK.ticks % 10 === 0) {
// Every 10 frames
// Animate pot slightly to show stirring effect
tween(pot, {
scaleX: 1.05,
scaleY: 1.05
}, {
duration: 100,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(pot, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 100,
easing: tween.easeIn
});
}
});
}
} else {
// Reset rotation when not stirring or not in pot
if (!draggedSpoon.isInPot) {
tween(draggedSpoon, {
rotation: 0
}, {
duration: 200,
easing: tween.easeOut
});
}
}
}
};
// 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
@@ -61,9 +61,9 @@
var rim = self.attachAsset('potRim', {
anchorX: 0.5,
anchorY: 0.5
});
- rim.y = -100;
+ rim.y = -200;
return self;
});
var Spoon = Container.expand(function () {
var self = Container.call(this);
@@ -74,9 +74,9 @@
var bowl = self.attachAsset('spoonBowl', {
anchorX: 0.5,
anchorY: 0.5
});
- bowl.y = -180;
+ bowl.y = -360;
self.isDragging = false;
self.isInPot = false;
self.lastIsInPot = false;
self.isCollidingWithPot = false;
@@ -97,15 +97,15 @@
// Check if spoon bowl is in pot
var potCenterX = 2048 / 2;
var potCenterY = 1400;
var bowlWorldX = self.x;
- var bowlWorldY = self.y - 180; // Bowl offset
+ var bowlWorldY = self.y - 360; // Bowl offset
var distanceToPot = Math.sqrt(Math.pow(bowlWorldX - potCenterX, 2) + Math.pow(bowlWorldY - potCenterY, 2));
// Update collision detection state
self.lastIsCollidingWithPot = self.isCollidingWithPot;
// Collision detection - spoon is hitting the pot rim/edge
- var potOuterRadius = 175; // Pot outer boundary
- var potInnerRadius = 120; // Pot inner boundary for stirring
+ var potOuterRadius = 350; // Pot outer boundary
+ var potInnerRadius = 240; // Pot inner boundary for stirring
self.isCollidingWithPot = distanceToPot >= potInnerRadius && distanceToPot <= potOuterRadius;
// Update pot state
self.lastIsInPot = self.isInPot;
self.isInPot = distanceToPot <= potInnerRadius; // Inside pot for stirring
@@ -157,15 +157,15 @@
}
// Handle depth when in pot
if (self.isInPot) {
// Make bowl appear to dip into pot
- var depthFactor = Math.max(0, 1 - distanceToPot / 120);
- bowl.y = -180 + depthFactor * 30; // Bowl sinks up to 30 pixels
+ var depthFactor = Math.max(0, 1 - distanceToPot / 240);
+ bowl.y = -360 + depthFactor * 60; // Bowl sinks up to 60 pixels
// Adjust handle visibility based on depth
handle.alpha = Math.max(0.3, 1 - depthFactor * 0.7);
} else {
// Restore normal position when outside pot
- bowl.y = -180;
+ bowl.y = -360;
handle.alpha = 1.0;
}
};
return self;
@@ -400,15 +400,15 @@
var newX = x;
var newY = y;
// Simplified collision detection - only prevent going through the pot wall from outside
var bowlWorldX = newX;
- var bowlWorldY = newY - 180; // Bowl offset
+ var bowlWorldY = newY - 360; // Bowl offset
var distanceToPot = Math.sqrt(Math.pow(bowlWorldX - potCenterX, 2) + Math.pow(bowlWorldY - potCenterY, 2));
- var potOuterRadius = 175;
- var potInnerRadius = 120;
+ var potOuterRadius = 350;
+ var potInnerRadius = 240;
// Get current spoon position
var currentBowlX = draggedSpoon.x;
- var currentBowlY = draggedSpoon.y - 180;
+ var currentBowlY = draggedSpoon.y - 360;
var currentDistance = Math.sqrt(Math.pow(currentBowlX - potCenterX, 2) + Math.pow(currentBowlY - potCenterY, 2));
// Only prevent movement if trying to pass through pot wall from outside to inside
var wouldCollide = false;
if (currentDistance > potOuterRadius && distanceToPot >= potInnerRadius && distanceToPot <= potOuterRadius) {
Used plugins
@upit/tween
