Генерация случайных X и Y вне коробки

Question

Я хочу, чтобы генерировать случайные X и Y (красный Rect) позиции находящиеся в коробке (серый прямоугольнику)

Мой код работает, в плохом состоянии. Позиции генерируются только в поле.

Я попытался написать противоположные условия, но мой код разбился, когда я это делаю.

Вот fidle: https://jsfiddle.net/c2nhsbwo/

код расслоение плотной:

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 серый прямоугольник?

Спасибо :)!

Answer 1

Отменить утверждение while.

переключатель < = к> = и> = к < =

Результат:

while (600 <= x + 25 && 600 + 500 >= x && 200 <= y + 25 && 200 + 500 >= y) { 
    ... 
} 

Answer 2

Он работает почти в любое время https://jsfiddle.net/c2nhsbwo/1/

, но иногда, красный прямоугольник все еще внутри серый один ....

while ((600 <= x + 25) 
&&(600 + 500 >= x) 
&& (200 <= y + 25) 
&& (200 + 500 >= y))