Fire Dragon Posted February 2, 2006 Share Posted February 2, 2006 How I can create,that you can move something using keyboard,using example arrows?I want make picture or object,what you can move using keys.what is that code?Somekind vk_space,example?Thanks. Link to comment Share on other sites More sharing options...
aspnetguy Posted February 2, 2006 Share Posted February 2, 2006 You could give the image an absolute position then use this article to capture key presseshttp://www.google.ca/search?hl=en&q=javasc...row+press&meta=based on what arrow key is pressed you can change the absolute positioning of the image Link to comment Share on other sites More sharing options...
Fire Dragon Posted February 2, 2006 Author Share Posted February 2, 2006 Thank you.About absolute position,how i can set it Link to comment Share on other sites More sharing options...
aspnetguy Posted February 2, 2006 Share Posted February 2, 2006 HTML <img id="img1" src="something.gif" style="position:absolute;top:#px;left:#px" alt=""/> JS var img = document.getElementById('img1');img.style.top = "#px"; //new location based on arrow pressimg.style.left = "#px"; //new location based on arrow press Link to comment Share on other sites More sharing options...
Fire Dragon Posted February 2, 2006 Author Share Posted February 2, 2006 HTML<img id="img1" src="something.gif" style="position:absolute;top:#px;left:#px" alt=""/> JS var img = document.getElementById('img1');img.style.top = "#px"; //new location based on arrow pressimg.style.left = "#px"; //new location based on arrow press <{POST_SNAPBACK}> Ok,I think,that I little like understand,what you mean.One thing,what I want ask,detail is about those "#px"is it so,that I place pixel value after that code snippet?Like #px10"? Link to comment Share on other sites More sharing options...
aspnetguy Posted February 2, 2006 Share Posted February 2, 2006 no you replace # with a number....10px Link to comment Share on other sites More sharing options...
Fire Dragon Posted February 2, 2006 Author Share Posted February 2, 2006 no you replace # with a number....10px<{POST_SNAPBACK}> Okay.That's it.Thanks. Link to comment Share on other sites More sharing options...
Fire Dragon Posted February 2, 2006 Author Share Posted February 2, 2006 Well,like usual I made something wrong My picture don't change it's location.I understood that absolutely location thing,but looks like,that I have problems with mix it with keyboard code.So what is now wrong?Here is my code: <html><head><title>JavaScript key press event</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript">document.onkeyup = KeyCheck; function KeyCheck(e){ var KeyID = (window.event) ? event.keyCode : e.keyCode; switch(KeyID) {case 16: document.Form1.KeyName.value = "Shift"; break; case 17: document.Form1.KeyName.value = "Ctrl"; break; case 18: document.Form1.KeyName.value = "Alt"; break; case 19: document.Form1.KeyName.value = "Pause"; break; case 37: document.Form1.KeyName.value = "Arrow Left"; break; case 38: document.Form1.KeyName.value = "Arrow Up"; break; case 39: document.Form1.KeyName.value = "Arrow Right"; break; case 40: document.Form1.KeyName.value = "Arrow Down"; break; }}</script><script type="text/javascript">var img = document.getElementById('img1');img.style.top = "56px"; //new location based on arrow pressimg.style.left = "49px"; //new location based on arrow press</script><img id="img1" src="lotad.gif" style="position:absolute;top:79px;left:98px" alt=""/></head><body></body></html> Thanks.Oooops!DOuble post!Sorry,sorry,sorry,sorry,sorry... Link to comment Share on other sites More sharing options...
aspnetguy Posted February 2, 2006 Share Posted February 2, 2006 Those samples I gave were just that...samples they can;t just be cut and pasted together to make it work.Here is the solution <html><head> <title>JavaScript key press event</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript"> document.onkeyup = KeyCheck; function KeyCheck(e) { var KeyID = (window.event) ? event.keyCode : e.keyCode; switch(KeyID) { case 37: moveImg(0,-10); break; case 38: moveImg(-10,0); break; case 39: moveImg(0,10); break; case 40: moveImg(10,0); break; } } function moveImg(top,left) { var img = document.getElementById('img1'); var t = img.style.top; var t_val = parseInt(t.substring(0,t.length-2)); img.style.top = (t_val + top) + 'px'; var l = img.style.left; var l_val = parseInt(l.substring(0,l.length-2)); img.style.left = (l_val + left) + 'px'; }</script></head><body><form><img id="img1" src="lotad.gif" style="position:absolute;top:100px;left:100px" alt=""/></form></body></html> Link to comment Share on other sites More sharing options...
Fire Dragon Posted February 3, 2006 Author Share Posted February 3, 2006 OK.So it works like that...thanks.BTW,is there way to make samekind effect,but you only need press key,and it moves,and when you release it,picture stops?Like usually in RPGs or other games.If it requires completely new code,forget,it isn't so important,but if I only need some little modifying,it would be nice know it.However,thanks,that was enought for me. Link to comment Share on other sites More sharing options...
aspnetguy Posted February 3, 2006 Share Posted February 3, 2006 it is a simple changechange document.onkeyup = KeyCheck; to document.onkeydown = KeyCheck; Link to comment Share on other sites More sharing options...
scott100 Posted February 3, 2006 Share Posted February 3, 2006 wicked code aspnetguy, well in how'd u become king of vegas??? Link to comment Share on other sites More sharing options...
aspnetguy Posted February 3, 2006 Share Posted February 3, 2006 In your User Profile you can edit your member title after you have made 500 posts (i think it is 500) I just noticed I could change it a couple days ago :)King of Vegas is a show I like a lot on Spike. Link to comment Share on other sites More sharing options...
Fire Dragon Posted February 3, 2006 Author Share Posted February 3, 2006 Thanks for the code Aspnetguy. Link to comment Share on other sites More sharing options...
aspnetguy Posted February 3, 2006 Share Posted February 3, 2006 no problem it was really fun to work on Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now