HTML 5 Grid Drawing Проблема - PullRequest
Новая
       38

HTML 5 Grid Drawing Проблема

1 голос
/ 04 сентября 2011 
    //Set the number of rows and columns for the board
var rows = 10;
var columns = 10;
var offset= 0.5;

//Create the board, setting random squares to be obstacles
        var board = [];

for (var x = 0; x < columns; x++)
        {
            board[x] = [];

            for (var y = 0; y < rows; y++)
            {
                    board[x][y] = 0;
            }
        }

function draw_grid(size, amount, ctx){
    ctx.strokeStyle = "#FFF";
    for (var i=0.5; i<size*amount+1; i+=size){
        ctx.moveTo(0,i);
        ctx.lineTo(size*amount, i);
        ctx.moveTo(i,0);
        ctx.lineTo(i, size*amount);
        ctx.stroke();
    }
}

function update_grid(grid, ctx){
    ctx.fillStyle = "#000";
    for (var i=0; i<grid.length; i+=1){
        for (var a=0; a<grid[i].length; a+=1){
            if (grid[i][a]==1){
                ctx.fillRect((i*32)+offset, (a*32)+offset, 32, 32);
            }
        }
    }
}

game_area = document.getElementById("a");
context = game_area.getContext('2d');
board[0][3] = 1;

function on_enter_frame(){

    context.clearRect(0,0, game_area.width, game_area.height);
    context.fillStyle = "#28F";
    context.fillRect(0,0,500,500);
    draw_grid(32, 10, context);
    update_grid(board, context);

}

setInterval(on_enter_frame,30);

Этот код, кажется, поглощает много памяти, кто-нибудь имеет представление о том, почему? Только что начал программировать на html5 ... Я считаю, что это как-то связано с циклами for в функции update_grid, помогите оценить

Ответы [ 2 ]

0 голосов
/ 19 сентября 2011 
game_area = document.getElementById("a");
context = game_area.getContext('2d');

Обе эти переменные объявлены без использования ключевого слова var ... это опасно и может вызвать утечки памяти в зависимости от того, как вы их используете.

Это путь вперед: 

var game_area = document.getElementById("a");
var context = game_area.getContext('2d');

Также не рекомендуется обращаться к глобальным переменным, поскольку виртуальная машина JavaScript должна выполнять поиск, который является довольно дорогостоящим.Лучше было бы сделать это: 

function on_enter_frame(pContext, pGame_area, pBoard){

    pContext.clearRect(0,0, pGame_area.width, pGame_area.height);
    pContext.fillStyle = "#28F";
    pContext.fillRect(0,0,500,500);
    draw_grid(32, 10, pContext);
    update_grid(pBoard, pContext);

}

Затем вызвать этот метод с необходимыми параметрами, уже существующими в текущей области: 

on_enter_frame(context, game_area, board);
0 голосов
/ 05 сентября 2011

Просто предложение, вы делаете много вычислений в своих циклах, и ваш период setInterval очень короткий - вам нужно так часто обновлять вашу сетку?

В вашей функции draw_grid () вы вычисляете размер * количество 3 раза, почему бы не сделать это один раз за пределами цикла как локальную переменную и повторно использовать эту переменную там, где она вам нужна?

Альтернативным способом рисования может быть использование mozRequestAnimationFrame , это может быть более эффективным, если вам нужно рисовать так часто.

...