Poruszanie się obiektem za pomocą strzałek JS

pytanie zadane 19 sierpnia 2017 w JavaScript przez Dorian Bajorek Dyskutant (7,920 p.)

Witam,otóż nie mam wyobrażenia jak można poruszać obiektem za pomocą strzałek w lewo i w prawo.Mógłby ktoś podesłać mi jakiś kod lub jakiś ciekawy artykuł na ten temat.Zależy mi aby to było napisany czystym JavaScripcie :)

komentarz 19 sierpnia 2017 przez niezalogowany

Elementem DOM?

komentarz 19 sierpnia 2017 przez Dorian Bajorek Dyskutant (7,920 p.)

tak,niech to będzie zwykły kwadrat wystylizowany w CSSie

2 odpowiedzi

odpowiedź 19 sierpnia 2017 przez Chess Szeryf (76,710 p.)
edycja 19 sierpnia 2017 przez Chess

Najlepsza

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

    <script type="text/javascript">

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

            function rightArrowPressed() {
            var element = document.getElementById("image1");
            element.style.left = parseInt(element.style.left) + 5 + 'px';

            }

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

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

            function moveSelection(evt) {
                switch (evt.keyCode) {
                    case 37:
                    leftArrowPressed();
                    break;
                    case 39:
                    rightArrowPressed();
                    break;
                    case 38:
                    upArrowPressed();
                    break;
                    case 40:
                    downArrowPressed();
                    break;
                    }
                };

        function docReady()
        {
          
          window.addEventListener('keydown', moveSelection);
        }

  </script>
  </head>

  <body onload="docReady()" onkeydown="" onkeyup="" bgcolor='yellow'>
   Test
  <img id="image1" src="http://placekitten.com/69/69" style="position:absolute;left:0; top:0;" height="15" width="15">
  </body>
   end html
</html>

Źródło:

http://plnkr.co/edit/kjEMr49wI0YFMQsf0iuC?p=preview

https://stackoverflow.com/questions/21790295/move-an-image-with-the-arrow-keys-using-javascript

Żeby napisać poruszanie się obiektu po płótnie, to musisz znać takie pojęcia jak:

- function

- addEventListener

- keyCode

- if (or for example switch)

- unit (for example px)

- elements HTML or XHTML or other

<script>
function example(e){  	
	if(e.keyCode == 37) {
		console.log("left");
	}else if(e.keyCode == 39){
		console.log("right");
	}// dalej analogicznie
}
window.addEventListener('keydown', example,false);
</script>

Kod klawiszy możesz sprawdzić np. dzięki tej stronie:

https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

https://jsfiddle.net/Sk8erPeter/Mhpy3/

Kod klawisza możesz też sprawdzić wbudowanymi w JavaScript funkcjami np. tą:

console.log('B'.charCodeAt());

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt

1	komentarz 19 sierpnia 2017 przez Ehlert Ekspert (212,670 p.) Musiałeś skądś chyba skopiować ten kod bo wygrałeś konkurs na rekord antywzorców w jak najkrótszym code-snippetcie.