Нужно присвоить значение width и height класса .pond переменным. После чего появление картинок будет происходить только в этой области
Вот наработка, но почему-то он не принимает значения pondWidth и pondHeight
$('.hide-all').click(function spawnStarting() {
var DUCK1_COUNT = $(".count1").html();
//параметры пруда
var $pond, pondWidth, pondHeight;
$pond = $('.pond');
pondWidth = $pond.width();
pondHeight = $pond.height();
//Добавление пруда
$("body").append("<div class='pond'>");
//Спаун уток
for (var i = 0; i < DUCK1_COUNT; i++) {
var DUCK = $("<img src='img/004-duck.png' class='utka plav'>").appendTo(".pond")
.addClass('Krykvi1'+i);
var transform = 'translate(' + getRandom(pondWidth)+ 'px, ' + getRandom(pondHeight) + 'px)'
if (getRandomIn(3, 6) < 5) {
transform += " scaleX(-1)"
}
DUCK.css('transform', transform);
}
function getRandom(upper) {
return Math.random() * upper;
}