 |  |  |  |  |  |  |  |
Moving a counter with a playing board
 |
Hi all,
My first post on this forum. I am trying to move a counter on a board and I am trying to use Web browers as the user interface. I have written the following test code, where x and y are generated by the server and passed to function draw_circles(x,y).
The code is not complete, but it does not load properly. The browser hangs before it displays anything. If it is only runs one time everything seems to work okay.
I believe the problem is that you can’t call the CSS more than once on a form. In this code, I am calling it once a second.
Does anyone have any better ideas for allowing me to move a counter around a board image. As I am not sure whether I have chosen the right language, is the reason I have placed it in this forum.
Regards
Lawrence
My first post on this forum. I am trying to move a counter on a board and I am trying to use Web browers as the user interface. I have written the following test code, where x and y are generated by the server and passed to function draw_circles(x,y).
The code is not complete, but it does not load properly. The browser hangs before it displays anything. If it is only runs one time everything seems to work okay.
I believe the problem is that you can’t call the CSS more than once on a form. In this code, I am calling it once a second.
Does anyone have any better ideas for allowing me to move a counter around a board image. As I am not sure whether I have chosen the right language, is the reason I have placed it in this forum.
Regards
Lawrence
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test</title>
<style type="text/css">
body {}
#map {position:relative; width:200px; height:200px; margin:0}
</style>
<script type="text/javascript">
function draw_circles(x,y)
{
document.write('<style type=text/css>');
document.write('#map#Red_Counter{position:absolute;top:'+x+'px; left:'+y+'px;}');
document.write('</style>')
}
</script>
<script type="text/javascript">
function loadGame()
{
var xmlHttp;
var timerId = setTimeout("loadGame();", 1000);
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest(param);
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
}
draw_circles(xmlHttp.responseText.slice(0,1),xmlHttp.responseText.slice(1,2))
}
}
xmlHttp.open("GET",'Waiting_Server.asp,true)
xmlHttp.send(null);
}
</script>
<body onload="function loadGame()">
</body>
</html> Last edited by lawrenceh; Apr 23rd, 2008 at 4:23 pm.
•
•
Join Date: Jul 2006
Posts: 1,091
Reputation: 
Solved Threads: 63
That's a horrible way to influence the page dynamically. Don't 'print' HTML into an already-opened page in that way, i.e. never use document.write( ) unless its only to influence the first page render ( and even then, there are better alternatives ).
Instead, maintain the x and y position of the token within the script ( e.g. use 2 global JS variables ), and use a single element ( any visual element [div,img,span,etc] ) to represent the token. Assign it a constant ( fixed ) style that sets
If you're only moving things around occasionally ( i.e. a board game ) then Javascript/CSS/HTML will work fine, but if you want performant interactive movement; alternatives include Flash, among others..
Instead, maintain the x and y position of the token within the script ( e.g. use 2 global JS variables ), and use a single element ( any visual element [div,img,span,etc] ) to represent the token. Assign it a constant ( fixed ) style that sets
position:absolute; . Then use calls like: thetoken.style.top = ...; where 'thetoken' is the element you used for the token ( use DHTML/document.getElementID( ) to obtain a reference to it ).If you're only moving things around occasionally ( i.e. a board game ) then Javascript/CSS/HTML will work fine, but if you want performant interactive movement; alternatives include Flash, among others..
Plato forgot the nullahedron..
|
Other Threads in the Game Development Forum
- Previous Thread: How to display 10 numbers to be chose in GUI?
- Next Thread: Maya 4 Download?
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest Game Development Posts
- Today's Posts
- Unanswered Threads
3d advertising ai algorithm ban c++ cambridge camera censorship china competition console development engine fov fpx game gamer games gaming gauntanamo government idaho in-gameadvertisement intellectualproperty l-systems laracroft lindenmayer live manhunt math mathematics matrix mercenaries microsoft mmorpg modded msn naked news nintendo obama opengl palin physics pirate playstation politics projection ps3 rpg search selection software sony stephenhawking stocks studio technology terrorism tombraider uk videogame web wii world-of-warcraft xbox xbox-live xbox360
