Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Почему рисуется только один прямоугольник циклом? (https://javascript.ru/forum/dom-window/75364-pochemu-risuetsya-tolko-odin-pryamougolnik-ciklom.html)

drakulawz 28.09.2018 19:35

Почему рисуется только один прямоугольник циклом?
 
Здравствуйте!
Рисую прямоугольники циклом, должно выйти 3 ряда по 3, но получаю один.
Есть вот такой скрипт:

$(document).ready(function () {
    cnv = document.getElementById('canvas');
    ctx = cnv.getContext('2d');
    width = cnv.width;
    height = cnv.height;

    var fillAll = function (color) {
        ctx.fillStyle = '#ccc';
        ctx.fillRect(0, 0, width, height);
    };

    var strkRect = function (x, y, w, h, color) {
        ctx.strokeStyle = color;
        ctx.strokeWidth = 2;
        ctx.strokeRect(x, y, w, h);
    };

    var area = {
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        color: 'white',

        draw: function () {
            strkRect(this.x, this.y, this.width, this.height, this.color);
        },

        init: function (x, y, w, h) {
            this.x = x;
            this.y = y;
            this.width = w;
            this.height = h;
        }
    };

    for (var a1 = 0; a1 < 3; a1++) {
        for (var a2 = 0; a2 < 3; a2++) {
            var dW = Math.ceil(width / 3),
                dY = Math.ceil(height / 3);
            area.init(dW * a1, dY * a2, dW, dY);
        }
    };

    setInterval(function () {
        fillAll();
        area.draw();
    }, 1000 / 60);
});


На странице я вижу только один прямоугольник в конце канваса, как будто бы отрисовало все и стёрло но оставило последний.
Подскажите, может я не правильно цикл применил или не так инициализировать надо? Только прошу, не нужно свои скрипты писать - если возможно. Я их потом не адаптирую, у меня 8 скриптов (файлов) связанных - не хватит мозгов на это.:-? Буду благодарен если кто-нибудь объяснить как правильно делать или в чём ошибка, я уверен, что и сам скрипт смогу написать, по подсказке. Если уж нельзя без примера...:agree:

рони 28.09.2018 19:45

Цитата:

Сообщение от drakulawz
На странице я вижу только один прямоугольник

... а откуда взять больше одного?

рони 28.09.2018 19:51

Цитата:

Сообщение от drakulawz
Рисую прямоугольники циклом

нет этого в коде! есть бесконечное рисование последних данных.

рони 28.09.2018 19:53

Цитата:

Сообщение от drakulawz
как правильно делать

убрать setInterval, а его содержимое добавить в цикл.

drakulawz 29.09.2018 11:17

Цитата:

Сообщение от рони
убрать setInterval, а его содержимое добавить в цикл.

Понял! Благодарю за помощь! Но я сделал всё же с сетинтервалом, просто вставил цикл вот так:
setInterval(function () {
        fillAll();
        for (var a1 = 0; a1 < 3; a1++) {
        for (var a2 = 0; a2 < 3; a2++) {
            var dW = Math.ceil(width / 3),
                dY = Math.ceil(height / 3);
            area.init(dW * a1, dY * a2, dW, dY);
            area.draw(dW * a1, dY * a2, dW, dY);
            }
    };
    }, 1000 / 60);

рони 29.09.2018 11:48

drakulawz,
можно узнать для чего вам нужен setInterval в данном случае? зачем нужны строки 1 и 11?

drakulawz 30.09.2018 11:02

Цитата:

Сообщение от рони
для чего вам нужен setInterval в данном случае

В данном случаи он не нужен, но для работы всей программы без него вообще ничего не будет рисоваться. Я же выложил только ту часть кода с которой у меня проблема. и там не setInterval будет, а вот так:
// файл engine.js:
var _renderer = (function () {
    return requestAnimationFrame || webkitRequestAnimationFrame ||
        mozRequestAnimationFrame ||
        oRequestAnimationFrame ||
        msRequestAnimationFrame;
})();

var _engine = function () {
    console.log('The game loop is not initialized!');
};

var startGame = function (game) {
    if (typeof game == 'function') {
        _engine = game;
    }
    gameLoop();
};

var setGame = function (game) {
    if (typeof game == 'function') {
        _engine = game;
    }
};

var gameLoop = function () {
    _engine();
    _renderer(gameLoop);
};

    // файл со скриптом инициализации всех функций script.js:
    var game = function () {
        fillAll('#ccc');
        for (var a1 = 0; a1 < 3; a1++) {
            for (var a2 = 0; a2 < 3; a2++) {
                var dW = Math.ceil(width / 3),
                    dY = Math.ceil(height / 3);
                area.init(dW * a1, dY * a2, dW, dY);
                area.draw(dW * a1, dY * a2, dW, dY);
            }
        };
        target.draw();
        player.move();
        player.draw();
    };

    var menu = function () {
        fillAll('#ccc');
        for (var a1 = 0; a1 < 3; a1++) {
            for (var a2 = 0; a2 < 3; a2++) {
                var dW = Math.ceil(width / 3),
                    dY = Math.ceil(height / 3);
                area.init(dW * a1, dY * a2, dW, dY);
                area.draw(dW * a1, dY * a2, dW, dY);
            }
        };
        player.draw();
        if (isAnyKeyDown()) {
            setGame(game);
        }
    };

    startGame(menu);


Если можно как-то проще сделать то буду рад увидеть это.:yes:


Часовой пояс GMT +3, время: 05:30.