OUTSIDER,
22. julij 2023
―
// Constants for the grid const A = 4; // Change this to adjust the grid size vertically const B = 6; // Change this to adjust the grid size horizontally const TILE_SIZE = 80; const SPACE_BETWEEN_TILES = 40; const GRID_SIZE_X = (TILE_SIZE * B) + (SPACE_BETWEEN_TILES * (B - 1)); const GRID_SIZE_Y = (TILE_SIZE * A) + (SPACE_BETWEEN_TILES * (A - 1));
// Calculate the position to center the grid const grid_start_x = (1920 - GRID_SIZE_X) / 2; const grid_start_y = (1080 - GRID_SIZE_Y) / 2;
// Initialize canvas and context const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d");
// Example image URLs from WordPress gallery const imageUrlBase = "https://outsider.si/wp-content/uploads/2023/07/tile"; const imageUrls = [ imageUrlBase + "1.png", imageUrlBase + "2.png", imageUrlBase + "3.png", imageUrlBase + "4.png", imageUrlBase + "5.png" ];
const tile_images = []; const imagePromises = [];
function loadImage(url) { return new Promise((resolve) => { const image = new Image(); image.onload = () => resolve(image); image.src = url; }); }
for (const imageUrl of imageUrls) { const imagePromise = loadImage(imageUrl); imagePromises.push(imagePromise); }
Promise.all(imagePromises).then((images) => { tile_images.push(...images);
// Constants for tile images and orientations const TILE_IMAGES = ["tile1.png", "tile2.png", "tile3.png", "tile4.png", "tile5.png"]; const NUM_ORIENTATIONS = 4;
// Create the grid with initial tile indices and orientations const grid = Array.from({ length: A }, () => Array.from({ length: B }, () => [0, 0]));
function drawGrid() { for (let i = 0; i
= 0 && tile_x
= 0 && tile_y
