我要生成隨機的X和Y(紅色矩形)ouside一箱(灰色矩形)位置生成隨機的X和Y一盒
我的代碼工作,在惡劣的方式之外。職位僅在框中生成。
我試圖寫出相反的條件,但我的代碼崩潰時,我這樣做。
這裏是FIDLE:https://jsfiddle.net/c2nhsbwo/
JS代碼:
function rbn(min, max) {
return Math.floor(Math.random()*(max-min+1)+min);
}
var canvas = document.querySelector('canvas');
canvas.height = 900;
canvas.width = 1700;
var context = canvas.getContext('2d');
function drawBigRect() {
context.strokeStyle = "rgb(210, 215, 211)";
context.lineWidth = 8;
context.strokeRect((canvas.width - 500)/2, (canvas.height - 500)/2, 500, 500); // debutx: 600, debuty:200, finx: 1100, finy: 700
}
// generating X and Y positions
function squareParticle() {
var x;
var y;
x = rbn(25, canvas.width - 25);
y = rbn(25, canvas.height - 25);
while ((600 >= x + 25)
||(600 + 500 <= x)
|| (200 >= y + 25)
|| (200 + 500 <= y))
{
x = rbn(0, canvas.width - 25);
y = rbn(0, canvas.height - 25);
}
return {
x: x,
y: y
};
}
var truc = {
x: squareParticle().x,
y: squareParticle().y
};
console.log(truc.x, truc.y);
function main() {
context.clearRect(0,0,1700,900);
drawBigRect();
context.fillStyle = "red";
context.fillRect(truc.x, truc.y, 25, 25),
requestAnimationFrame(main);
}
main();
如何生成位置OUTISIDE灰色矩形?
謝謝:)!