So this is my code:

```
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            html {
                overflow: hidden;
            }
            #demo{
                position: relative;
            }
        </style>
    </head>
    <body>
        <input type="text" onkeypress="Snake(event)">
        <p id="demo" style="left: 10px;">--></p>
        <script>
            function Snake(event) {
                var x = event.which;

                switch (x) {
                    case 119: /*forward(w)*/
                        break;
                    case 115: /*back(s)*/
                        break;
                    case 97: document.getElementById("demo").style.left = "10px";
                        clearInterval(int);
                        break;
                    case 100: var y = document.getElementById("demo").style.left; y = y.replace("px", ""); y = parseInt(y);
                        var int = setInterval(function () {
                            y += 10;
                            var z = y.toString();
                            document.getElementById("demo").style.left = z + "px";
                        }, 1000);
                        break;
                }
            }
        </script>
    </body>
</html>

```

It works pretty fine when i tap d(unicode=100) but whenever i press a(unicode=97) it goes back to 10px, then continues from where it left. (with the d). Probably there is a problem with clearInterval().