moving square (WIP)

<!DOCTYPE HTML>
<html>
    <head>
        <title>NoPage</title>
        <style>
         #container {
         width: 500px;
         height: 500px;
         background: orange;
         position: relative;
         }
         #box {
         width: 50px;
         height: 50px;
         background: blue;
         position: relative;
        }
        </style>
    </head>

    <body>
        <div id="container">
            <div id="box"> </div>
        </div>

        <script>
            var posx = 0;
            var posy = 0;
            var c = document.getElementById("container")

            var sizex = c.style.width
            var sizey = c.style.height

            var speed = 3; //lower is slower | multiples of five

            document.write('<p id="x">' + 'x: ' + posx + ' </p>')
            document.write('<p id="y">' + 'y: ' + posy + ' </p>' + '<br>')
            document.write('<p> room x: ' + sizex + '</p>' + ' ')
            document.write('<p> room y: ' + sizey + '</p>' + ' ')

            var box = document.getElementById("box")
            var x = document.getElementById("x")
            var t = document.getElementById("y")

            window.onkeypress = function(e) {
                switch (e.key) {
                    case 'd':
                        posx+=speed;
                        box.style.left = posx+'px';
                        x.innerText = 'x: ' + posx + ' '

                        if(posx > 451){
                            posx=0
                        }else if(posx<-1){
                            posx=451
                        }

                        break;
                    case 'a':
                        posx-=speed;
                        box.style.left = posx+'px';
                        x.innerText = 'x: ' + posx + ' '

                        if(posx > 451){
                            posx=0
                        }else if(posy<-speed){
                            posx=451
                        }

                        break;
                    case 'w':
                        posy-=speed;
                        box.style.top = posy+'px'
                        y.innerText = 'y: ' + posy + ' '

                        if(posy > 451){
                            posy=0
                        }else if(posy<-speed){
                            posy=451
                        }

                        break;
                    case 's':
                        posy+=speed;
                        box.style.top = posy+'px'
                        y.innerText = 'y: ' + posy + ' '

                        if(posy > 451){
                            posy=0
                        }else if(posy<-speed){
                            posy=451
                        }

                        break;
                }
            }
        </script>
    </body>
</html>