使用 JavaScript 随机选择 HTML 背景图块的图像

Question

我正在用 HTML/CSS/JavaScript 编写游戏，我目前将背景设置为单个图像（100 像素/100 像素），垂直和水平重复以平铺整个页面；

CSS：

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

没关系，它完全按照您的预期工作。

我的问题是，是否可以从一组图像中进行选择，并让 CSS 随机（或程序上）重复背景图像的每个（引用未引用）“执行”从数组以填充下一次重复将完成的“槽”。如果这是可能的，人们将如何实现这一目标？期望的结果看起来像这样（显然没有边距）；

我能想到的唯一方法是使用<div style="position: absolute; z-index: -1;">，然后用我自己生成的图像数组自动填充它。虽然这是可能的，而且我知道我可以这样做，但我想确保首先没有更简单、更有效的方法来实现这一点。

Answer 1

这是一个快速而肮脏的解决方案。我使用了canvas 元素和您的图片。

ES6：

class GenerateMap {

  /**
   * 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.stack.imgur.com/dwkth.png'
    }, {
      url: 'https://i.stack.imgur.com/mlxez.png'
    }, {
      url: 'https://i.stack.imgur.com/M9GML.png'
    }];

    // Calculate tiles
    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.generateTile(tile.url, xAxes, yAxes);

        xAxes += TILE_WIDTH;

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

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

  /**
   * Generate one tile
   * @param  {string} url 
   * @param  {number} x  
   * @param  {number} y     
   */
  generateTile(url, x, y) {
    let tile = new Image();

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

    tile.src = url;
  }
}


const map = new GenerateMap();

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

ES5：

var GenerateMap = 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.stack.imgur.com/dwkth.png'
  }, {
    url: 'https://i.stack.imgur.com/mlxez.png'
  }, {
    url: 'https://i.stack.imgur.com/M9GML.png'
  }];

  // Calculate 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.generateTile(tile.url, xAxes, yAxes);

      xAxes += TILE_WIDTH;

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


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

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

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

  tile.src = url;
}


var map = new GenerateMap();

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