Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Control Movement of Obeject with Arrow Keys and WASD

    The following code should allow the user to control the movement of the "Hydralisk" gif with the arrow and WASD keys, but nothing happens upon pressing either. I've gone through the code several times and can't find an error.

    I'm very new to Javascript, so please explain what I did wrong if it's anything major.

    Thanks!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Phase 3</title>
    	
    	<style>
    		
    		#Hydralisk {position:absolute; left:200px; top:200px}
    		
    	</style>
    	
    	<script>
    		var timer
    		var leftPressed = false
    		var rightPressed = false
    		var upPressed = false
    		var downPressed = false
    		var myTop = 200
    		var myLeft = 200
    		var movement = 10
    			
    		function startMovementCycle()
    		{
    		timer=setInterval('moveHydralisk()',50)
    		}
    		
    		function checkIfPressed(event)
    			{	
    			if (event.keyCode==37 || event.keyCode==65)	{leftPressed = true}		
    			if (event.keyCode==38 || event.keyCode==87)	{upPressed = true}
    			if (event.keyCode==39 || event.keyCode==68)	{rightPressed = true}
    			if (event.keyCode==40 || event.keyCode==83)	{downPressed = true}
    			
    			}
    			
    		function checkIfNotPressed(event)				
    			{	
    			if (event.keyCode==37 || event.keyCode==65)	{leftPressed = false}				
    			if (event.keyCode==38 || event.keyCode==87)	{upPressed = false}
    			if (event.keyCode==39 || event.keyCode==68)	{rightPressed = false}
    			if (event.keyCode==40 || event.keyCode==83)	{downPressed = false}		
    			}
    			
    		function moveHydralisk()
    			{
    			if (upPressed = true)			{myTop-=movement; document.getElementById('Hydralisk').style.top=myTop+"px"}
    			if (downPressed = true)			{myTop+=movement; document.getElementById('Hydralisk').style.top=myTop+"px"}
    			if (leftPressed = true)			{myLeft-=movement; document.getElementById('Hydralisk').style.left=myLeft+"px"}
    			if (rightPressed = true)		{myLeft+=movement; document.getElementById('Hydralisk').style.left=myLeft+"px"}
    			}
    	
    	</script>
    </head>
    
    <body onload="startMovementCycle()" onkeydown="checkIfPressed(event)" onkeyup="checkIfNotPressed(event)">
    
    	<div id="Hydralisk"><img src="Images/Hydralisk.gif" /></div>
    
    </body>
    </html>

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    you arent calling moveHydralisk() from your keyup and keydown functions, thats what sticks out to me anyway.

  • #3
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    No thats not the problem because move function is being called by the timer.

    PROBLEM IS should be == not assignment =
    when you check if (upPressed == true) etc

    Ive just tested it with that changed and its works!

    btw Why lack of ; at the ends of lines?

    Also would be nice if you thanked me for fixing that because I working towards 'earning' my avatar and no one has thanked me for anything yet!
    Last edited by donna1; 12-05-2012 at 10:21 AM.

  • Users who have thanked donna1 for this post:

    TechIlliterate (12-06-2012)

  • #4
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    After I fixed it I loaded it to my site so you can try
    http://donoi.hostoi.com/hydra.html

    I played around with the timer and can make it go really fast if you want, using your code.
    Faster even than my method I tried first of drawing it on the canvas in pure javascript.

    So makes me think this <div> way of things does have some virtues, even though I think it looks more complicated

    p.s. I had to google what a hydralisk was to get a gif!
    Last edited by donna1; 12-05-2012 at 10:58 AM.

  • #5
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Just for fun made mine jump with up key now!
    http://donoi.hostoi.com/hydrajump.html

  • #6
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That works. Thank you very much!

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    How come both TechIlliterate and donna1 have show code with "hydralisk" images?

    (donna1 showed me in PM. But showed me a ".jpg" image.)

    WEIRD coincidence? Or have "hydralisks" (whatever they are) suddenly become popular?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Old Pedant View Post
    How come both TechIlliterate and donna1 have show code with "hydralisk" images?

    (donna1 showed me in PM. But showed me a ".jpg" image.)

    WEIRD coincidence? Or have "hydralisks" (whatever they are) suddenly become popular?
    The hydralisk is a zerg evolution of the slothien. While slothiens were peaceful herbivores, the hydralisk is noted as being one of the most fierce and sadistic of the zerg strains. The average hydralisk in 2499 was 5.4m long and weighed 390 kg. Since hydralisks move relatively slowly over open terrain, it is common for hydralisks to burrow and await their prey to enter killing range before attacking,destroying their enemies in a deadly crossfire. Despite their relatively sluggish nature, hydralisks can climb vertical surfaces[6] and continued evolution of the strain through muscular augmentation has resulted in faster hydralisks.

    OK?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Old Pedant (12-06-2012)

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    LOL! That is truly wonderful, Philip!

    And I sure as heck hope you made that up on the spot, because that's what I'm crediting you with.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Tread carefully..
    Attached Thumbnails Attached Thumbnails Control Movement of Obeject with Arrow Keys and WASD-hydralisk1.jpg  
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •