生成随机的X和Y一盒
问题描述:
我要生成随机的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灰色矩形?
谢谢:)!
答
否定while语句。
开关< =为> => =于< =
和结果:
while (600 <= x + 25 && 600 + 500 >= x && 200 <= y + 25 && 200 + 500 >= y) {
...
}
答
它工作几乎随时https://jsfiddle.net/c2nhsbwo/1/
但有时,红色矩形是仍然灰色内部一个......
while ((600 <= x + 25)
&&(600 + 500 >= x)
&& (200 <= y + 25)
&& (200 + 500 >= y))