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>
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!
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.
__________________
"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
Before you post, read our: 
