Recomendar idea para sprite javascript

[SrTrp]

Hola que tal, ahora vengo con un pequeño detalle que me encuentro, al cambiar sprite shet, se nota mucho cuando lo tecleo ya que cambia la posición al momento, se me ocurrió guardar ya se su posición x o y y cuando haya un cambio en esa posición ahora si cambiar la imagen del sprite.
se ve algo así mi detalle

quizás también noten lo de al momento de dar la curva se ve algo cutre pero agregare otro sprite para evitar ese efecto.
Si piensan en alguna otra idea de como solucionar eso se los agradecería este es mi código

Código (javascript) [Seleccionar] Expandir


for (let i = 0; i < serpi.length; i++) {
    if (i == 0 && serpi.length == 1) {
      ctx.drawImage(obj3, serpi[i].x, serpi[i].y);
    } else if (i == 0) {
        if (d == "LEFT") ctx.drawImage(obj1, 25, 0, 25, 25, serpi[i].x, serpi[i].y, 25, 25);
        if (d == "UP") ctx.drawImage(obj1, 0, 25*1, 25, 25, serpi[i].x, serpi[i].y, 25, 25);
        if (d == "RIGHT") ctx.drawImage(obj1, 0, 0, 25, 25, serpi[i].x, serpi[i].y, 25, 25);
        if (d == "DOWN") ctx.drawImage(obj1, 25*1, 25*1, 25, 25, serpi[i].x, serpi[i].y, 25, 25);               
    }else if(i==serpi.length-1){
      if (d == "LEFT") ctx.drawImage(obj1, 0, 0, 25, 25, serpi[i].x, serpi[i].y, 25, 25);
      if (d == "UP") ctx.drawImage(obj1, 25*1, 25*1, 25, 25, serpi[i].x, serpi[i].y, 25, 25);
      if (d == "RIGHT") ctx.drawImage(obj1, 25, 0, 25, 25, serpi[i].x, serpi[i].y, 25, 25);
      if (d == "DOWN") ctx.drawImage(obj1, 0, 25*1, 25, 25, serpi[i].x, serpi[i].y, 25, 25);
    }else {
      ctx.drawImage(obj2, serpi[i].x, serpi[i].y);
    }
  }



[[u]nsigned]

Podrias implementar las animaciones de Canvas. Es muy abstracto asi, pero por lo que entiendo de tu codigo, estas redibujando TODO el canvas en cada iteracion, porque veo que no estas moviendo nada, solo bibujando, y eso es una pesadilla en temas de rendimiento, estas renderizando todo el canvas completo en cada frame...no seria mas practico dejar el fondo estatico y solo mover la serpiente? en cada frame solo estarias renderizando los cambios con respecto al frame anterior, eso te daria muchisimo mas movimiento, ademas podrias usar animaciones de desplazamiento, rotacion y escaldo.

https://developer.mozilla.org/es/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations