tiistai 25. huhtikuuta 2017

Liikkuva objekti

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>PizzaWorm</title>

<style>
body  {
    background-image: url("kuva.png");
    background-color: #cccccc;
}
</style>

       <script type="text/javascript">

            function leftArrowPressed() {
                var element = document.getElementById("pallo");
                element.style.left = parseInt(element.style.left) - 100 + 'px';
            }

            function rightArrowPressed() {
                var element = document.getElementById("pallo");
                element.style.left = parseInt(element.style.left) + 100 + 'px';
            }

            function upArrowPressed() {
                var element = document.getElementById("pallo");
                element.style.top = parseInt(element.style.top) - 100 + 'px';
            }

            function downArrowPressed() {
                var element = document.getElementById("pallo");
                element.style.top = parseInt(element.style.top) + 100 + 'px';
            }

            function moveSelection(event) {                  
                switch (event.keyCode) {
                    case 37:
                        leftArrowPressed();
                    break;

                    case 39:
                        rightArrowPressed();
                    break;

                    case 38:
                        upArrowPressed();
                    break;

                    case 40:
                        downArrowPressed();
                    break;
                }
            };

        function peli()
        {
            // change position based on speed
            moveSelection();
            setTimeout("peli()",1);
        }

  </script>
  </head>

  <body onload="peli();" onkeydown="moveSelection(event)" onkeyup="moveSelection(event)" bgcolor='blue'>
  <img id="pallo" src="pallo.png" style="position: absolute; left: 15; right: 15; top: 15; bottom: auto; " height="200" width="200">
  </body>
</html>

Ei kommentteja:

Lähetä kommentti