Is there a way to create a run-time JS based random maze generator with customizable graphics that can be used by providing JS code through Gdevelop’s in-built features? Can anyone help me in this, I am sure it would be helpful to the GDevelop community!
I created the following code by ChatGPT but only shows a black screen during preview, Can anyone help?
// Constants
const ROWS = 10; // Number of rows in the maze grid
const COLS = 10; // Number of columns in the maze grid
const CELL_SIZE = 30; // Size of each cell in pixels
// Variables
let maze = []; // 2D array representing the maze grid
let playerPos = { row: 0, col: 0 }; // Player's current position
// Function to generate the maze
function generateMaze() {
maze = [];
// Initialize the maze grid with empty cells
for (let row = 0; row < ROWS; row++) {
maze[row] = [];
for (let col = 0; col < COLS; col++) {
maze[row][col] = 0;
}
}
// Generate random walls in the maze
for (let row = 1; row < ROWS - 1; row += 2) {
for (let col = 1; col < COLS - 1; col += 2) {
maze[row][col] = 1; // Set the cell as a wall
// Randomly break walls to create passages
if (row > 1 && Math.random() < 0.5) {
maze[row - 1][col] = 1; // Break the wall above
}
if (col < COLS - 2 && Math.random() < 0.5) {
maze[row][col + 1] = 1; // Break the wall to the right
}
}
}
}
// Function to render the maze on the screen
function renderMaze() {
const container = document.getElementById('maze-container');
container.innerHTML = ''; // Clear previous maze
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
const cell = document.createElement('div');
// Set cell class based on its type (wall or passage)
if (maze[row][col] === 1) {
cell.className = 'wall';
} else {
cell.className = 'passage';
}
// Set cell position and size
cell.style.top = `${row * CELL_SIZE}px`;
cell.style.left = `${col * CELL_SIZE}px`;
cell.style.width = `${CELL_SIZE}px`;
cell.style.height = `${CELL_SIZE}px`;
container.appendChild(cell);
}
}
}
// Function to handle key press events
function handleKeyPress(event) {
const key = event.key;
// Move the player based on the arrow keys
switch (key) {
case 'ArrowUp':
if (playerPos.row > 0 && maze[playerPos.row - 1][playerPos.col] !== 1) {
playerPos.row--;
}
break;
case 'ArrowDown':
if (playerPos.row < ROWS - 1 && maze[playerPos.row + 1][playerPos.col] !== 1) {
playerPos.row++;
}
break;
case 'ArrowLeft':
if (playerPos.col > 0 && maze[playerPos.row][playerPos.col - 1] !== 1) {
playerPos.col--;
}
break;
case 'ArrowRight':
if (playerPos.col < COLS - 1 && maze[playerPos.row][playerPos.col + 1] !== 1) {
playerPos.col++;
}
break;
}
// Update the player's position
const player = document.getElementById('player');
player.style.top = `${playerPos.row * CELL_SIZE}px`;
player.style.left = `${playerPos.col * CELL_SIZE}px`;
}
// Generate the maze and render it
generateMaze();
renderMaze();
// Add event listener for key press events
document.addEventListener('keydown', handleKeyPress);
// Constants
const ROWS = 10; // Number of rows in the maze grid
const COLS = 10; // Number of columns in the maze grid
const CELL_SIZE = 30; // Size of each cell in pixels
// Variables
let maze = []; // 2D array representing the maze grid
let playerPos = { row: 0, col: 0 }; // Player's current position
// Create a maze container element
const mazeContainer = document.createElement('div');
mazeContainer.style.position = 'relative';
mazeContainer.style.width = `${COLS * CELL_SIZE}px`;
mazeContainer.style.height = `${ROWS * CELL_SIZE}px`;
// Create the player element
const player = document.createElement('div');
player.style.position = 'absolute';
player.style.top = '0';
player.style.left = '0';
player.style.width = `${CELL_SIZE}px`;
player.style.height = `${CELL_SIZE}px`;
player.style.backgroundImage = 'url("path/to/player-sprite.png")'; // Customize the player sprite URL
// Append the maze container and player elements to the document body
document.body.appendChild(mazeContainer);
mazeContainer.appendChild(player);
// Function to generate the maze
function generateMaze() {
maze = [];
// Initialize the maze grid with empty cells
for (let row = 0; row < ROWS; row++) {
maze[row] = [];
for (let col = 0; col < COLS; col++) {
maze[row][col] = 0;
}
}
// Generate random walls in the maze
for (let row = 1; row < ROWS - 1; row += 2) {
for (let col = 1; col < COLS - 1; col += 2) {
maze[row][col] = 1; // Set the cell as a wall
// Randomly break walls to create passages
if (row > 1 && Math.random() < 0.5) {
maze[row - 1][col] = 1; // Break the wall above
}
if (col < COLS - 2 && Math.random() < 0.5) {
maze[row][col + 1] = 1; // Break the wall to the right
}
}
}
}
// Function to render the maze on the screen
function renderMaze() {
// Clear previous maze
while (mazeContainer.firstChild) {
mazeContainer.removeChild(mazeContainer.firstChild);
}
// Create the maze grid elements
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
const cell = document.createElement('div');
// Set cell style based on its type (wall or passage)
cell.style.position = 'absolute';
cell.style.top = `${row * CELL_SIZE}px`;
cell.style.left = `${col * CELL_SIZE}px`;
cell.style.width = `${CELL_SIZE}px`;
cell.style.height = `${CELL_SIZE}px`;
if (maze[row][col] === 1) {
cell.style.backgroundImage = 'url("path/to/wall-sprite.png")'; // Customize the wall sprite URL
} else {
cell.style.backgroundImage = 'url("path/to/passage-sprite.png")'; // Customize the passage sprite URL
}
mazeContainer.appendChild(cell);
}
}
}
// Function to handle key
press events
function handleKeyPress(event) {
const key = event.key;
// Move the player based on the arrow keys
switch (key) {
case 'ArrowUp':
if (playerPos.row > 0 && maze[playerPos.row - 1][playerPos.col] !== 1) {
playerPos.row--;
}
break;
case 'ArrowDown':
if (playerPos.row < ROWS - 1 && maze[playerPos.row + 1][playerPos.col] !== 1) {
playerPos.row++;
}
break;
case 'ArrowLeft':
if (playerPos.col > 0 && maze[playerPos.row][playerPos.col - 1] !== 1) {
playerPos.col--;
}
break;
case 'ArrowRight':
if (playerPos.col < COLS - 1 && maze[playerPos.row][playerPos.col + 1] !== 1) {
playerPos.col++;
}
break;
}
// Update the player's position
player.style.top = `${playerPos.row * CELL_SIZE}px`;
player.style.left = `${playerPos.col * CELL_SIZE}px`;
}
// Generate the maze and render it
generateMaze();
renderMaze();
// Add event listener for key press events
document.addEventListener('keydown', handleKeyPress);
ChatGPT modified the code to account for use of custom sprites, and this time the preview window shows a grey screen, i havent defined the sprite file paths till yet however!
The code you have there is for a javascript game, which I don’t think will be compatible with GDevelop. I suspect there would be some kind of clash between the javascript code you have and GDevelop for control over the screen/canvas.
I’d suggest you don’t use JS to put up the sprites. Instead, use it to generate maze, and stick it into an array variable that GDevelop can access. Then use GDevelop events to draw the maze based on the values in the array.
1 Like
Can you please guide me through screenshots, in steps. I know it sounds too much but it i would highly appreciate all help. I don’t understand code in-depth!
Or you can simply tell me the characteristics of the JS code that will help to create a copy and paste block that will function as the game demands.
Sorry, I haven’t done a great deal with JS. For me to provide you with screen shots or examples I’d have to figure it out just like you, and I just don’t have the time for that at present.
However, here’s a link to help you access GDevelop variables from JavaScript. If you write the JS to generate the maze, then you should be able to use that link to put the maze into a GDevelop structure or array.