<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