Javascript 在div上水平重复相同的图像

我正在制作一个只使用javascript、css和html的游戏，这是一个简单的游戏，角色必须击中蛋糕，这样你才能得到更多的分数。我有一个问题，关于蛋糕的运动和定位。我可以在屏幕上随机设置它们并水平向右移动，但我不能保证我的功能会重复，也不能将蛋糕限制在屏幕的某个区域

这是我的HTML：

函数createNewCake（）{
var myDiv=document.createElement（'div'）；
myDiv.id=“cake0”；
myDiv.className=“蛋糕div”；
返回myDiv；
}
函数旋转元素（元素，度）{
var rad=度*（数学PI/180.0）；
var text=“旋转（“+度+”弧度）”；
elem.style.transform=文本；
elem.style.webkitttransform=文本；
elem.style.mozTransform=文本；
elem.style.oTransform=文本；
elem.style.msTransform=文本；
}
var=newarray（）；
var colors=新数组（）；
颜色[0]=“images/bolo1.png”；
颜色[1]=“images/bolo2.png”；
颜色[2]=“images/bolo3.png”；
颜色[3]=“images/maca.png”；
对于（var i=0；i我完成了，谢谢大家

只是检查图像像素是否达到最大宽度！：D
不确定我是否理解你的问题。你想将它们放置在屏幕的某个区域吗？你也可以共享一个JSFIDLE吗？
<script language ="javascript">

    function createNewCake() {

        var myDiv = document.createElement('div');
                myDiv.id = "cake0";

        myDiv.className = "cake-div";       
        return myDiv;
    }
    function rotateElement(elem, degrees) {

        var rad=degrees*(Math.PI / 180.0);
        var text = "rotate(" + degrees  + "rad)";
        elem.style.transform = text;
        elem.style.webkitTransform = text;
        elem.style.mozTransform = text;
        elem.style.oTransform = text;
        elem.style.msTransform = text;              
    }
var cakes = new Array();

    var colors = new Array();
    colors[0] = "images/bolo1.png";
    colors[1] = "images/bolo2.png";
    colors[2] = "images/bolo3.png";
    colors[3] = "images/maca.png";

    for (var i=0; i<20; i++) {

        var aCake = createNewCake();
        aCake.id = "cake" + i;


        var index = Math.floor(Math.random() * (colors.length + 1));
        aCake.style.backgroundImage = "url('" + colors[index]+ "')";


        aCake.style.left = Math.floor(Math.random() * window.innerWidth);
        aCake.style.top =  Math.floor(Math.random() * window.innerHeight);


        document.body.appendChild(aCake);

        cakes.push(aCake);

    }
    animate();

        function animate() {

        requestAnimationFrame(animate);

        for (var i=0; i < cakes.length; i++) {
        var pixel = Number(cakes[i].style.left.replace("px",""));
            cakes[i].style.left = pixel + 2 + "px";

        }
    }
</script>

</body>