How to move an element in javascript automatically with while loop?

I am making a Snake game so I'm trying to move my snake. It is moving with keys but it should move automatically on the screen. I tried doing that with while loops like in the code below but because of break; I have to press a key every time I want it to move. How can I make it move automatically? I tried removing break; an using an if statement but I didn't succeed.

Any other solutions or something else?

I'm new to programming so any advices would be helpful.

var main = function() {
    var i = 0;
    var j = 0;
    $(document).keyup(function(event) {
        var e = event.which;

        while(i == 1) {
            $('.snake').animate({left: '+=10px'}, 10);
            break;
        }
        while(i == 2) {
            $('.snake').animate({left: '-=10px'}, 10);
            break;
        }
        while(i == 3) {
            $('.snake').animate({top: '-=10px'}, 10);
            break;
        }
        while(i == 4) {
            $('.snake').animate({top: '+=10px'}, 10);
            break;
        }

        //Which key is preesed
        //D
        if(e == 68) {
            i = 1;
        }
        //A
        else if(e == 65) {
            i = 2;
        }
        //W
        else if(e == 87) {
            i = 3;
        }
        //S
        else if(e == 83) {
            i = 4;
        }
        //Any other key
        else {
            i = 0;
        }


    });
};

 $(document).ready(main);