Убрать наложения на канвасе
Всем привет! Пишу игрушку на канвасе. Столкнулся с такой проблемой. Персонажи на поле канваса появляются одновременно, но в рандомных местах поля. Персонаж это спрайт, имеет {width:100, height:100}. Math.random задает координаты x, y каждого персонажа. Иногда получается так, что при рандоме 1-го персонажа {x:54, y:65}, у второго {x:58, y:69}. То есть персонажи накладываются друг на друга. как сделать так, что бы они не накладывались?
|
|
canvas рандомный вывод блоков без наложения
gunner17,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<canvas width="700" height="500" style="border:1px solid #ccc;margin:10px;cursor:crosshair;" id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
var arrayOfSectors = [],
column = 5,
row = 4,
length = column * row,
sectorWidth = canvas.width / column,
sectorHeight = canvas.height / row,
randomWidth = sectorWidth - 100,
randomHeight = sectorHeight - 100;
function getPos() {
if (!arrayOfSectors.length) {
arrayOfSectors = Array.from({
length
}, (v, i) => i);
}
var i = arrayOfSectors.splice((Math.random() * arrayOfSectors.length | 0), 1)[0];
var h = i / column | 0;
var w = i % column;
var x = sectorWidth * w + Math.floor((Math.random() * randomWidth)),
y = sectorHeight * h + Math.floor((Math.random() * randomHeight));
return {x, y}
}
function draw() {
var {x, y} = getPos();
ctx.fillStyle = '#66FF00';
ctx.beginPath();
ctx.fillRect(x, y, 100, 100)
ctx.fill();
ctx.stroke();
}
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw();
draw();
window.setTimeout(loop, 1000)
}
loop()
</script>
</body>
</html>
|
|
| Часовой пояс GMT +3, время: 22:53. |