Question

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

这是我的HTML：

<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>

Answer 1

我完成了，谢谢大家！

只是检查图像像素是否达到最大宽度！：d

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

1 个答案: