角色扮演游戏，如何滑动世界(场景）

你有没有在GameBoy上玩过口袋妖怪或塞尔达？当然是的，我正在尝试用画布制作塞尔达。这是我工作的链接：白戏

如您所见，您可以移动。实际上，当您按下一个键时，您的位置是修饰（+1或-1等...），并且我会在任何移动中重写所有地图。所以我们的印象是你做小眨眼，这不是我想要的。

想要的是我的角色幻灯片下的地图，有一个流畅的运动翻译你知道吗？

我尝试过，translate（），重写所有在任何像素上构成世界的图像，但它是滞后的。

您可以在此处查看流体位移的示例：示例。这就是我想要的。

这是我的代码，它可能会帮助您了解它的实际工作原理：

window.onload = function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.setGlobalAlpha;
var xPerso = 60;
var yPerso = 59;
var xCamera = xPerso-Math.round(nbCaseLongueur/2);
var yCamera = yPerso-Math.round(nbCaseHauteur/2);

setTimeout(function(){
    initialiserMap(0);
    ctx.drawImage(perso1, 0, 0, 17, 23, (Math.round(nbCaseLongueur/2))*32, (Math.round(nbCaseHauteur/2))*32-16, 32, 48);
}, 250);
function deplacementOk(sens){
    var retour = false;
    switch(sens){
        case 1: // HAUT
            if(map[yPerso-1][xPerso] == " ")
                return true;
            break;
        case 2: // BAS
            var bloc = map[yPerso+1][xPerso];
            if(bloc == " " || bloc == "7" || bloc == "8")
                return true;
            break;
        case 3: // DROITE
            var bloc = map[yPerso][xPerso+1];
            if(bloc == " " || bloc == "7" || bloc == "8")
                return true;
            break;
        case 4: // GAUCHE
            var bloc = map[yPerso][xPerso-1];
            if(bloc == " " || bloc == "7" || bloc == "8")
                return true;
            break;
    }
    return retour;
}
onkeydown= function(e){
    //alert(e.keyCode);
    switch(e.keyCode){
        case 38: // HAUT
        case 90: // Z
            if(deplacementOk(1)){
                yCamera--;
                yPerso--;
                initialiserMap(1);
                ctx.drawImage(perso2, 0, 0, 17, 23, (Math.round(nbCaseLongueur/2))*32, (Math.round(nbCaseHauteur/2))*32-16, 32, 48);
                if(infoAffiche == true){
                    document.getElementById('boiteAInfoYPerso').innerHTML = "Position Y = "+yPerso+"<br/>";
                }
            }
            break;
        case 40: // BAS
        case 83: // S
            if(deplacementOk(2)){
                yCamera++;
                yPerso++;
                initialiserMap(2);
                ctx.drawImage(perso1, 0, 0, 17, 23, (Math.round(nbCaseLongueur/2))*32, (Math.round(nbCaseHauteur/2))*32-16, 32, 48);
                if(infoAffiche == true){
                    document.getElementById('boiteAInfoYPerso').innerHTML = "Position Y = "+yPerso+"<br/>";
                }
            }
            break;
        case 68: // D
        case 39: // DROITE
            if(deplacementOk(3)){
                xCamera++;
                xPerso++;
                initialiserMap(3);
                ctx.drawImage(perso4, 0, 0, 17, 23, (Math.round(nbCaseLongueur/2))*32, (Math.round(nbCaseHauteur/2))*32-16, 32, 48);
                if(infoAffiche == true){
                    document.getElementById('boiteAInfoXPerso').innerHTML = "Position X = "+xPerso+"<br/>";
                }
            }
            break;
        case 37: // GAUCHE
        case 81: // Q
            if(deplacementOk(4)){
                xCamera--;
                xPerso--;
                initialiserMap(4);
                ctx.drawImage(perso3, 0, 0, 17, 23, (Math.round(nbCaseLongueur/2))*32, (Math.round(nbCaseHauteur/2))*32-16, 32, 48);
                if(infoAffiche == true){
                    document.getElementById('boiteAInfoXPerso').innerHTML = "Position X = "+xPerso+"<br/>";
                }
            }
            break;
    }
}
function translationMap(a,b){
    ctx.save();
    ctx.translate(a,b);
    ctx.drawImage(canvas, 0, 0);
    ctx.restore();
}
function animate() {
    ctx.save();
    setTimeout(function() {
        animate();
        // get the current image
        // get the xy where the image will be drawn
        var img=imgs[imageIndex];
        var imgX=(canvas.width/2-img.width/2)*animPctComplete;
        var imgY=(canvas.height/2)-img.height/2;
        // set the current opacity
        ctx.globalAlpha=animPctComplete;
        // draw the image
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(img,imgX,imgY);
        // increment the animationPctComplete for next frame
        animPctComplete+=.01;  //100/fps;
        // if the current animation is complete
        // reset the animation with the next image
        if(animPctComplete>=1.00){
            animPctComplete=0.00;
            imageIndex++;
            if(imageIndex>=imgs.length){imageIndex=0;}
        }
    }, 1000 / fps);
}
animate();
    
function initialiserMap(sens){
    for(var cpt=0;cpt<nbCaseHauteur;cpt++){
        for(var cpt2=0;cpt2<nbCaseLongueur;cpt2++){
            switch(map[yCamera+cpt][xCamera+cpt2]){
                case " ":
                    ctx.drawImage(herbe, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
                    break;
                case "#":
                    ctx.drawImage(wall1, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
                    break;
                case "1":
                    ctx.drawImage(arbre1, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
                    break;
                case "2":
                    ctx.drawImage(arbre2, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
                    break;
                case "3":
                    ctx.drawImage(arbre3, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
                    break;
                case "4":
                    ctx.drawImage(arbre4, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
                    break;
                case "5":
                    ctx.drawImage(arbre5, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
                    break;
                case "6":
                    ctx.drawImage(arbre6, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
                    break;
                case "7":
                    ctx.drawImage(arbre7, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
                    break;
                case "8":
                    ctx.drawImage(arbre8, 0, 0, 32, 32, cpt2*32, cpt*32, 32, 32);
                    break;
            }
        }
    }
}

}

帮助我的东西，相信我，当我说你之前我试过问你，也希望我不犯错误或任何错误的事情堆栈溢出规则。

谢谢大家。