Showing and hiding Elements [Archive]

Click to See Complete Forum and Search --> : Showing and hiding Elements

elwell

08-15-2003, 02:45 PM

I have a script that I made and i want to make peice3 visible when the user want 3 players and I want to make peice4 visible when the user wants 4 players. 1 and 2 player peices are automatically visible because it just like monopoly (but with the topic of skateboarding) and the least amount of players is 2.

Its pretty long to read and figure out so the Attachment of pictures might give you and idea of want I want to accomplish.
I can only have one attachment though so I attached the game board instead of one of the 4 peices. The picture is probably really screwed up because the attachment thing is pprobably going to resize it.

<html><head><title>Skateopoly</title>
<script type="text/javascript">
if (confirm("2 players? press Cancel for more players.")) {
alert("2 players")
player1name = prompt("Name of Player 1", "Player 1")

if (player1name != 0) {
alert("Player 1's name is: " +player1name)
player2name = prompt("Name of Player 2", "Player 2")
if (player2name != 0) {
alert("Player 2's name is: " +player2name)
}
}
}
else {
if (confirm("3 players? press Cancel for more players.")) {
alert("3 players")
player1name = prompt("Name of Player 1", "Player 1")

if (player1name != 0) {
alert("Player 1's name is: " +player1name)
player2name = prompt("Name of Player 2", "Player 2")
if (player2name != 0) {
alert("Player 2's name is: " +player2name)
player3name = prompt("Name of Player 3", "Player 3")
if (player3name != 0) {
alert("Player 3's name is: " +player3name)
document.all.peice3.style.visibility = "visible";
}
}
}

}
else {
if (confirm("4 players? press Cancel for more players.")) {
alert("4 players")
player1name = prompt("Name of Player 1", "Player 1")

if (player1name != 0) {
alert("Player 1's name is: " +player1name)
player2name = prompt("Name of Player 2", "Player 2")
if (player2name != 0) {
alert("Player 2's name is: " +player2name)
player3name = prompt("Name of Player 3", "Player 3")
if (player3name != 0) {
alert("Player 3's name is: " +player3name)
player4name = prompt("Name of Player 4", "Player 4")
if (player4name != 0) {
alert("Player 4's name is: " +player4name)
document.all.peice3.style.visibility = "visible";
document.all.peice4.style.visibility = "visible";
}
}
}
}
}
else {
alert("You automatically choose 4 players because 4 is the maximum amount of players you can have.")
alert("4 players")
player1name = prompt("Name of Player 1", "Player 1")

if (player1name != 0) {
alert("Player 1's name is: " +player1name)
player2name = prompt("Name of Player 2", "Player 2")
if (player2name != 0) {
alert("Player 2's name is: " +player2name)
player3name = prompt("Name of Player 3", "Player 3")
if (player3name != 0) {
alert("Player 3's name is: " +player3name)
player4name = prompt("Name of Player 4", "Player 4")
if (player4name != 0) {
alert("Player 4's name is: " +player4name)
document.all.peice3.style.visibility = "visible";
document.all.peice4.style.visibility = "visible";
}
}
}
}
}
}
}

</script>
<style type="text/css">
#board {position: absolute; top:10px; left:50px; z-index: 2}
#peice1 {position: absolute; top:420px; left:710px; z-index: 50}
#peice2 {position: absolute; top:400px; left:710px; z-index: 40}
#peice3 {visibility: hidden; position: absolute; top:380px; left:710px; z-index: 30}
#peice4 {visibility: hidden; position: absolute; top:360px; left:710px; z-index: 20}
</style>
</head>
<body>
<span id="board"><img src="skateopoly.gif" /></span>
<span id="peice1"><img src="peice1.gif" /></span>
<span id="peice2"><img src="peice2.gif" /></span>
<span id="peice3"><img src="peice3.gif" /></span>
<span id="peice4"><img src="peice4.gif" /></span>
</body>
</html>

I would be really happy if someone could tell me how to do it right.:)

David Harrison

08-15-2003, 04:39 PM

The problem with your script is that you are trying to reference things that don't exist yet. I've created an alternative script that is also a bit shorter than the original. See what you think:

elwell

08-15-2003, 04:43 PM

Thank you so much! It works great!:) :p ;)

David Harrison

08-15-2003, 04:46 PM

Happy to help. :)

elwell

08-15-2003, 05:17 PM

I made a roll() function but it only works one time. I want a random number between 2 and 12. Also I want to be able to set each name that has been typed in for later use (whenever its their turn) but with your way I am confused on doing that, is possible with your way? How or How Not?

<html>

<head>

<title>Skateopoly</title>

<script type="text/javascript"></script>

<style type="text/css"></style>

</head>

<body>

<span id="board"><img src="skateopoly.gif" /></span>
<span id="piece1"><img src="peice1.gif" /></span>
<span id="piece2"><img src="peice2.gif" /></span>
<span id="piece3"><img src="peice3.gif" /></span>
<span id="piece4"><img src="peice4.gif" /></span>
<input id="rollbutton" value="Roll!" type="button" onClick="roll()" />
<script type="text/javascript"></script>

</body>

</html>

elwell

08-15-2003, 05:19 PM

sorry about the smile faces I didn't think it would change
: p (without the space) to :p

David Harrison

08-15-2003, 05:48 PM

For the roll function you could have this:

function roll(){

roll=Math.round(Math.random()*5)+Math.round(Math.random()*5)+2;

alert("You rolled a "+roll);}

This script gets two random numbers between 0 and 5 then adds them together and adds 2. This simulates the same probabilities as you would have for two fair six sided dice.

I made sure in my script that the player names were the same as the player names you assigned so to refer to them you could do this:

alert("It is "+player3name+"'s turn now");

elwell

08-15-2003, 06:04 PM

Thank you for all your help but I have another problem with movings the pieces. I all messed up. And even if it worked it I would have to type out every outcome of roll to make it so it lands in the right spot. Also I want to have the piece go upwards when its at "Just Visiting or In Jail" then rightwards and "Free Skating" then downwards and "Go to jail" then back to the left on "GO +$200" (ya know, like a normal game of Monopoly. Wow! You've helped me so much already, and this is alot more to ask. If you do have the patience and time to fix my lastest problems I would be amazed.

<html>

<head>

<title>Skateopoly</title>

<script type="text/javascript"></script>

<style type="text/css"></style>

</head>

<body>

<span id="board"><img src="skateopoly.gif" /></span>
<span id="piece1"><img src="peice1.gif" /></span>
<span id="piece2"><img src="peice2.gif" /></span>
<span id="piece3"><img src="peice3.gif" /></span>
<span id="piece4"><img src="peice4.gif" /></span>
<input id="rollbutton" value="Player 1 Roll!" type="button" onClick="roll(piece1)" />
<script type="text/javascript"></script>

</body>

</html>

elwell

08-15-2003, 06:14 PM

BTW: The roll function did exactly the same thing as mine and it had the same problem: You can only click it once. on the second and third and fourth... click its an error.

my roll() was:

roll=parseInt(Math.random() *11+1);
alert("You rolled a " +roll);

your rol() was:

roll=Math.round(Math.random()*5)+Math.round(Math.random()*5)+2;
alert("You rolled a " +roll);

David Harrison

08-16-2003, 12:53 PM

Hmm... you were right about it only working once, I'm not too sure why that is but I went away and threw this together (see attachment). It stores the value in a hidden input field and then retrieves it, hence the variable name "retrieve".

There are two ways of making sure that the piece's land in the right place, here is the first:

* Keep track of how far along one side a piece is so that when it get's to the tenth square there is a little script that gives it a new direction to move in.

* Now the better option is, have an array of positions for each piece on every square so that you can just add what the payer rolled onto their current position so that the script rather than moving the image so many pixels in a particular direction it just picks it up and puts it down again in the new position.

It may work a little bit like this:

var pos=new Array();
pos[0]="200,200"; // Where the first number is the position from the top of the board and the second is the position from the left of the board.
pos[1]="180,200";
pos[2]="160,200";

etc.

and then have the roll added on as so:

piece1pos+=retrieve;

piece1pos-=(piece1pos>=pos.length)?pos.length:0;

document.getElementById("piece1").style.top=pos[piece1pos].substring(0,(pos[piece1pos].indexOf(",")));

document.getElementById("piece1").style.left=pos[piece1pos].substring((pos[piece1pos].indexOf(",")+1),(pos[piece1pos].substring.length));

This may look at bit complicated and I may have made an error in there but I hope it gives you a general idea of how it could be done. If you're still scratching your head about this then let me know and I'll try and whip something up.

Edit: I forgot to mention that for the second option to work the images will have to be positioned absolutely, where the position top:0;left:0; is the top left of the image of the board.

elwell

08-19-2003, 06:41 PM

I understand most of it except for the

document.getElementById("piece1").style.top=pos[piece1pos].substring(0,(pos[piece1pos].indexOf(",")));

document.getElementById("piece1").style.left=pos[piece1pos].substring((pos[piece1pos].indexOf(",")+1),(pos[piece1pos].substring.length));

I dont the substring stuff and after the substring thing:
substring(0,(pos[piece1pos].indexOf(",")));

David Harrison

08-20-2003, 02:49 PM

Well in strings the first char. is numbered as 0, the second char is numbered as 1 etc.

If I have a string:

var hello="This is a string";

I can get parts of the string by using substring. For instance:

var part_of=hello.substring(0,4);

this would assign the variable part_of the value "This". The char.'s in the variable hello are numbered as follows:

T h i  s    i  s
0 1 2 3 4 5 6

when using substring the two numbers used in the example above were 0 and 4, this means that char.'s 0, 1, 2 & 3 but not 4 are extracted.

So in the last post these two lines were included:

document.getElementById("piece1").style.top=pos[piece1pos].substring(0,(pos[piece1pos].indexOf(",")));

document.getElementById("piece1").style.left=pos[piece1pos].substring((pos[piece1pos].indexOf(",")+1),(pos[piece1pos].substring.length));

The first line does this:

this bit is will place the image with id "piece1" however many pixels are specified after the equals sign from the top of the element that the image is held in:
document.getElementById("piece1").style.top=

Because all of the positions are stored in array in the following way:

"200,200"

These two numbers need to be separated, to do that I have use substring:

pos[piece1pos].substring

remember that the variable piece1pos is how many squares aound the board the piece is, (also I should mention that pos[piece1pos].indexOf(",") just finds what char. position the , is at in the string)

Now for the two numbers to put in the substring, well obviously the first one is 0 and the second one is where the comma is. To find out where the comma is I have used indexOf to search for it:

(0,(pos[piece1pos].indexOf(",")));

The second line is pretty much the same as the first:

document.getElementById("piece1").style.left= // gets it ready for a new horizontal position for the image.

pos[piece1pos].substring // is the bit that extracts the numbers for the particular position on the board that the piece is on.

( // opens the substring brackets

(pos[piece1pos].indexOf(",")+1) // The first number is the place after where the , is in the string.

, // The separater in the substring brackets.

(pos[piece1pos].substring.length) // The second number in the substring brackets is the length of the string, the equivalent of saying from the comma to the end oof the string.

); // closes the substring brackets and a ; at the end of the line.

Wow, I think that's the longest post I've ever written. I hope this explains it for you. It may help if you were to break up the different parts into variables rather than having two solid blocks of code.

elwell

08-20-2003, 03:16 PM

Thank you, I understand it now. In the past I've done instead of

.top

I've done

.pixelTop

I tried both and I couldn't seem to get it to work.
Just a thought:
Wouldn't you have to add any character to the string and do .length+1
like this:
200,300T
01234567

(pos[piece1pos].substring.length+1)

because it makes the character before the "7" the last character.
Can you help me with getting it to work though please?

Also:
This is the current code:

<html>

<head>

<title>Skateopoly</title>

<script type="text/javascript"></script>

<style type="text/css"></style>

</head>

<body onLoad="set()">
<span id="board"><img src="skateopoly.gif" /></span>
<span id="piece1"><img src="peice1.gif" /></span>
<span id="piece2"><img src="peice2.gif" /></span>
<span id="piece3"><img src="peice3.gif" /></span>
<span id="piece4"><img src="peice4.gif" /></span>
<input id="rollbutton" value="Roll!" type="button" onClick="roll()" />
<textarea name="player1boxforname" id="player1boxforname" rows="2" cols="10" READONLY WRAP></textarea>
<textarea name="player2boxforname" id="player2boxforname" rows="2" cols="10" READONLY WRAP></textarea>
<textarea name="player3boxforname" id="player3boxforname" rows="2" cols="10" READONLY WRAP></textarea>
<textarea name="player4boxforname" id="player4boxforname" rows="2" cols="10" READONLY WRAP></textarea>
<script type="text/javascript"></script>

</body>

</html>

David Harrison

08-20-2003, 03:31 PM

I've got several points so I'm going to do bullet points:

* .top and .pixelTop won't work because it has top be .style.top

* When using substring the first number is the number of the first char. you want to extract, the second number is the number of ths last char. you want to extract + 1. So in the following string:

var hello="This is a string";

the last char.'s position is 15, however the length of the string is 16. Therefore if the second in a substring was 16 (or hello.length), the last char. extracted would char. num 15, the g of string.

* I hope this line was just shorthand:

(pos[piece1pos].substring.length+1)

* Is your script complete now? It looks like you've filled in the Chance, Community Chest and all of the positions (I thought that there were 40 of those).

elwell

08-20-2003, 09:29 PM

I can't get the peices to move yet. what you gave me a couple days ago just gave errors.

David Harrison

08-21-2003, 03:09 PM

Yeah there was a bug in what I'd posted, I've uploaded a simplified fully functional Skateopoly game. Hows this then: