Question

我的问题是我不知道如何实现一组对象，在我的情况下，一组矩形同时移动。好吧，我实现了轻松移动一个具有特定方向的矩形，您可以从我的代码中看到。我还尝试添加一组带有矩形的数组。所以我的问题再次是如何实现矩形组（例如3行3列，其中9个）以同样的方式移动我的一个矩形在下面的代码中移动的方式?????所以基本上非常右侧的组和非常左侧的组将击中边界，而3X3中间的列将保持在两列3X3之间移动.....任何帮助将不胜感激。谢谢......

<html>
    <head>
        <title>Spaceman Invaders</title>

    <script>
    window.onload = function() {

        var canvas = document.getElementById("screen");
        context = canvas.getContext("2d");

        context.fillStyle="black";
        context.fillRect(0,0,canvas.width, canvas.height);

        context.fillStyle = "red";
        context.fillRect(30, 100, 20 , 20);

        var posx = 27;
        var posy = 100;
        var go_right = true;
        var go_down = false;
             if (canvas.getContext) {

               /*   var array = [];

                  array.push(new Shape(20, 0, 50, 50, "red"));
                  array.push(new Shape(20, 60, 50, 50, "red"));
                  array.push(new Shape(20, 120, 50, 50, "red"));
                  array.push(new Shape(80, 0, 50, 50, "red"));
                  array.push(new Shape(80, 60, 50, 50, "red"));
                  array.push(new Shape(80, 120, 50, 50, "red"));
                  array.push(new Shape(140, 0, 50, 50, "red"));
                  array.push(new Shape(140, 60, 50, 50, "red"));
                  array.push(new Shape(140, 120, 50, 50, "red"));*/


        setInterval( function() {



            if (!go_down) {
                if(posx < 250 && go_right) {
                    posx += 3;
                } else if(posx < 30) {
                    go_right = true;
                    go_down = true;
                } else if(!go_right) {
                    posx -= 3;
                }else {
                    go_right = false;
                    go_down = true;
                }
            } else {
                //if(posy <= 30)
                posy += 5;
                go_down = false;
            }


            context.fillStyle="black";
            context.fillRect(0,0,canvas.width, canvas.height);


            context.fillStyle = "red";
            context.beginPath();
            context.fillRect(posx, posy, 20 , 20);
            context.fill();


            }
        , 20);

    }

    </script>
    </head>
    <body>
    <canvas id="screen" width="300" height="500"/>



    </body>
</html>

Answer 1

您必须存储每个矩形的x，y位置。您可以为此创建一个新类。我已经为你树立了榜样：

var Alien = function(x, y) {
    this.x = x;
    this.y = y;
    this.posx = 30 + x*30;
    this.posy = 90 + y*30;
    this.go_right = true;
    this.go_down = false;
    this.perrow = 3;
}

Alien.prototype.move = function() {
         if (!this.go_down) {
            if(this.posx + (this.perrow-1-this.x) * 30 < 250 && this.go_right) {
                this.posx += 3;
            } else if(this.posx < 30 + this.x*30) {
                this.go_right = true;
                this.go_down = true;
            } else if(!this.go_right) {
                this.posx -= 3;
            } else {
                this.go_right = false;
                this.go_down = true;
            }
        } else {
            //if(posy <= 30)
            this.posy += 30;
            this.go_down = false;
        }
}

Alien.prototype.draw = function(context) {
    if(this.x == 0) {
        context.fillStyle = "red";
    } else if(this.x == 1) {
        context.fillStyle = "yellow";
    } else {
        context.fillStyle = "blue";
    }
    context.beginPath();
    context.fillRect(this.posx, this.posy, 20 , 20);
    context.fill();
}

然后你可以更新位置并在你的intervall回调中的一个循环中单独绘制每个对象。

编辑：现在，对象一下子向下移动。

你可以在这里测试一下： http://jsfiddle.net/Z6F4d/3/

在画布中同时移动对象组

1 个答案: