Page Refreshing Help...

tommychi

im currently developing a php/mysql based rpg game. Now in this game, i made a simple script to make it seem like the character is moving by using div layers and positioning along with the browser url. Something like this: if the url is http://website.com?x=acoord&y=acoord the image would be like this:
<div style="position:absolute; left:<?php echo $x ?>px; top:<?php echo $y ?>px; z-index: 1"><img src="someimage"></div>

So every time the coordinates (x,y) change from the url, the character looks like it is moving in a way. Now here's the problem. Each time i click to go up,down,left,right (there's a navigational menu btw), the page refreshes. Now although this causes the movement to work, it gets really annoying as the screen loads for each refresh (you kno when the screen needs to load the page and it flashes for a bit) and it always has to load the map image and whatnot. Im jus curious if there's a way around this? So that basically the page stays static and the image moves more smoothly? I've seen some sites in which even though you refresh, it doesn't do that load/flickering thing and it just seems like it loaded right there. What i basically want to accomplish is a smooth movement of the characters without the flickering/loading thing.

Im not sure if this makes much sense, but if anyone can help, it would be appreciated.

tommynanda

Use Javascript.. u dont have to refresh.
If you want to save score on Server use a php file that doesnt generate any output, in a hidden frame(I mean no pxl frame) that refreshes every 5 secs or so...

Javascript is similar to PHP so u can use the logic

example of Javascript for up

<head>
<script language="Javascript">
function moveup()
{
xvar = current position
yvar = current position + 1 // I dont remember JS function for current position but it exists
document.getElementById("myman").style = "position:absolute; left:"+xvar+"px; top:" + yvar + "px; z-index: 1";
}
</script>
</head>
..
in BODY
<body>
<div name="myman" id="myman" style="position:absolute; left:1px; top:1px; z-index:1"><img src="someimage"></div>

<input type=button name=up onClick="moveup()">

Good Luck
TommYNandA

tommychi

First of all, thanks for the reply. hmm im not really good at javascript. I tried inputting the code, but it doesn't seem to do anything. The thing about that is, i already have my "game" coded out in php already. It also uses the x and y variables from the url to do alot of things. For example, talking to other characters. I have it so that if x=something and y=something (which in this case would be the other character coodinates), then something happens. This was easy to do in php, but would i be able to somehow use both the javascript code you just gave me in relation with the php?

tommynanda

would i be able to somehow use both the javascript code you just gave me in relation with the php?

Thats exactly wat u need. AS I said before use php page in frame which has no images or anything... it keeps refreshing in a frame and sends data to the frame where u have image...
u should alter image by Jscript... like...
in your PHP file include javascript like
gameFrameName.imagename.style ="position:absolute; left:<?php echo $x ?>px; top:<?php echo $y ?>px; z-index: 1";

If you have already built your game with php. just rip the image part from ur PHP files, create new frame and add some Jscript. This makes your game really efficient that refreshing the page all the time...

hope this helps

TommYNandA

tommychi

hey once again thanks for the reply. However, im still a little unclear on what you mean. Sorry about this but im still new to javascript. Well on the internet i just found this bit of coding and customized it to make my character successfully move:

<script>
var DHTML = (document.getElementById || document.all || document.layers);

function getObj(name)
{
  if (document.getElementById)
  {
  	this.obj = document.getElementById(name);
	this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
	this.obj = document.all[name];
	this.style = document.all[name].style;
  }
  else if (document.layers)
  {
   	this.obj = document.layers[name];
   	this.style = document.layers[name];
  }
}

var position_top = 200;
var position_left = 180;

function move_up( amount ) {
if ( !DHTML ) return;
var y = new getObj( 'character' );
position_top -= amount;
y.style.top = position_top;
}

function move_down( amount ) {
if ( !DHTML ) return;
var y = new getObj( 'character' );
position_top += amount;
y.style.top = position_top;
}

function move_left( amount ) {
if ( !DHTML ) return;
var x = new getObj( 'character' );
position_left -= amount;
x.style.left = position_left;
}

function move_right( amount ) {
if ( !DHTML ) return;
var x = new getObj( 'character' );
position_left += amount;
x.style.left = position_left;
}
</script>

<a href="javascript: move_top(20)">TOP</a><br>
<a href="javascript: move_left(20)">LEFT</a><br>
<a href="javascript: move_down(20)">DOWN</a><br>
<a href="javascript: move_right(20)">RIGHT</a><br>

<div id="character" style="position: absolute; top: 180px; left: 200px"><img src="characterimage.gif"></div>

This moves my character the way i want it. Now the next part about having a php file in a frame is a bit confusing to me. I'm really sorry but could you explain it again to me a bit clearly. Once again i appreciate the help ALOT. Thankks

tommynanda

okay,

Create a file
gameindex.html with following code

<title> My Game Rox</title>
<frameset cols="*,0" frameborder=0 border=0>
	<frame name="imageframe" src="gamegoing.html" noresize scrolling=no>
		<frame name="phphidden" src="controlroom.php" noresize scrolling=no>
</frameset>

Now create a file
gamegoing.html with following code

<body>
<div id="character" style="position: absolute; top: 180px; left: 200px"><img src="characterimage.gif"></div>
</body>

Now create another file
controlroom.php with little modified code of wat u found on internet


<script>
var DHTML = (parent.imageframe.getElementById || parent.imageframe.all || parent.imageframe.layers);
function getObj(name)
{
  if (parent.imageframe.getElementById)
  {
  	this.obj = parent.imageframe.getElementById(name);
	this.style = parent.imageframe.getElementById(name).style;
  }
  else if (parent.imageframe.all)
  {
	this.obj = parent.imageframe.all[name];
	this.style = parent.imageframe.all[name].style;
  }
  else if (parent.imageframe.layers)
  {
   	this.obj = parent.imageframe.layers[name];
   	this.style = parent.imageframe.layers[name];
  }
}

var position_top = 200;
var position_left = 180;

function move_up( amount ) {
if ( !DHTML ) return;
var y = new getObj( 'parent.imageframe.character' );
position_top -= amount;
y.style.top = position_top;
}

function move_down( amount ) {
if ( !DHTML ) return;
var y = new getObj( 'parent.imageframe.character' );
position_top += amount;
y.style.top = position_top;
}

function move_left( amount ) {
if ( !DHTML ) return;
var x = new getObj( 'parent.imageframe.character' );
position_left -= amount;
x.style.left = position_left;
}

function move_right( amount ) {
if ( !DHTML ) return;
var x = new getObj( 'parent.imageframe.character' );
position_left += amount;
x.style.left = position_left;
}
</script>

<a href="java script: move_top(20)">TOP</a><br>
<a href="java script: move_left(20)">LEFT</a><br>
<a href="java script: move_down(20)">DOWN</a><br>
<a href="java script: move_right(20)">RIGHT</a><br>

<!-- Also Include your PHP code in this file -->

Include your PHP script in controlroom.php accordingly instead of javascript variables for position. and also keep refreshing controlroom.php not gamegoing.html

There might be a few errors... a little debugging could help

Take Care
TommYNandA

tommychi

hey thanks for the help once again. Im sorry but there is yet another problem. I followed your instructions and put the files in the respective places. Now, it seems as if the navigational area (the UP,DOWN,LEFT,RIGHT) links are hidden as the controlroom.php file is hidden due to the frame being no pixels. Where would i put the navigational area and would it still move the character on the other frame, even though its in another frame of its own? Furthermore, i think im starting to understand where your getting at, but im still a little rusty. Could you explain how the PHP code (the x and y) values, would apply to the javascript in order to work together? All i basically need is to ALWAYS have the values of the x and y (the top, left positioning) in tact. Either they are stored in a php variable or something, because it is these values that are to be used the most. I hope im making sense and once again, thank you so much.