Home » Javascript

JavaScript - Move Object with Arrow Keys using JavaScript Function

Move object (image) with arrow keys using JavaScript function - In this example we will learn how to move object/image using arrow keys (left, top, right and down).

We will call function in Body tag on "onkeydown" event, when you will down arrow keys object will be moved on the browser screen.

JavaScript Code Snippets - Move Object (Image) with Arrow Keys using JavaScript Function

JavaScript function

<script type="text/javascript">
	//init object globally
	var objImage= null;
	function init(){
		objImage=document.getElementById("image1");				
		objImage.style.position='relative';
		objImage.style.left='0px';
		objImage.style.top='0px';
	}
	function getKeyAndMove(e){				
		var key_code=e.which||e.keyCode;
		switch(key_code){
			case 37: //left arrow key
				moveLeft();
				break;
			case 38: //Up arrow key
				moveUp();
				break;
			case 39: //right arrow key
				moveRight();
				break;
			case 40: //down arrow key
				moveDown();
				break;						
		}
	}
	function moveLeft(){
		objImage.style.left=parseInt(objImage.style.left)-5 +'px';
	}
	function moveUp(){
		objImage.style.top=parseInt(objImage.style.top)-5 +'px';
	}
	function moveRight(){
		objImage.style.left=parseInt(objImage.style.left)+5 +'px';
	}
	function moveDown(){
		objImage.style.top=parseInt(objImage.style.top)+5 +'px';
	}
	window.onload=init;
</script>

HTML Source Code with JavaScript

<!--JavaScript - Move Object with Arrow Keys using JavaScript Function.-->
<html>
	<head>
		<title>JavaScript - Move Object with Arrow Keys using JavaScript Function.</title>
		<script type="text/javascript">
			//init object globally
			var objImage= null;
			function init(){
				objImage=document.getElementById("image1");				
				objImage.style.position='relative';
				objImage.style.left='0px';
				objImage.style.top='0px';
			}
			function getKeyAndMove(e){				
				var key_code=e.which||e.keyCode;
				switch(key_code){
					case 37: //left arrow key
						moveLeft();
						break;
					case 38: //Up arrow key
						moveUp();
						break;
					case 39: //right arrow key
						moveRight();
						break;
					case 40: //down arrow key
						moveDown();
						break;						
				}
			}
			function moveLeft(){
				objImage.style.left=parseInt(objImage.style.left)-5 +'px';
			}
			function moveUp(){
				objImage.style.top=parseInt(objImage.style.top)-5 +'px';
			}
			function moveRight(){
				objImage.style.left=parseInt(objImage.style.left)+5 +'px';
			}
			function moveDown(){
				objImage.style.top=parseInt(objImage.style.top)+5 +'px';
			}
			window.onload=init;
		</script>
	</head>

	<body onkeydown='getKeyAndMove(event)'>
		<h1>JavaScript - Move Object with Arrow Keys using JavaScript Function.</h1>
		<h2>Use Arrow keys to move object left, top, right and down.</h2>
		<img id="image1" src="Images/ihelp1.png" alt="includehelp.com"/>
	</body>
</html>

Result

move object with arrow keys  in js, move image with arrow keys in js




Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.



Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing » Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.