Code edit (2 edits merged)
Please save this source code
User prompt
Center the grid and tiles to the screen
User prompt
Make the grid smaller, to fit the center of the screen
User prompt
Make sure floor tiles are dynamic too
User prompt
Please fix the bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'width')' in or related to this line: 'var aButtonPosition = {' Line Number: 34
User prompt
Make the grid more customizable, expose variables and replace values with screen width and screen height
User prompt
Debug the code
Code edit (1 edits merged)
Please save this source code
User prompt
Make the grid background the same size as the grid
User prompt
Move the grid background 300 units up
User prompt
Center grid background to the screen
User prompt
Apply the same offset that the grid has so the background is corrected aligned with the grid
User prompt
Center the background to the grid
User prompt
Add a black square background behind the grid make it bigger than the grid
User prompt
Apply the same offset to the grid border to match grid position make the border thicker
User prompt
Delete all references and assets from the on screen controller background
User prompt
Make sure the grid and the grid border match, make the border thicker
User prompt
Add a black border around the grid
User prompt
Delete the controllers background and change the screen background to the light teal gray from the controller background
User prompt
Add 2 instances of the controller background along each the sides of the screen
User prompt
Debug the code, the character moves pass the grid
User prompt
The character can only move inside the grid
User prompt
Character can only move inside the grid
User prompt
If character is entering a wall bump it's position to the last good position
User prompt
Implement collisions with the character and the walls
/**** * Classes ****/ // OnScreenController class encapsulating A, B buttons and D-pad var OnScreenController = Container.expand(function () { var self = Container.call(this); // Add a background for the on screen controllers var controllerBackground = self.attachAsset('controllerBackground', { anchorX: 0.5, anchorY: 0.5, x: 1024, y: 2432, scaleX: 2.0, scaleY: 2.0 }); var yPosAdjustment = -100; var buttonYPosAdjustment = -273.2; // Removed redundant tint application on A and B buttons var aButtonPosition = { x: LK.screen.width * 0.68, y: LK.screen.height * 0.89 + buttonYPosAdjustment + LK.screen.height * 0.055 }; var bButtonPosition = { x: LK.screen.width * 0.88, y: LK.screen.height * 0.89 + buttonYPosAdjustment - LK.screen.height * 0.018 }; var buttonSize = { width: LK.screen.width * 0.2, height: LK.screen.width * 0.2 }; var aButton = self.attachAsset('aButton', { anchorX: 0.5, anchorY: 0.5, x: aButtonPosition.x, y: aButtonPosition.y, width: buttonSize.width, height: buttonSize.height }); var bButton = self.attachAsset('bButton', { anchorX: 0.5, anchorY: 0.5, x: bButtonPosition.x, y: bButtonPosition.y, width: buttonSize.width, height: buttonSize.height }); // D-pad var dpadBase = self.attachAsset('dpadBase', { anchorX: 0.5, anchorY: 0.5, x: LK.screen.width * 0.24, y: LK.screen.height * 0.89 + yPosAdjustment, scaleX: LK.screen.width * 0.0011, scaleY: LK.screen.width * 0.0011 }); // Move dpad base to the top of the display list so it appears on top of the arrows self.setChildIndex(dpadBase, self.children.length - 1); var dpadLeft = self.attachAsset('dpadButton', { anchorX: 0.5, anchorY: 0.5, x: dpadBase.x - 250, y: dpadBase.y, width: 450, height: 450, tint: 0xFFFF00, orientation: 3 }); dpadLeft.on('down', function () { if (character) { character.x -= 145.2; // Move character left by 145.2 pixels to match grid size } // Removed tint change on press }); dpadLeft.on('up', function () { // Removed tint reset on release }); // A and B button event listeners var dpadUp = self.attachAsset('dpadButton', { anchorX: 0.5, anchorY: 0.5, x: dpadBase.x, y: dpadBase.y - 250, width: 450, height: 450, tint: 0xFFFF00, orientation: 0 }); dpadUp.on('down', function () { if (character) { character.y -= 145.2; // Move character up by 145.2 pixels to match grid size } // Removed tint change on press }); dpadUp.on('up', function () { // Removed tint reset on release }); aButton.on('down', function () { console.log('A button pressed'); // Removed tint change on press }); aButton.on('up', function () { // Removed tint reset on release }); var dpadRight = self.attachAsset('dpadButton', { anchorX: 0.5, anchorY: 0.5, x: dpadBase.x + 250, y: dpadBase.y, width: 450, height: 450, tint: 0xFFFF00, orientation: 1 }); dpadRight.on('down', function () { if (character) { character.x += 145.2; // Move character right by 145.2 pixels to match grid size } // Removed tint change on press }); dpadRight.on('up', function () { // Removed tint reset on release }); bButton.on('down', function () { console.log('B button pressed'); // Removed tint change on press }); bButton.on('up', function () { // Removed tint reset on release }); var dpadDown = self.attachAsset('dpadButton', { anchorX: 0.5, anchorY: 0.5, x: dpadBase.x, y: dpadBase.y + 250, width: 450, height: 450, tint: 0xFFFF00, orientation: 2 }); dpadDown.on('down', function () { if (character) { character.y += 145.2; // Move character down by 145.2 pixels to match grid size } // Removed tint change on press }); dpadDown.on('up', function () { // Removed tint reset on release }); }); /**** * Initialize Game ****/ // Instantiate and add OnScreenController to the game var game = new LK.Game({ backgroundColor: 0xb2beb5 // Light teal gray background }); /**** * Game Code ****/ function moveCharacter(dx, dy) { var newX = character.x + dx * movementDistance; var newY = character.y + dy * movementDistance; // Check if new position is within bounds and if it's a floor tile var newTile = getTileAtPosition(newX, newY); if (newTile && floorTiles.indexOf(newTile) !== -1 && wallTiles.indexOf(newTile) === -1) { // Move character to new position character.x = newX; character.y = newY; character.currentTile = newTile; } } var gridSize = 10; var character; var wallTiles = []; var floorTiles = []; var isGameStarted = false; var grid = new Array(gridSize * gridSize); var fadeEffect = { alpha: 0, speed: 0.01 }; var onScreenController; onScreenController = game.addChild(new OnScreenController()); // D-pad button event listeners moved inside OnScreenController class // Character movement function removed function createTiles() { for (var i = 0; i < gridSize * gridSize; i++) { var x = i % gridSize; var y = Math.floor(i / gridSize); var tile; if (x === 0 || y === 0 || x === gridSize - 1 || y === gridSize - 1) { tile = LK.getAsset('wallTile', { anchorX: 0.5, anchorY: 0.5, x: x * (LK.screen.width / gridSize) + (LK.screen.width - gridSize * (LK.screen.width / gridSize)) / 2, y: y * (LK.screen.height / gridSize) + (LK.screen.height - gridSize * (LK.screen.height / gridSize)) / 2 - LK.screen.height * 0.11 }); wallTiles.push(tile); } else { tile = LK.getAsset('floorTile', { anchorX: 0.5, anchorY: 0.5, x: x * 145.2 + (2048 - gridSize * 145.2) / 2, y: y * 145.2 + (2732 - gridSize * 145.2) / 2 - 300 }); floorTiles.push(tile); } game.addChild(tile); grid[i] = tile; } } createTiles(); // Function to check if a tile is in a corner function isTileInCorner(tile) { var corners = [{ x: (2048 - gridSize * 145.2) / 2, y: (2732 - gridSize * 145.2) / 2 - 300 }, { x: (2048 - gridSize * 145.2) / 2, y: (gridSize - 1) * 145.2 + (2732 - gridSize * 145.2) / 2 - 300 }, { x: (gridSize - 1) * 145.2 + (2048 - gridSize * 145.2) / 2, y: (2732 - gridSize * 145.2) / 2 - 300 }, { x: (gridSize - 1) * 145.2 + (2048 - gridSize * 145.2) / 2, y: (gridSize - 1) * 145.2 + (2732 - gridSize * 145.2) / 2 - 300 }]; return corners.some(function (corner) { return Math.abs(tile.x - corner.x) < 1 && Math.abs(tile.y - corner.y) < 1; }); } // Select a random wall tile and replace it with a hole tile, ensuring it's not in a corner var randomWallTileIndex; var randomWallTile; do { randomWallTileIndex = Math.floor(Math.random() * wallTiles.length); randomWallTile = wallTiles[randomWallTileIndex]; } while (isTileInCorner(randomWallTile)); var holeTile = LK.getAsset('holeTile', { anchorX: 0.5, anchorY: 0.5, x: randomWallTile.x, y: randomWallTile.y }); game.addChild(holeTile); game.removeChild(randomWallTile); wallTiles[randomWallTileIndex] = holeTile; LK.on('tick', function () { if (fadeEffect.alpha < 1) { fadeEffect.alpha += fadeEffect.speed; game.alpha = fadeEffect.alpha; } else if (!isGameStarted) { // Patrol points setup logic removed isGameStarted = true; // Ensure game start logic is only triggered once // Initialize game elements here after fade-in completes // Spawn an instance of the character on the hole tile // Create a shadow blob for the character feet character = LK.getAsset('character', { anchorX: 0.5, anchorY: 0.5, x: holeTile.x, y: holeTile.y - 50, scaleX: 1.25, scaleY: 1.25 }); var characterShadow = LK.getAsset('characterShadow', { anchorX: 0.5, anchorY: 0.5, x: 0, y: 72.6, scaleX: 0.6, // Shrink the shadow a couple pixels scaleY: 0.6, // Shrink the shadow a couple pixels alpha: 0.5 }); character.addChild(characterShadow); character.currentTile = getTileAtPosition(holeTile.x, holeTile.y); // Correctly initialize character's current tile game.addChild(character); } }); // Define a function to get the tile at a given position function getTileAtPosition(x, y) { var index = Math.floor(y / 100) * gridSize + Math.floor(x / 100); return grid[index]; } // Character movement logic removed
===================================================================
--- original.js
+++ change.js
@@ -16,18 +16,18 @@
var yPosAdjustment = -100;
var buttonYPosAdjustment = -273.2;
// Removed redundant tint application on A and B buttons
var aButtonPosition = {
- x: 1400,
- y: 2432 + buttonYPosAdjustment + 150
+ x: LK.screen.width * 0.68,
+ y: LK.screen.height * 0.89 + buttonYPosAdjustment + LK.screen.height * 0.055
};
var bButtonPosition = {
- x: 1800,
- y: 2432 + buttonYPosAdjustment - 50
+ x: LK.screen.width * 0.88,
+ y: LK.screen.height * 0.89 + buttonYPosAdjustment - LK.screen.height * 0.018
};
var buttonSize = {
- width: 400,
- height: 400
+ width: LK.screen.width * 0.2,
+ height: LK.screen.width * 0.2
};
var aButton = self.attachAsset('aButton', {
anchorX: 0.5,
anchorY: 0.5,
@@ -47,12 +47,12 @@
// D-pad
var dpadBase = self.attachAsset('dpadBase', {
anchorX: 0.5,
anchorY: 0.5,
- x: 500,
- y: 2432 + yPosAdjustment,
- scaleX: 3.0,
- scaleY: 3.0
+ x: LK.screen.width * 0.24,
+ y: LK.screen.height * 0.89 + yPosAdjustment,
+ scaleX: LK.screen.width * 0.0011,
+ scaleY: LK.screen.width * 0.0011
});
// Move dpad base to the top of the display list so it appears on top of the arrows
self.setChildIndex(dpadBase, self.children.length - 1);
var dpadLeft = self.attachAsset('dpadButton', {
@@ -193,10 +193,10 @@
if (x === 0 || y === 0 || x === gridSize - 1 || y === gridSize - 1) {
tile = LK.getAsset('wallTile', {
anchorX: 0.5,
anchorY: 0.5,
- x: x * 145.2 + (2048 - gridSize * 145.2) / 2,
- y: y * 145.2 + (2732 - gridSize * 145.2) / 2 - 300
+ x: x * (LK.screen.width / gridSize) + (LK.screen.width - gridSize * (LK.screen.width / gridSize)) / 2,
+ y: y * (LK.screen.height / gridSize) + (LK.screen.height - gridSize * (LK.screen.height / gridSize)) / 2 - LK.screen.height * 0.11
});
wallTiles.push(tile);
} else {
tile = LK.getAsset('floorTile', {
grey square, black border. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
simple light yellow button front view game console, clean, rounded edges, high resolution, graphic. Single Game Texture. In-Game asset. 2d. Blank background. High contrast.
Worn out sticker for a video game, 90s style, cheese, simple, vintage. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
wall view from top-down, game asset videogame, black color, simple. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows. worn out sticker. 90's style. vintage. simple. top-down view. poster. sticker
top-down view, videogame character enemy, roomba, 90s style sticker, flat, no perspective, silhouette, black and white, cartoon, fun, simple, from above. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
top-down view, videogame heart, 90s style sticker, flat, no perspective, silhouette, white, cartoon, fun, simple, from above. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
Black square with white outline. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.