Control Movement of Obeject with Arrow Keys and WASD

TechIlliterate

12-04-2012, 03:45 PM

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! :)

<!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>

DanInMa

12-04-2012, 05:23 PM

you arent calling moveHydralisk() from your keyup and keydown functions, thats what sticks out to me anyway.

donna1

12-05-2012, 09:43 AM

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!

donna1

12-05-2012, 10:53 AM

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!

donna1

12-05-2012, 01:21 PM

Just for fun made mine jump with up key now!
http://donoi.hostoi.com/hydrajump.html

TechIlliterate

12-06-2012, 02:59 AM

That works. Thank you very much!

Old Pedant

12-06-2012, 03:20 AM

Philip M

12-06-2012, 07:21 AM

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? :)

Old Pedant

12-06-2012, 06:55 PM

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.

AndrewGSW

12-06-2012, 07:15 PM

Tread carefully..