Move Elements On Web Page
In this tutorial, you will learn how to move elements on the screen by pressing arrow keys. To accomplish this concept, You can make use of JavaScript, HTML, and CSS.
The idea behind this is when a user press direction keys which are up down left and right then some element move on the page according to the key press.
The logic is very simple and by enhancing that login you can create a simple game on the web using JavaScript today it’s just a demo how to move elements across the web page.
I use simple conditions if and use HTML event keypress because I want to move my element on keypress.
Check for the Key Pressed
First, I check if the key is pressed or not and when a key is pressed then call a function.
|
1 |
document.onkeydown = checkKey; |
First, get the element which I want to move.
|
1 |
var x=document.getElementById("imgf"); |
Then take two variables, initialize them with element’s default top and left positions.
Then save the value of key press in variable e using window.event.
|
1 |
e = e || window.event; |
Now I know the ASCII of all four directional key.
|
1 2 3 4 5 6 7 |
Top=38 Down=40 Left=37 Right=39 |
So first I check what the value of keycode property and then according to it increase or decrease the values from left, right, top or bottom.
|
1 |
if (e.keyCode == '38') |
JavaScript Rotate
Now to rotate the element in the direction of key CSS transform property is used and rotates it in some degree.
|
1 |
x.style.transform="rotate(90deg)"; |
Complete JavaScript Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<script> document.onkeydown = checkKey; var x=document.getElementById("imgf"); var a=220; var b=550; function checkKey(e) { e = e || window.event; if(a<=0 || b<=0){ alert("You are ging out from this planet plz come back");a+=2;b+=3; }else{ if (e.keyCode == '38') { x.style.transform="rotate(0deg)"; a-=3;x.style.top=a;//top } else if (e.keyCode == '40') { x.style.transform="rotate(180deg)";a+=3; x.style.top=a;// down } else if (e.keyCode == '37') { x.style.transform="rotate(270deg)"; b-=3; x.style.left=b;// left } else if (e.keyCode == '39') { x.style.transform="rotate(90deg)";b+=3; x.style.left=b;// right } } } </script> |
Image to Move on the Screen
And in HTML code, we have only one div, and this is also empty.
|
1 2 3 4 5 |
<body> <div id="imgf"></div> </body> |
Apply CSS Properties
In CSS, we set the background-image of that div and set some width and height of the div.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#imgf {height: 18%; background-position: center; width: 8%; background-repeat: no-repeat; background-size:100px 100px; background-image: url("mypic.png"); position:absolute; left: 550; top: 220; } |
If user exceeded screen from the top or left, then it will stop him and show a pop-up warning.
Download Amazing Aeroplane Moving on Screen
Watch Live Demo Of Amazing Aeroplane Moving on Screen