Почему рисуется только один прямоугольник циклом?
Здравствуйте!
Рисую прямоугольники циклом, должно выйти 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: |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
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); |
drakulawz,
можно узнать для чего вам нужен setInterval в данном случае? зачем нужны строки 1 и 11? |
Цитата:
// файл 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. |