Untitled

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="_Ludzik.js"></script>
        <style>
            .gracz {
                width: 80px;
                height: 105px;
                background: url('sprite.png');
                position: absolute;
                /*background-position: -80px -210px;*/
            }

        </style>
        <script>

            //window.innerWidth, window.innerHeight - wymiary viewportu(okna przegladarki)
            console.log('Szerokosc: '+window.innerWidth+'Wysokosc: '+window.innerHeight );


            //onload - zdarzenie zachodzi kiedy caly dokument zostanie zaladowany
            function start() {
                //utworzenie pionka

                var p1 = new _Ludzik('gracz1');
                var p2 = new _Ludzik('gracz2');

            }

            function animacja() {
            klatka -= 80;
            pionek.style.backgroundPosition = klatka+"px "+wiersz+"px";

            }


//            function wPrawo() {
//                //offsetTop, offsetLeft = tylko do odczytu - pozycja
//                //offsetWidth, offsetHeight - tylko do odczytu - rozmiar
//                pionek.style.left = (pionek.offsetLeft)+krok+'px';
//                pionek.style.background = "yellow";
//            }
//
//            function wLewo() {
//             pionek.style.left = (pionek.offsetLeft)-krok+'px';
//             pionek.style.background = "blue";
//            }
//
//            function wGore() {
//                pionek.style.top = (pionek.offsetTop)-krok+'px';
//                pionek.style.background = "gray";
//            }
//
//
//            function wDol() {
//                pionek.style.top = (pionek.offsetTop)+krok+'px';
//                pionek.style.background = "black";
//            }
        </script>
    </head>
    <body onload="start()">
        <form>
            <input type="button" value="lewo" onclick="przesun(1)">
            <input type="button" value="góra" onclick="przesun(2)" >
            <input type="button" value="prawo" onclick="przesun(3)">
            <input type="button" value="dół" onclick="przesun(4)">
            <input type="button" value="STOP" onclick="clearInterval(interwal)">


        </form>
        <hr>
        <div id="plansza"></div>
    </body>
</html>