我的 JavaScript 画布地图脚本和性能不佳

基本上下面是我的原型脚本，它使用 128x128 图块在画布上绘制地图，用户可以拖动该地图四处移动。

脚本确实有效。但是，我有几个问题需要解决：1.表现不佳，我不知道为什么。2.我缺少在实际绘制之前缓冲瓷砖的方法。3.如果您发现任何其他问题也可以帮助我使事情运行得更顺利，那就太棒了。

脚本的一些解释：

变量

坐标 - 定义要显示的实际图像。图像文件名的类型为"0_1.jpg"，其中 0 是 Y，1 是 X。

mouse_position - 顾名思义，正在记录鼠标位置。

position - 这是一个命名不佳的变量。它定义了在画布上绘制的上下文的位置。当用户拖动视图时，这会发生变化。

任何援助将不胜感激。谢谢。

var coordinates = [0, 0];
var mouse_position = [0, 0];
var position = [-128, -128];
var canvas = document.getElementById('map_canvas');
var context = canvas.getContext('2d');
var buffer = [];
var buffer_x = Math.floor(window.innerWidth/128)+4;
var buffer_y = Math.floor(window.innerHeight/128)+4;

var animation_frame_request = function() {
    var a = window.requestAnimationFrame;
    var b = window.webkitRequestAnimationFrame;
    var c = window.mozRequestAnimationFrame;
    var d = function(callback) {
        window.setTimeout(callback, 1000/60);
    }
    return a || b || c || d;
}


var resizeCanvas = function() {
    window.canvas.width = window.innerWidth;
    window.canvas.height = window.innerHeight;

    window.buffer_x = Math.floor(window.innerWidth/128)+4;
    window.buffer_y = Math.floor(window.innerHeight/128)+4;

    window.buffer = [];
    for (row = 0; row < window.buffer_y; row++) {
        x = [];
        for (col = 0; col < window.buffer_x; col++) {
            x.push(new Image());
        }
        window.buffer.push(x);
    }
}


var render = function() {
    animation_frame_request(render);
    for (row = 0; row < window.buffer_y; row++) {
        for (col = 0; col < window.buffer_x; col++) {
            cy = window.coordinates[1]+row;
            cx = window.coordinates[0]+col;
            window.buffer[row][col].src =  'map/'+cy+'_'+cx+'.jpg';
        }
    }
    for (row = 0; row < window.buffer_y; row++) {
        for (col = 0; col < window.buffer_x; col++) {
            window.context.drawImage(window.buffer[row][col],
                                     window.position[0]+col*128,
                                     window.position[1]+row*128, 128, 128);
        }
    }
}


var events = function() {
    window.canvas.onmousemove = function(e) {
        if (e['buttons'] == 1) {
            window.position[0] += (e.clientX-window.mouse_position[0]);
            window.position[1] += (e.clientY-window.mouse_position[1]);
            if (window.position[0] >= 0) {
                window.position[0] = -128;
                window.coordinates[0] -= 1;
            } else if (window.position[0] < -128) {
                window.position[0] = 0;
                window.coordinates[0] += 1;
            }
            if (window.position[1] >= 0) {
                window.position[1] = -128;
                window.coordinates[1] -= 1;
            } else if (window.position[1] < -128) {
                window.position[1] = 0;
                window.coordinates[1] += 1;
            }
            render();
        }
        window.mouse_position[0] = e.clientX;
        window.mouse_position[1] = e.clientY;
    }
}

window.addEventListener('resize', resizeCanvas, false);
window.addEventListener('load', resizeCanvas, false);
window.addEventListener('mousemove', events, false);
resizeCanvas();