Code edit (2 edits merged)
Please save this source code
User prompt
Make the interactive zone for the arrows bigger
User prompt
Tint the arrows yellow
User prompt
Expand a bit the position of the d pad arrows
Code edit (1 edits merged)
Please save this source code
User prompt
Make arrows semitransparent
User prompt
Add the corresponding arrow to each d pad button
User prompt
Rename the asset dpad button to dpad button down
User prompt
Replace the light teal color for a fun yellow one
User prompt
Optimize dpad listeners
User prompt
Please fix the bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'width')' in or related to this line: 'var tileWidth = LK.screen.width * .6 / (gridSize - 1); // Adjust tile width to ensure tiles are touching' Line Number: 200
User prompt
Please fix the bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'on')' in or related to this line: 'this[dpadDirection].on('up', function () {' Line Number: 157
User prompt
Optimize the code
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'x')' in or related to this line: 'character = LK.getAsset('character', {' Line Number: 272
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'x')' in or related to this line: 'character = LK.getAsset('character', {' Line Number: 276
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'x')' in or related to this line: 'character = LK.getAsset('character', {' Line Number: 275
User prompt
Fix the issues that are causing the game to not start
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'x')' in or related to this line: 'character = LK.getAsset('character', {' Line Number: 274
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'x')' in or related to this line: 'character = LK.getAsset('character', {' Line Number: 269
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'x')' in or related to this line: 'character = LK.getAsset('character', {' Line Number: 275
User prompt
Please fix the bug: 'TypeError: Cannot read properties of undefined (reading 'x')' in or related to this line: 'character = LK.getAsset('character', {' Line Number: 274
User prompt
Please fix the bug: 'ReferenceError: holeTile is not defined' in or related to this line: 'character = LK.getAsset('character', {' Line Number: 273
User prompt
Please fix the bug: 'ReferenceError: holeTile is not defined' in or related to this line: 'character = LK.getAsset('character', {' Line Number: 271
User prompt
Please fix the bug: 'ReferenceError: holeTile is not defined' in or related to this line: 'character = LK.getAsset('character', {' Line Number: 264
User prompt
Please fix the bug: 'ReferenceError: holeTile is not defined' in or related to this line: 'character = LK.getAsset('character', {' Line Number: 264
/**** * Classes ****/ // OnScreenController class encapsulating A, B buttons and D-pad var OnScreenController = Container.expand(function () { var self = Container.call(this); var yPosAdjustment = -180; var buttonYPosAdjustment = -273.2; if (!LK.screen) { return; } 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 buttonFrameA = self.attachAsset('buttonFrame', { anchorX: 0.5, anchorY: 0.5, x: aButtonPosition.x, y: aButtonPosition.y, width: buttonSize.width * 1.2, height: buttonSize.height * 1.2 }); var buttonFrameB = self.attachAsset('buttonFrame', { anchorX: 0.5, anchorY: 0.5, x: bButtonPosition.x, y: bButtonPosition.y, width: buttonSize.width * 1.2 * .7, // Match B button's scaled size height: buttonSize.height * 1.2 * .7 }); var aButton = self.attachAsset('aButton', { anchorX: 0.5, anchorY: 0.5, x: aButtonPosition.x, y: aButtonPosition.y, width: buttonSize.width, height: buttonSize.height // Removed tint application }); var bButton = self.attachAsset('bButton', { anchorX: 0.5, anchorY: 0.5, x: bButtonPosition.x, y: bButtonPosition.y, width: buttonSize.width * .7, height: buttonSize.height * .7 }); var dpadBase = self.attachAsset('dpadBase', { anchorX: 0.5, anchorY: 0.5, x: LK.screen.width * 0.24, y: LK.screen.height * 0.89 + yPosAdjustment - 10, scaleX: LK.screen.width * 0.003, scaleY: LK.screen.width * 0.003 }); self.setChildIndex(dpadBase, self.children.length - 1); var moveInterval; function startMovingCharacter(xDir, yDir) { if (moveInterval) { LK.clearInterval(moveInterval); } moveCharacter(xDir, yDir); moveInterval = LK.setInterval(function () { moveCharacter(xDir, yDir); }, 150); } var dpadDirections = [{ button: dpadLeft, xDir: -1, yDir: 0 }, { button: dpadUp, xDir: 0, yDir: -1 }, { button: dpadRight, xDir: 1, yDir: 0 }, { button: dpadDown, xDir: 0, yDir: 1 }]; dpadDirections.forEach(function (direction) { direction.button.on('down', function () { startMovingCharacter(direction.xDir, direction.yDir); }); direction.button.on('up', function () { LK.clearInterval(moveInterval); }); }); }); /**** * Initialize Game ****/ // Instantiate and add OnScreenController to the game var game = new LK.Game({ backgroundColor: 0xb2beb5 // Light teal gray background }); /**** * Game Code ****/ function moveCharacter(xDir, yDir) { // Extracted character movement logic to a separate function for clarity and reuse function attemptCharacterMove(xDir, yDir) { var nextX = character.x + xDir * tileWidth; var nextY = character.y + yDir * tileHeight; if (nextX >= gridOffsetX && nextX <= gridOffsetX + gridSize * tileWidth && nextY >= gridOffsetY && nextY <= gridOffsetY + gridSize * tileHeight) { var nextTileIndex = Math.floor((nextY - gridOffsetY) / tileHeight) * gridSize + Math.floor((nextX - gridOffsetX) / tileWidth); if (floorTiles.includes(grid[nextTileIndex]) || grid[nextTileIndex] === holeTile) { character.x = nextX; character.y = nextY; character.currentTile = grid[nextTileIndex]; } } } moveCharacter = attemptCharacterMove; } var gridSize = 10; var character = null; var wallTiles = []; var floorTiles = []; var grid = new Array(gridSize * gridSize); // Consolidate tile dimension and offset calculations into a single function function calculateTileDimensionsAndOffsets(gridSize) { var tileWidth = 2048 * .6 / (gridSize - 1); var tileHeight = tileWidth; var gridOffsetX = (2048 - tileWidth * (gridSize - 1)) / 2; var gridOffsetY = (2732 - tileHeight * (gridSize - 1)) / 2 - 2732 * 0.15; return { tileWidth: tileWidth, tileHeight: tileHeight, gridOffsetX: gridOffsetX, gridOffsetY: gridOffsetY }; } var _calculateTileDimensi = calculateTileDimensionsAndOffsets(gridSize), tileWidth = _calculateTileDimensi.tileWidth, tileHeight = _calculateTileDimensi.tileHeight, gridOffsetX = _calculateTileDimensi.gridOffsetX, gridOffsetY = _calculateTileDimensi.gridOffsetY; var onScreenController = game.addChild(new OnScreenController()); // Character movement function removed function createTiles() { // Create a black square background for the grid // Removed console.error log for uninitialized LK.screen if (!LK.screen) { return; } var gridBackground = LK.getAsset('gridBackground', { anchorX: 0.5, anchorY: 0.8, x: LK.screen.width / 2, y: LK.screen.height / 2, width: LK.screen.width * .7, height: LK.screen.height * .6, color: 0x000000 }); game.addChild(gridBackground); 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('floorTile', { anchorX: 0.5, anchorY: 0.5, x: x * tileWidth + gridOffsetX, y: y * tileHeight + gridOffsetY }); floorTiles.push(tile); game.addChild(tile); grid[i] = tile; } } // Add walls after floor tiles to ensure they render on top for (var i = 0; i < gridSize * gridSize; i++) { var x = i % gridSize; var y = Math.floor(i / gridSize); if (x === 0 || y === 0 || x === gridSize - 1 || y === gridSize - 1) { var tile = LK.getAsset('wallTile', { anchorX: 0.5, anchorY: 0.5, x: x * tileWidth + gridOffsetX, y: y * tileHeight + gridOffsetY }); wallTiles.push(tile); game.addChild(tile); grid[i] = tile; } } } createTiles(); function isTileInCorner(tile) { var corners = [{ x: gridOffsetX, y: gridOffsetY }, { x: gridOffsetX, y: (gridSize - 1) * tileHeight + gridOffsetY }, { x: (gridSize - 1) * tileWidth + gridOffsetX, y: gridOffsetY }, { x: (gridSize - 1) * tileWidth + gridOffsetX, y: (gridSize - 1) * tileHeight + gridOffsetY }]; return corners.some(function (corner) { return tile && Math.abs(tile.x - corner.x) < tileWidth / 2 && Math.abs(tile.y - corner.y) < tileHeight / 2; }); } function placeHoleTile() { do { randomWallTileIndex = Math.floor(Math.random() * wallTiles.length); randomWallTile = wallTiles[randomWallTileIndex]; } while (isTileInCorner(randomWallTile)); if (!LK.screen) { return; } 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; } placeHoleTile(); var isGameStarted = false; LK.on('tick', function () { if (!isGameStarted) { var createCharacterAndShadow = function createCharacterAndShadow() { character = LK.getAsset('character', { anchorX: 0.5, anchorY: 0.5, x: holeTile.x, y: holeTile.y - 50, scaleX: 1.5, scaleY: 1.5 }); var characterShadow = LK.getAsset('characterShadow', { anchorX: 0.5, anchorY: 0.5, x: -15, y: 50, scaleX: 0.6, scaleY: 0.6, alpha: 0.5 }); character.addChild(characterShadow); character.currentTile = getTileAtPosition(holeTile.x, holeTile.y); // Correctly initialize character's current tile game.addChild(character); }; isGameStarted = true; // Ensure game start logic is only triggered once createCharacterAndShadow(); } }); // 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]; } // Optimized speaker hole creation with a function to reduce redundancy function createSpeakerHoles() { if (!LK.screen) { return; } var baseX = LK.screen.width / 2; var baseY = LK.screen.height / 2; var offsets = [880, -880]; var yPositions = [-500, -200]; offsets.forEach(function (offsetX) { yPositions.forEach(function (offsetY) { game.addChild(LK.getAsset('speakerHoles', { anchorX: 0.5, anchorY: 0.5, x: baseX + offsetX, y: baseY + offsetY, width: 250, height: 200 })); }); }); } createSpeakerHoles();
/****
* Classes
****/
// OnScreenController class encapsulating A, B buttons and D-pad
var OnScreenController = Container.expand(function () {
var self = Container.call(this);
var yPosAdjustment = -180;
var buttonYPosAdjustment = -273.2;
if (!LK.screen) {
return;
}
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 buttonFrameA = self.attachAsset('buttonFrame', {
anchorX: 0.5,
anchorY: 0.5,
x: aButtonPosition.x,
y: aButtonPosition.y,
width: buttonSize.width * 1.2,
height: buttonSize.height * 1.2
});
var buttonFrameB = self.attachAsset('buttonFrame', {
anchorX: 0.5,
anchorY: 0.5,
x: bButtonPosition.x,
y: bButtonPosition.y,
width: buttonSize.width * 1.2 * .7,
// Match B button's scaled size
height: buttonSize.height * 1.2 * .7
});
var aButton = self.attachAsset('aButton', {
anchorX: 0.5,
anchorY: 0.5,
x: aButtonPosition.x,
y: aButtonPosition.y,
width: buttonSize.width,
height: buttonSize.height
// Removed tint application
});
var bButton = self.attachAsset('bButton', {
anchorX: 0.5,
anchorY: 0.5,
x: bButtonPosition.x,
y: bButtonPosition.y,
width: buttonSize.width * .7,
height: buttonSize.height * .7
});
var dpadBase = self.attachAsset('dpadBase', {
anchorX: 0.5,
anchorY: 0.5,
x: LK.screen.width * 0.24,
y: LK.screen.height * 0.89 + yPosAdjustment - 10,
scaleX: LK.screen.width * 0.003,
scaleY: LK.screen.width * 0.003
});
self.setChildIndex(dpadBase, self.children.length - 1);
var moveInterval;
function startMovingCharacter(xDir, yDir) {
if (moveInterval) {
LK.clearInterval(moveInterval);
}
moveCharacter(xDir, yDir);
moveInterval = LK.setInterval(function () {
moveCharacter(xDir, yDir);
}, 150);
}
var dpadDirections = [{
button: dpadLeft,
xDir: -1,
yDir: 0
}, {
button: dpadUp,
xDir: 0,
yDir: -1
}, {
button: dpadRight,
xDir: 1,
yDir: 0
}, {
button: dpadDown,
xDir: 0,
yDir: 1
}];
dpadDirections.forEach(function (direction) {
direction.button.on('down', function () {
startMovingCharacter(direction.xDir, direction.yDir);
});
direction.button.on('up', function () {
LK.clearInterval(moveInterval);
});
});
});
/****
* Initialize Game
****/
// Instantiate and add OnScreenController to the game
var game = new LK.Game({
backgroundColor: 0xb2beb5 // Light teal gray background
});
/****
* Game Code
****/
function moveCharacter(xDir, yDir) {
// Extracted character movement logic to a separate function for clarity and reuse
function attemptCharacterMove(xDir, yDir) {
var nextX = character.x + xDir * tileWidth;
var nextY = character.y + yDir * tileHeight;
if (nextX >= gridOffsetX && nextX <= gridOffsetX + gridSize * tileWidth && nextY >= gridOffsetY && nextY <= gridOffsetY + gridSize * tileHeight) {
var nextTileIndex = Math.floor((nextY - gridOffsetY) / tileHeight) * gridSize + Math.floor((nextX - gridOffsetX) / tileWidth);
if (floorTiles.includes(grid[nextTileIndex]) || grid[nextTileIndex] === holeTile) {
character.x = nextX;
character.y = nextY;
character.currentTile = grid[nextTileIndex];
}
}
}
moveCharacter = attemptCharacterMove;
}
var gridSize = 10;
var character = null;
var wallTiles = [];
var floorTiles = [];
var grid = new Array(gridSize * gridSize);
// Consolidate tile dimension and offset calculations into a single function
function calculateTileDimensionsAndOffsets(gridSize) {
var tileWidth = 2048 * .6 / (gridSize - 1);
var tileHeight = tileWidth;
var gridOffsetX = (2048 - tileWidth * (gridSize - 1)) / 2;
var gridOffsetY = (2732 - tileHeight * (gridSize - 1)) / 2 - 2732 * 0.15;
return {
tileWidth: tileWidth,
tileHeight: tileHeight,
gridOffsetX: gridOffsetX,
gridOffsetY: gridOffsetY
};
}
var _calculateTileDimensi = calculateTileDimensionsAndOffsets(gridSize),
tileWidth = _calculateTileDimensi.tileWidth,
tileHeight = _calculateTileDimensi.tileHeight,
gridOffsetX = _calculateTileDimensi.gridOffsetX,
gridOffsetY = _calculateTileDimensi.gridOffsetY;
var onScreenController = game.addChild(new OnScreenController());
// Character movement function removed
function createTiles() {
// Create a black square background for the grid
// Removed console.error log for uninitialized LK.screen
if (!LK.screen) {
return;
}
var gridBackground = LK.getAsset('gridBackground', {
anchorX: 0.5,
anchorY: 0.8,
x: LK.screen.width / 2,
y: LK.screen.height / 2,
width: LK.screen.width * .7,
height: LK.screen.height * .6,
color: 0x000000
});
game.addChild(gridBackground);
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('floorTile', {
anchorX: 0.5,
anchorY: 0.5,
x: x * tileWidth + gridOffsetX,
y: y * tileHeight + gridOffsetY
});
floorTiles.push(tile);
game.addChild(tile);
grid[i] = tile;
}
}
// Add walls after floor tiles to ensure they render on top
for (var i = 0; i < gridSize * gridSize; i++) {
var x = i % gridSize;
var y = Math.floor(i / gridSize);
if (x === 0 || y === 0 || x === gridSize - 1 || y === gridSize - 1) {
var tile = LK.getAsset('wallTile', {
anchorX: 0.5,
anchorY: 0.5,
x: x * tileWidth + gridOffsetX,
y: y * tileHeight + gridOffsetY
});
wallTiles.push(tile);
game.addChild(tile);
grid[i] = tile;
}
}
}
createTiles();
function isTileInCorner(tile) {
var corners = [{
x: gridOffsetX,
y: gridOffsetY
}, {
x: gridOffsetX,
y: (gridSize - 1) * tileHeight + gridOffsetY
}, {
x: (gridSize - 1) * tileWidth + gridOffsetX,
y: gridOffsetY
}, {
x: (gridSize - 1) * tileWidth + gridOffsetX,
y: (gridSize - 1) * tileHeight + gridOffsetY
}];
return corners.some(function (corner) {
return tile && Math.abs(tile.x - corner.x) < tileWidth / 2 && Math.abs(tile.y - corner.y) < tileHeight / 2;
});
}
function placeHoleTile() {
do {
randomWallTileIndex = Math.floor(Math.random() * wallTiles.length);
randomWallTile = wallTiles[randomWallTileIndex];
} while (isTileInCorner(randomWallTile));
if (!LK.screen) {
return;
}
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;
}
placeHoleTile();
var isGameStarted = false;
LK.on('tick', function () {
if (!isGameStarted) {
var createCharacterAndShadow = function createCharacterAndShadow() {
character = LK.getAsset('character', {
anchorX: 0.5,
anchorY: 0.5,
x: holeTile.x,
y: holeTile.y - 50,
scaleX: 1.5,
scaleY: 1.5
});
var characterShadow = LK.getAsset('characterShadow', {
anchorX: 0.5,
anchorY: 0.5,
x: -15,
y: 50,
scaleX: 0.6,
scaleY: 0.6,
alpha: 0.5
});
character.addChild(characterShadow);
character.currentTile = getTileAtPosition(holeTile.x, holeTile.y); // Correctly initialize character's current tile
game.addChild(character);
};
isGameStarted = true; // Ensure game start logic is only triggered once
createCharacterAndShadow();
}
});
// 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];
}
// Optimized speaker hole creation with a function to reduce redundancy
function createSpeakerHoles() {
if (!LK.screen) {
return;
}
var baseX = LK.screen.width / 2;
var baseY = LK.screen.height / 2;
var offsets = [880, -880];
var yPositions = [-500, -200];
offsets.forEach(function (offsetX) {
yPositions.forEach(function (offsetY) {
game.addChild(LK.getAsset('speakerHoles', {
anchorX: 0.5,
anchorY: 0.5,
x: baseX + offsetX,
y: baseY + offsetY,
width: 250,
height: 200
}));
});
});
}
createSpeakerHoles();
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.