User prompt
Place the dpad base on top of the arrows And tint it dark grey
User prompt
Make dpad arrows yellow
User prompt
Make sure d pad arrows don't overlap
Code edit (2 edits merged)
Please save this source code
User prompt
Make the button dpad 400 in size
User prompt
Make all dpad buttons 450 in size, make sure they don't overlap
Code edit (2 edits merged)
Please save this source code
User prompt
Expose dpad buttons size as a shared variable
Code edit (3 edits merged)
Please save this source code
User prompt
Make the dpad arrows bigger make sure they don't intersect
User prompt
Move the whole dpad closer to the middle of the screen
User prompt
Make just the dpad base smaller
User prompt
Make sure the dpad and arrows are bigger
User prompt
Make the dpad bigger
Code edit (1 edits merged)
Please save this source code
User prompt
Bring b button closer to a button
User prompt
Please fix the bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'on')' in or related to this line: 'dpadRight.on('down', function () {' Line Number: 93
User prompt
Please fix the bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'on')' in or related to this line: 'dpadUp.on('down', function () {' Line Number: 79
User prompt
Re arrange methods based on execution order
User prompt
Delete duplicate or irrelevant comments
User prompt
Make the character a bit bigger expose it's size in a variable.
User prompt
Make sure the b botton is not outside the screen
User prompt
Move both buttons closer to the center of the screen
User prompt
Make A button smaller and add space in-between A button and B button
User prompt
Group all variables
/**** * Classes ****/ // OnScreenController class encapsulating A, B buttons and D-pad var OnScreenController = Container.expand(function () { var self = Container.call(this); // Customizable controller button positions and colors // Customizable controller button positions and colors var yPosAdjustment = -273.2; // Customizable Y position adjustment for D-pad var buttonYPosAdjustment = -273.2; // Customizable Y position adjustment for buttons var aButtonColor = 0x00FF00; // Customizable A button color var bButtonColor = 0xFF0000; // Customizable B button color var aButtonPosition = { x: 1598, y: 2432 + buttonYPosAdjustment + 150 }; // Customizable A button position var bButtonPosition = { x: 1898, y: 2432 + buttonYPosAdjustment - 50 }; // Customizable B button position var aButton = self.attachAsset('aButton', { anchorX: 0.5, anchorY: 0.5, x: aButtonPosition.x, y: aButtonPosition.y, tint: aButtonColor // Use customizable A button color }); var bButton = self.attachAsset('bButton', { anchorX: 0.5, anchorY: 0.5, x: bButtonPosition.x, y: bButtonPosition.y, tint: bButtonColor // Use customizable B button color }); // D-pad var dpadBase = self.attachAsset('dpadBase', { anchorX: 0.5, anchorY: 0.5, x: 300, y: 2432 + yPosAdjustment, scaleX: 1.5, scaleY: 1.5 }); var dpadLeft = self.attachAsset('dpadButton', { anchorX: 0.5, anchorY: 0.5, x: dpadBase.x - 150, y: dpadBase.y, width: 250, height: 250, orientation: 3 // Correct orientation for left direction }); dpadLeft.on('down', function () { if (character) { character.x -= 145.2; // Move character left by 145.2 pixels to match grid size } }); // A and B button event listeners var dpadUp = self.attachAsset('dpadButton', { anchorX: 0.5, anchorY: 0.5, x: dpadBase.x, y: dpadBase.y - 150, width: 250, height: 250, orientation: 0 // Correct orientation for up direction }); dpadUp.on('down', function () { if (character) { character.y -= 145.2; // Move character up by 145.2 pixels to match grid size } }); aButton.on('down', function () { console.log('A button pressed'); aButton.tint = 0xAAAAAA; // Tint A button to a darker color when pressed }); aButton.on('up', function () { aButton.tint = 0x00FF00; // Return A button to original green color when released }); var dpadRight = self.attachAsset('dpadButton', { anchorX: 0.5, anchorY: 0.5, x: dpadBase.x + 150, y: dpadBase.y, width: 250, height: 250, orientation: 1 // Correct orientation for right direction }); dpadRight.on('down', function () { if (character) { character.x += 145.2; // Move character right by 145.2 pixels to match grid size } }); bButton.on('down', function () { console.log('B button pressed'); bButton.tint = 0xAAAAAA; // Tint B button to a darker color when pressed }); bButton.on('up', function () { bButton.tint = 0xFF0000; // Return B button to original red color when released }); var dpadDown = self.attachAsset('dpadButton', { anchorX: 0.5, anchorY: 0.5, x: dpadBase.x, y: dpadBase.y + 150, width: 250, height: 250, orientation: 2 // Correct orientation for down direction }); dpadDown.on('down', function () { if (character) { character.y += 145.2; // Move character down by 145.2 pixels to match grid size } }); }); /**** * Initialize Game ****/ // Instantiate and add OnScreenController to the game var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ // Grouped customizable variables var color = 0xFFFFFF; // Color variable var x = 0; // X position variable var movementDistance = 100; // Movement distance for character var shadowOffsetY = 0.5; // Shadow Y offset multiplier var yPosAdjustment = -273.2; // Y position adjustment for D-pad var buttonYPosAdjustment = -273.2; // Y position adjustment for buttons var aButtonColor = 0x00FF00; // A button color var bButtonColor = 0xFF0000; // B button color var aButtonPosition = { x: 1598, y: 2432 + buttonYPosAdjustment + 150 }; // A button position var bButtonPosition = { x: 1898, y: 2432 + buttonYPosAdjustment - 50 }; // B button position function moveCharacter(dx, dy) { // Calculate new position based on direction and customizable distance var newX = character.x + dx * movementDistance; var newY = character.y + dy * movementDistance; // Check if new position is within bounds and if it's a wall tile var newTile = getTileAtPosition(newX, newY); if (newTile && wallTiles.indexOf(newTile) === -1) { // Move character to new position character.x = newX; character.y = newY; character.currentTile = newTile; } } var onScreenController = game.addChild(new OnScreenController()); // D-pad button event listeners moved inside OnScreenController class // Character movement function removed var touchStartPos = null; var touchEndPos = null; // Swipe movement 'down' event listener removed // Swipe movement 'up' event listener removed function initializeGame() { return game; } var game = initializeGame(); var gridSize = 10; var character; var characterShadow = LK.getAsset('characterShadow', { anchorX: 0.5, anchorY: 0.5, x: 0, y: 0 }); var wallTiles = []; var floorTiles = []; var selectedTile; var tileOriginalColor; var isGameStarted = false; var grid = new Array(gridSize * gridSize); var fadeEffect = { alpha: 0, speed: 0.01 }; 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 * 145.2 + (2048 - gridSize * 145.2) / 2, y: y * 145.2 + (2732 - gridSize * 145.2) / 2 - 300 }); 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: 0, y: 0 }, { x: 0, y: (gridSize - 1) * 100 }, { x: (gridSize - 1) * 100, y: 0 }, { x: (gridSize - 1) * 100, y: (gridSize - 1) * 100 }]; return corners.some(function (corner) { return tile.x === corner.x && tile.y === corner.y; }); } // 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; // Removed duplicate fadeEffect declaration 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 character = LK.getAsset('character', { anchorX: 0.5, anchorY: 0.5, x: holeTile.x, y: holeTile.y - 10 }); var shadowOffsetY = 0.5; // Customizable shadow Y offset multiplier // Optimized shadow offset calculation characterShadow.x = character.x; characterShadow.y = character.y + characterShadow.height * shadowOffsetY; // Use customizable shadow Y offset multiplier character.currentTile = getTileAtPosition(holeTile.x, holeTile.y); // Correctly initialize character's current tile game.addChild(character); } }); // Removed duplicate character spawn and patrol points setup logic // 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
/****
* Classes
****/
// OnScreenController class encapsulating A, B buttons and D-pad
var OnScreenController = Container.expand(function () {
var self = Container.call(this);
// Customizable controller button positions and colors
// Customizable controller button positions and colors
var yPosAdjustment = -273.2; // Customizable Y position adjustment for D-pad
var buttonYPosAdjustment = -273.2; // Customizable Y position adjustment for buttons
var aButtonColor = 0x00FF00; // Customizable A button color
var bButtonColor = 0xFF0000; // Customizable B button color
var aButtonPosition = {
x: 1598,
y: 2432 + buttonYPosAdjustment + 150
}; // Customizable A button position
var bButtonPosition = {
x: 1898,
y: 2432 + buttonYPosAdjustment - 50
}; // Customizable B button position
var aButton = self.attachAsset('aButton', {
anchorX: 0.5,
anchorY: 0.5,
x: aButtonPosition.x,
y: aButtonPosition.y,
tint: aButtonColor // Use customizable A button color
});
var bButton = self.attachAsset('bButton', {
anchorX: 0.5,
anchorY: 0.5,
x: bButtonPosition.x,
y: bButtonPosition.y,
tint: bButtonColor // Use customizable B button color
});
// D-pad
var dpadBase = self.attachAsset('dpadBase', {
anchorX: 0.5,
anchorY: 0.5,
x: 300,
y: 2432 + yPosAdjustment,
scaleX: 1.5,
scaleY: 1.5
});
var dpadLeft = self.attachAsset('dpadButton', {
anchorX: 0.5,
anchorY: 0.5,
x: dpadBase.x - 150,
y: dpadBase.y,
width: 250,
height: 250,
orientation: 3 // Correct orientation for left direction
});
dpadLeft.on('down', function () {
if (character) {
character.x -= 145.2; // Move character left by 145.2 pixels to match grid size
}
});
// A and B button event listeners
var dpadUp = self.attachAsset('dpadButton', {
anchorX: 0.5,
anchorY: 0.5,
x: dpadBase.x,
y: dpadBase.y - 150,
width: 250,
height: 250,
orientation: 0 // Correct orientation for up direction
});
dpadUp.on('down', function () {
if (character) {
character.y -= 145.2; // Move character up by 145.2 pixels to match grid size
}
});
aButton.on('down', function () {
console.log('A button pressed');
aButton.tint = 0xAAAAAA; // Tint A button to a darker color when pressed
});
aButton.on('up', function () {
aButton.tint = 0x00FF00; // Return A button to original green color when released
});
var dpadRight = self.attachAsset('dpadButton', {
anchorX: 0.5,
anchorY: 0.5,
x: dpadBase.x + 150,
y: dpadBase.y,
width: 250,
height: 250,
orientation: 1 // Correct orientation for right direction
});
dpadRight.on('down', function () {
if (character) {
character.x += 145.2; // Move character right by 145.2 pixels to match grid size
}
});
bButton.on('down', function () {
console.log('B button pressed');
bButton.tint = 0xAAAAAA; // Tint B button to a darker color when pressed
});
bButton.on('up', function () {
bButton.tint = 0xFF0000; // Return B button to original red color when released
});
var dpadDown = self.attachAsset('dpadButton', {
anchorX: 0.5,
anchorY: 0.5,
x: dpadBase.x,
y: dpadBase.y + 150,
width: 250,
height: 250,
orientation: 2 // Correct orientation for down direction
});
dpadDown.on('down', function () {
if (character) {
character.y += 145.2; // Move character down by 145.2 pixels to match grid size
}
});
});
/****
* Initialize Game
****/
// Instantiate and add OnScreenController to the game
var game = new LK.Game({
backgroundColor: 0x000000
});
/****
* Game Code
****/
// Grouped customizable variables
var color = 0xFFFFFF; // Color variable
var x = 0; // X position variable
var movementDistance = 100; // Movement distance for character
var shadowOffsetY = 0.5; // Shadow Y offset multiplier
var yPosAdjustment = -273.2; // Y position adjustment for D-pad
var buttonYPosAdjustment = -273.2; // Y position adjustment for buttons
var aButtonColor = 0x00FF00; // A button color
var bButtonColor = 0xFF0000; // B button color
var aButtonPosition = {
x: 1598,
y: 2432 + buttonYPosAdjustment + 150
}; // A button position
var bButtonPosition = {
x: 1898,
y: 2432 + buttonYPosAdjustment - 50
}; // B button position
function moveCharacter(dx, dy) {
// Calculate new position based on direction and customizable distance
var newX = character.x + dx * movementDistance;
var newY = character.y + dy * movementDistance;
// Check if new position is within bounds and if it's a wall tile
var newTile = getTileAtPosition(newX, newY);
if (newTile && wallTiles.indexOf(newTile) === -1) {
// Move character to new position
character.x = newX;
character.y = newY;
character.currentTile = newTile;
}
}
var onScreenController = game.addChild(new OnScreenController());
// D-pad button event listeners moved inside OnScreenController class
// Character movement function removed
var touchStartPos = null;
var touchEndPos = null;
// Swipe movement 'down' event listener removed
// Swipe movement 'up' event listener removed
function initializeGame() {
return game;
}
var game = initializeGame();
var gridSize = 10;
var character;
var characterShadow = LK.getAsset('characterShadow', {
anchorX: 0.5,
anchorY: 0.5,
x: 0,
y: 0
});
var wallTiles = [];
var floorTiles = [];
var selectedTile;
var tileOriginalColor;
var isGameStarted = false;
var grid = new Array(gridSize * gridSize);
var fadeEffect = {
alpha: 0,
speed: 0.01
};
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 * 145.2 + (2048 - gridSize * 145.2) / 2,
y: y * 145.2 + (2732 - gridSize * 145.2) / 2 - 300
});
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: 0,
y: 0
}, {
x: 0,
y: (gridSize - 1) * 100
}, {
x: (gridSize - 1) * 100,
y: 0
}, {
x: (gridSize - 1) * 100,
y: (gridSize - 1) * 100
}];
return corners.some(function (corner) {
return tile.x === corner.x && tile.y === corner.y;
});
}
// 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;
// Removed duplicate fadeEffect declaration
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
character = LK.getAsset('character', {
anchorX: 0.5,
anchorY: 0.5,
x: holeTile.x,
y: holeTile.y - 10
});
var shadowOffsetY = 0.5; // Customizable shadow Y offset multiplier
// Optimized shadow offset calculation
characterShadow.x = character.x;
characterShadow.y = character.y + characterShadow.height * shadowOffsetY; // Use customizable shadow Y offset multiplier
character.currentTile = getTileAtPosition(holeTile.x, holeTile.y); // Correctly initialize character's current tile
game.addChild(character);
}
});
// Removed duplicate character spawn and patrol points setup logic
// 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
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.