JavaScriptを使用してHTML背景タイルの画像をランダムに選択

Question

HTML/CSS/JavaScriptでゲームをプログラミングしていますが、背景全体を縦横に繰り返して1つの画像（100px/100px）ページの本文。

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>