我正在用 HTML/CSS/JavaScript 编写游戏,目前我将背景设置为单个图像 (100px/100px),垂直和水平重复以平铺整个页面主体;
CSS:
body {
background-image: url("./assets/bgImage.png");
background-repeat: repeat;
}
很好,它的工作方式与您预期的完全一样。
我的问题是,是否可以从一组图像中进行选择,并让 CSS 的每个(引号、反引号)“执行”随机(或按程序)重复背景图像,从数组填充到下一次重复将完成的“插槽”中。如果这是可能的,人们将如何实现这一目标?期望的结果看起来像这样(显然没有边距);
我能想到的唯一方法是使用 <div style="position: absolute; z-index: -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: '/image/dwkth.png'
}, {
url: '/image/mlxez.png'
}, {
url: '/image/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: '/image/dwkth.png'
}, {
url: '/image/mlxez.png'
}, {
url: '/image/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>
关于javascript - 使用 JavaScript 为 HTML 背景图 block 随机选择图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44327552/