What with these things !

**pcbrainbuster** · 03-28-2007, 05:40 PM

Hello again

,

I have been working on a script that moves the picture depending on your keyboard input -

test this
---------

<html>
<body onkeypress="keyc()" text="yellow" bgcolor="black">
<img src="1.gif" id="image" style="position: absolute;">
<script>
function keyc() {
var keyr = String.fromCharCode(event.keyCode)
if (keyr=="w") {
document.getElementById('image').style.pixelTop+=-5}
else if (keyr=="a") {
document.getElementById('image').style.pixelLeft+=-5}
else if (keyr=="s") {
document.getElementById('image').style.pixelTop+=5}
else if (keyr=="d") {
document.getElementById('image').style.pixelLeft+=5}
}
</script>
</body>
</html>

If you check this out it would be great (w for up, a for left, s for down and d for right).

Here are the problems
---------------------

1) If you replace all the pixelLeft with left and pixelTop with top why does it not work ? left and top are both supposed to have all the functions of pixel whatever....

2) If you test that script you will find out that, the first time when you press w the image will go to the highest position on the page and when you press a for the first time the image goes all the way to the left, why does this happen ?

Notes
------
You can hold down any of those buttons and also that highest point and leftest thing only happens once per refresh...

**Twey** · 03-28-2007, 05:48 PM

1) If you replace all the pixelLeft with left and pixelTop with top why does it not work ? left and top are both supposed to have all the functions of pixel whatever....

They differ in several ways: they have to be followed by units, they're strings, and by default they're the empty string "". You must take all this into account if scripting with them.

2) If you test that script you will find out that, the first time when you press w the image will go to the highest position on the page and when you press a for the first time the image goes all the way to the left, why does this happen ?

Because originally they're 0 (or an empty string, or something; pixelTop is IE-only so I don't know much about it). Thus, when you modify the property for the first time, you set it to 5, meaning five pixels from the top or left of the page.

**pcbrainbuster** · 03-28-2007, 06:11 PM

I fixed the second problem but now can't seem to gice it an measurement eg px/em...

mind lending me a hand ?

(by this i mean please edit the script above by adding the px thing, i tried doing this for example ....top+=-5 + "px" but it did not work...)

**mburt** · 03-28-2007, 06:26 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Move Image</title>
<script type="text/javascript">
var keys = {}
var increment = 5;
function keyc() {
var img = document.getElementById('image');
keys.left = img.offsetLeft;
keys.top = img.offsetTop;
var keyr = String.fromCharCode(event.keyCode)
if (keyr=="w") {
	keys.top = keys.top - increment;
	img.style.top = keys.top+"px";
	}
else if (keyr=="a") {
	keys.left = keys.left - increment;
	img.style.left = keys.left+"px";
	}
else if (keyr=="s") {
	keys.top = keys.top + increment;
	img.style.top = keys.top+"px";
	}
else if (keyr=="d") {
	keys.left = keys.left + increment;
	img.style.left = keys.left+"px";
	}
}
</script>
</head>
<body onkeypress="keyc()" text="yellow" bgcolor="black">
<img src="1.gif" id="image" style="position: absolute;">
</body>
</html>

**pcbrainbuster** · 03-28-2007, 06:30 PM

Thats a little confusing ...

**Twey** · 03-28-2007, 06:38 PM

The best way to do this is using a "tick" system:

Code:

function MovableObject(elm) {
  this.elm = elm;
  this.x = this.y = 0;
  MovableObject.objs.push(this);
}
MovableObject.objs = [];
MovableObject.downKeys = [];
MovableObject.tickThread = null;

MovableObject.tick = function() {
  for(var i = 0, o = MovableObject.objs; i < o.length; ++i)
    o[i].update();
};

MovableObject.init = function() {
  document.onkeydown = MovableObject.keyDownHandler;
  document.onkeyup = MovableObject.keyUpHandler;
  MovableObject.tickThread = setInterval(MovableObject.tick, 30);
};

MovableObject.keyIsDown = function(key) {
  var keycode = (
    typeof key === "string" ?
      keycode = key.charCodeAt(0) :
      key
  );
  return !!MovableObject.downKeys[keycode];
};

MovableObject.keyDownHandler = function(e) {
  MovableObject.downKeys[(e || event).keyCode] = true;
};

MovableObject.keyUpHandler = function(e) {
  MovableObject.downKeys[(e || event).keyCode] = false;
};

MovableObject.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
};

MovableObject.prototype.keymaps = [
  "w" : [0, -1],
  "a" : [-1, 0],
  "s" : [0, 1],
  "d" : [1, 0]
];

MovableObject.prototype.update = function() {
  for(var key in this.keymaps)
    if(MovableObject.keyIsDown(key))
      this.move.apply(
        this,
        this.keymaps.map(
          (function() {
            var me = this;
            return function(a) {
              return a * me.speed;
            };
          )()
        )[key]
      );

  var e = this.elm.style;
  if(e.left !== this.x + "px")
    e.left = this.x + "px";
  if(e.top !== this.y + "px")
    e.top = this.y + "px";
};

onload = function() {
  MovableObject.init();
  var im = document.createElement("img");
  im.src = "1.gif";
  document.body.appendChild("1.gif");
  new MovableObject(im);
};

Untested. I've an example of this kind of thing at http://www.twey.co.uk/?q=gamekit.

**pcbrainbuster** · 03-28-2007, 06:52 PM

Sorry again but I am still so confused

, isn't there a way that you can edit my script by a little?

And there is one more thing, how can I make the script make a tail of itself (by this I mean that when the image moves around the page wherever it has already been there would be its own image there)