PDA

View Full Version : 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
<!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:
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)

mburt
03-28-2007, 07:13 PM
isn't there a way that you can edit my script by a little?
I did. See my post.

pcbrainbuster
03-28-2007, 07:21 PM
Thanks for that but I do not know what {} had to do with it and I also don't know what offsetTop is or offsetleft...

mburt
03-29-2007, 09:58 PM
offsetTop is or offsetleft...
The equivalent to pixelLeft/Top but works in all browsers.

but I do not know what {} had to do with it
Creates an object which you can attach attributes as functions/variables/etc. Has a global scope for the variables within the {} clause.

pcbrainbuster
03-29-2007, 10:18 PM
Thanks for your post Micheal :), but I won't be able to verify what you said until tommorow (I'm checkin out some games :))

mburt
03-29-2007, 10:30 PM
Here's an example of this:

<script type="text/javascript">
var wxWindow = {
clientEdgeX: function() {
return window.screen.availWidth;
},
clientEdgeY: function() {
return window.screen.availHeight;
}
};
alert(wxWindow.clientEdgeX()+","+wxWindow.clientEdgeY());
</script>

pcbrainbuster
03-30-2007, 07:06 AM
Well I tried a test with offset test and it failed but then I had a look at your script and I have to say I have never seen such a script like that before and this time you have used things with edges and stuff which is something else I do not know about :(, sorry to be such a hassle but is there a site that may explain all the offset stuff ?

I have to go school now in 5 minutes :(, though I think it would only last half as usual due to Easter Holidays :)

codeexploiter
03-30-2007, 07:15 AM
I have to say I have never seen such a script like that before

It is based on JSON (http://www.json.org/) (JavaScript Object Notation)

mburt
03-30-2007, 10:28 AM
The attribute offsetLeft or offsetTop (applies to an object) gives you the absolute position left of the screen, or top without the extra "px". The style.left/style.top will return with the added "px". So if you're doing positioning with some math involved, offsetLeft/Top is your best route. parseInt([object].style.left); will work too. The parseInt() functions gets an integer from a string value. Ex: "5em" will return 5. So "26px" returns 26.

As for the object oriented scripting... it's not a complex topic, as codeexploiter gave a link explaining.

pcbrainbuster
03-30-2007, 01:09 PM
For some stupid reason I just can't seem to understand this, isn't JSON a completely useless thing as JavaScript by it self can do everthing that JSON can do...

Can someone please give me a example of offsetleft, please use this template -

<html>
<body>
<div align="center">Hello World</div><br>
<input type="button" value="Show offsetLeft" onclick="ol()">
<script>
function ol() {
alert(please insert the code here that will show the div offsetleft)
}
</script>
</body>
</html>

Happy Easter :)

Twey
03-30-2007, 06:05 PM
Er, that would be
alert(document.getElementsByTagName("div")[0].offsetLeft);

pcbrainbuster
03-30-2007, 08:33 PM
Thanks Twey for your useful post, I tried your script and it worked then I thought I understood how offset worked and did a test that miserably failed,
mind helping me out :)? -

<html>
<body onscroll="keepup()" bgcolor="black">
<img src="1.gif" id="image" style="position: relative;">
<script>
function keepup() {
document.getElementById('image').offsetTop=300+"px"
}
</script>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
</body>
</html>

Thanks :)

Twey
03-30-2007, 09:51 PM
Firstly, there are no units required: it is a numerical value, and cannot be specified in anything but pixels. Secondly, it refers to the position from the top of the page (or more specifically, the offsetParent; see QuirksMode.org's JavaScript - Find position (http://www.quirksmode.org/js/findpos.html)) so your above script will do nothing.

pcbrainbuster
03-30-2007, 10:35 PM
Well I have been to that site before and its very confusing, I am seriously sorry for being such a slow learner but do you mind giving me an example which is easy to understand :(...

Thanks Seriously :)

pcbrainbuster
03-31-2007, 05:16 PM
WoooHooo, I guessed how to make it work and it worked -

<html>
<body onscroll="keepup()" bgcolor="black">
<img src="1.gif" id="image" style="position: absolute;">
<script>
function keepup() {
document.getElementById('image').style.top=document.body.scrollTop+10
}
</script>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
</body>
</html>

pcbrainbuster
03-31-2007, 07:56 PM
Well there is one more ting and its not a problem but will like some good webmasters opinion to if the following site is up to date and has proper tags and information and is not on depracated ones -

www.java2s.com

mburt
03-31-2007, 09:46 PM
offsetTop ONLY returns a value, you cannot assign it a value. You must you .style.top:

document.getElementById('image').style.top=300+"px"

pcbrainbuster
03-31-2007, 10:15 PM
Thats not true :),
I have been working on a script that may make up a game one day, here is the script -

<html>
<body onkeypress="keyr()" bgcolor="black" text="yellow">
<img src="1.gif" id="image" style="position: absolute; z-index: 100; top: 50px; left: 50px;">
<img src="Up.gif" style="position: absolute; visibility: hidden;" id="imageu">
<script>
var start = alert ("On this page there is a game... You have to get the ball through the maze and get all the dots to get the points, Your results will be below the game...")
var askup = prompt("Choose the key from your keyboard that will make the ball go up","Enter value here")
var askleft = prompt("Choose the key from your keyboard that will make the ball go left","Enter value here")
var askdown = prompt("Choose the key from your keyboard that will make the ball go down","Enter value here")
var askright = prompt("Choose the key from your keyboard that wil make the ball go right","Enter value here")
while (askup.length!==1 || askleft.length!==1 || askdown.length!==1 || askright.length!==1) {
var start = alert ("You had given an invalid value and must reset your controls...")
var askup = prompt("Choose the key from your keyboard that will make the ball go up","Enter value here")
var askleft = prompt("Choose the key from your keyboard that will make the ball go left","Enter value here")
var askdown = prompt("Choose the key from your keyboard that will make the ball go down","Enter value here")
var askright = prompt("Choose the key from your keyboard that wil make the ball go right","Enter value here")}

function keyr() {
var key = String.fromCharCode(event.keyCode)
if (key==askup) {
document.getElementById('image').style.top=document.getElementById('image').offsetTop-5}
else if (key==askleft) {
document.getElementById('image').style.left=document.getElementById('image').offsetLeft-5}
else if (key==askdown) {
document.getElementById('image').style.top=document.getElementById('image').offsetTop+5}
else if (key==askright) {
document.getElementById('image').style.left=document.getElementById('image').offsetLeft+5}
}
</script>
</body>
</html>

As you can see I have used offset, and it does not just display the value (the reason of I have done it like this is because when I tried this for an example document.getElementById('image').style.top+=5+"px" it did not work)

mburt
03-31-2007, 10:35 PM
...You just proved my point. Seriously: First learn what "assigning" values and "returning" values means.