Utilize JavaScript to randomly choose images as background tiles in HTML

Question

Utilize JavaScript to randomly choose images as background tiles in HTML

Currently, I am in the process of developing a game using HTML/CSS/JavaScript. My background is currently set to a single image (100px / 100px) being repeated vertically and horizontally to tile across the entire page body;

CSS:

body {
    background-image: url("./assets/bgImage.png");
    background-repeat: repeat;
}

It works well and functions as intended.

I am wondering if it's feasible to create an array of images to choose from and have each repetition of CSS randomly select one of the images from the array to fill into the next slot. If this is possible, how can it be achieved? The desired outcome is illustrated below (minus the margins);

https://i.sstatic.net/mlxez.png https://i.sstatic.net/dwkth.png
https://i.sstatic.net/M9GML.png https://i.sstatic.net/mlxez.png

The only method that comes to mind for achieving this would involve using

<div style="position: absolute; z-index: -1;">

and then populating it with a generated array of images. While that approach is viable and I could implement it that way, I want to explore simpler and more effective alternatives first.

javascript html css image background-image

Answer 1

Answer №1

This solution offers a simple and efficient approach using the HTML canvas element along with image data for rendering.

Modern JavaScript (ES6):

class CreateMap {

  /**
   * Constructor
   */
  constructor() {
    const self = this;

    // canvas
    self.canvas = document.getElementById("canvas");
    self.ctx = canvas.getContext("2d");

    const TILE_WIDTH = 100;
    const TILE_HEIGHT = 100;

    const CANVAS_WIDTH = 500;
    const CANVAS_HEIGHT = 500;

    self.canvas.width = CANVAS_WIDTH;
    self.canvas.height = CANVAS_HEIGHT;

    let xAxes = 0;
    let yAxes = 0;
    let lineCount = 0;

    // existing tiles
    self.tiles = [{
      url: 'https://i.sstatic.net/dwkth.png'
    }, {
      url: 'https://i.sstatic.net/mlxez.png'
    }, {
      url: 'https://i.sstatic.net/M9GML.png'
    }];

    // Generate tiles on the canvas
    Array(CANVAS_WIDTH / TILE_WIDTH * CANVAS_HEIGHT / TILE_HEIGHT)
      .fill()
      .forEach(function() {
        const randomNum = self.getRandomNumber(0, self.tiles.length - 1);
        const tile = self.tiles[randomNum]

        self.createTile(tile.url, xAxes, yAxes);

        xAxes += TILE_WIDTH;

        if (xAxes === CANVAS_WIDTH) {
          xAxes = 0;
          yAxes += TILE_HEIGHT;
        }
      });
  }

  /**
   * Get a random number within specified range
   * @param  {number} min 
   * @param  {number} max 
   * @return {number}     
   */
  getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  /**
   * Render one tile on the canvas
   * @param  {string} url 
   * @param  {number} x  
   * @param  {number} y     
   */
  createTile(url, x, y) {
    let tile = new Image();

    tile.onload = () => {
      this.ctx.drawImage(tile, x, y);
    };

    tile.src = url;
  }
}

const map = new CreateMap();

<canvas id="canvas"></canvas>

Traditional Javascript (ES5):

var CreateMap = function() {

  var self = this;

  // canvas
  self.canvas = document.getElementById("canvas");
  self.ctx = canvas.getContext("2d");

  var TILE_WIDTH = 100;
  var TILE_HEIGHT = 100;

  var CANVAS_WIDTH = 500;
  var CANVAS_HEIGHT = 500;

  var xAxes = 0;
  var yAxes = 0;
  var lineCount = 0;
  
  self.canvas.width = CANVAS_WIDTH;
  self.canvas.height = CANVAS_HEIGHT;

  // existing tiles
  self.tiles = [{
    url: 'https://i.sstatic.net/dwkth.png'
  }, {
    url: 'https://i.sstatic.net/mlxez.png'
  }, {
    url: 'https://i.sstatic.net/M9GML.png'
  }];

  // Generate tiles
  Array(CANVAS_WIDTH / TILE_WIDTH * CANVAS_HEIGHT / TILE_HEIGHT)
    .fill()
    .forEach(function() {
      var randomNum = self.getRandomNumber(0, self.tiles.length - 1);
      var tile = self.tiles[randomNum]

      self.createTile(tile.url, xAxes, yAxes);

      xAxes += TILE_WIDTH;

      if (xAxes === CANVAS_WIDTH) {
        xAxes = 0;
        yAxes += TILE_HEIGHT;
      }
    });
}


CreateMap.prototype.getRandomNumber = function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

CreateMap.prototype.createTile = function(url, x, y) {
  var tile = new Image();

  tile.onload = () => {
    this.ctx.drawImage(tile, x, y);
  };

  tile.src = url;
}

var map = new CreateMap();

<canvas id="canvas"></canvas>

Answer 2

This solution offers a simple and efficient approach using the HTML canvas element along with image data for rendering.

Modern JavaScript (ES6):

class CreateMap {

  /**
   * Constructor
   */
  constructor() {
    const self = this;

    // canvas
    self.canvas = document.getElementById("canvas");
    self.ctx = canvas.getContext("2d");

    const TILE_WIDTH = 100;
    const TILE_HEIGHT = 100;

    const CANVAS_WIDTH = 500;
    const CANVAS_HEIGHT = 500;

    self.canvas.width = CANVAS_WIDTH;
    self.canvas.height = CANVAS_HEIGHT;

    let xAxes = 0;
    let yAxes = 0;
    let lineCount = 0;

    // existing tiles
    self.tiles = [{
      url: 'https://i.sstatic.net/dwkth.png'
    }, {
      url: 'https://i.sstatic.net/mlxez.png'
    }, {
      url: 'https://i.sstatic.net/M9GML.png'
    }];

    // Generate tiles on the canvas
    Array(CANVAS_WIDTH / TILE_WIDTH * CANVAS_HEIGHT / TILE_HEIGHT)
      .fill()
      .forEach(function() {
        const randomNum = self.getRandomNumber(0, self.tiles.length - 1);
        const tile = self.tiles[randomNum]

        self.createTile(tile.url, xAxes, yAxes);

        xAxes += TILE_WIDTH;

        if (xAxes === CANVAS_WIDTH) {
          xAxes = 0;
          yAxes += TILE_HEIGHT;
        }
      });
  }

  /**
   * Get a random number within specified range
   * @param  {number} min 
   * @param  {number} max 
   * @return {number}     
   */
  getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  /**
   * Render one tile on the canvas
   * @param  {string} url 
   * @param  {number} x  
   * @param  {number} y     
   */
  createTile(url, x, y) {
    let tile = new Image();

    tile.onload = () => {
      this.ctx.drawImage(tile, x, y);
    };

    tile.src = url;
  }
}

const map = new CreateMap();

<canvas id="canvas"></canvas>

Traditional Javascript (ES5):

var CreateMap = function() {

  var self = this;

  // canvas
  self.canvas = document.getElementById("canvas");
  self.ctx = canvas.getContext("2d");

  var TILE_WIDTH = 100;
  var TILE_HEIGHT = 100;

  var CANVAS_WIDTH = 500;
  var CANVAS_HEIGHT = 500;

  var xAxes = 0;
  var yAxes = 0;
  var lineCount = 0;
  
  self.canvas.width = CANVAS_WIDTH;
  self.canvas.height = CANVAS_HEIGHT;

  // existing tiles
  self.tiles = [{
    url: 'https://i.sstatic.net/dwkth.png'
  }, {
    url: 'https://i.sstatic.net/mlxez.png'
  }, {
    url: 'https://i.sstatic.net/M9GML.png'
  }];

  // Generate tiles
  Array(CANVAS_WIDTH / TILE_WIDTH * CANVAS_HEIGHT / TILE_HEIGHT)
    .fill()
    .forEach(function() {
      var randomNum = self.getRandomNumber(0, self.tiles.length - 1);
      var tile = self.tiles[randomNum]

      self.createTile(tile.url, xAxes, yAxes);

      xAxes += TILE_WIDTH;

      if (xAxes === CANVAS_WIDTH) {
        xAxes = 0;
        yAxes += TILE_HEIGHT;
      }
    });
}


CreateMap.prototype.getRandomNumber = function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

CreateMap.prototype.createTile = function(url, x, y) {
  var tile = new Image();

  tile.onload = () => {
    this.ctx.drawImage(tile, x, y);
  };

  tile.src = url;
}

var map = new CreateMap();

<canvas id="canvas"></canvas>

Utilize JavaScript to randomly choose images as background tiles in HTML

Answer №1

Similar questions

tips for getting two ajax json Data from .net

Displaying an image with a JavaScript variable is a common task in web

What is the process for assigning variables to modules using RequireJS?

Textfield with predictive text suggestions

The Microsoft.Azure.WebJobs.Script encountered an issue while attempting to cast an object of type 'System.String' to type 'Microsoft.AspNetCore.Http.HttpRequest' during the return process

The installation of robotjs via npm failed due to issues encountered while trying to build the binaries

Finding the distance between two coordinates using Mapbox is easy once you understand how to utilize

Tips for concealing protruding sections of 3D shapes behind intricate 3D models

What's the reason behind the presence of the a tag before the button in this

Ways to access the value of an attribute in an AngularJS object

Retrieve an image from the server and display a preview of it on the client side

What is the best way to display JQuery mobile tap event information in real-time?

How can I retrieve a DOM object following an AJAX request?

Ways to retrieve interface definition using a variable

Is there a way to open and view several images within this code snippet?

retrieving photos from the server and showcasing them

JavaScript can extract a portion of an array

Is it possible to precisely position multiple children in a relative manner?

Customize the printing settings within bootstrap by modifying the background color from transparent to a solid color using CSS/SCSS

Tips for incorporating a spinner during content loading within AngularJS