swaping images

**hsriat** · Mar 13 '08, 05:53 AM

Use [html]<script type="text/javascript">[/html] instead of [html]<script type="text/javascript" language="JavaS cript" src="hangman.js ">[/html]or use it as a external script with name hangman.js
language attribute is also no required.
There's no need of images array.

Some where in your page, add this:[html]
<div style="display: none;">
<img src="image0.jpg "></img>
<img src="image1.jpg "></img>
<img src="image2.jpg "></img>
<img src="image3.jpg "></img>
<img src="image4.jpg "></img>
<img src="image5.jpg "></img>
<img src="image6.jpg "></img>
</div>[/html]This will cache the images and there won't be any delay in showing them when needed.

**vee10** · Mar 13 '08, 06:18 AM

Hey ,

Swap(image) will swap the images accordingly
when i executed it swaped well is that it is not swaping the images??

there is no need of placing it in array directly u can specify the image location in src

Swap function
function swap(image)
{
document.getEle mentById("image s").src =image+".jpg";
}

//turn function
if (!correctGuess)
{
NumberOfChances ++;
swap("image" + NumberOfChances );

//no need of this

var content=documen t.getElementByI d("imgID"+image ).src;

if (NumberOfChance s==6)
{

............... .}

u have to check whether the image src is correct or not
document.getEle mentById("image s").src =image+".jpg";

this works only when ur images r in the root location
if it is in someother location specify the location

if any doubts u can post

Originally posted by tesa

Thanks for the help early this morning!
The one problem I can not figure out still is how to swap the images.
I have the images in an array.
[0] is the image to start with.... then as the player chooses an incorrect letter it should swap an image. When it gets to the last image the player looses.

The game is working great it is just not showing the images and I feel with so many changes I have the code messed up and I am not seeing it.

Any help with the image swap is greatly appreciated!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>A:4 Tesa Reedy Hangman</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" language="JavaS cript" src="hangman.js ">
var NumberOfChances ;
var theWord = "", oldString="";
var currentGuessed = "";
var value="";

//Array of 50 secret words

var words = new Array();
words[0]="computer";
words[1]="electronic ";
words[2]="negative";
words[3]="positive";
words[4]="ambassador ";
words[5]="dictionary ";
words[6]="maintain";
words[7]="responsibl e";
words[8]="adventure" ;
words[9]="sunshine";
words[10]="friendship ";
words[11]="attention" ;
words[12]="surgery";
words[13]="genealogy" ;
words[14]="investment ";
words[15]="mathematic s";
words[16]="journey";
words[17]="interest";
words[18]="moment";
words[19]="military";
words[20]="developmen t";
words[21]="enjoyment" ;
words[22]="encouragement ";
words[23]="hygiene";
words[24]="enlistment ";
words[25]="hyphenatio n";
words[26]="orientatio n";
words[27]="references ";
words[28]="highlight" ;
words[29]="recipients ";
words[30]="envelopes" ;
words[31]="preview";
words[32]="translatio n";
words[33]="research";
words[34]="grammar";
words[35]="thumbnails ";
words[36]="document";
words[37]="position";
words[38]="window";
words[39]="conversation" ;
words[40]="recommendatio ns";
words[41]="experience ";
words[42]="reference" ;
words[43]="failure";
words[44]="dignity";
words[45]="faithfulness" ;
words[46]="recklessness" ;
words[47]="leftovers" ;
words[48]="remainder" ;
words[49]="difficulty ";
words[50]="boxes";

//hangman series of images
var image = new Array();

image[0] = '<img src="image0.jpg " align ="left" width="415" height="496">';
image[1] = "<img src='image1.jpg ' align ='left' width='415' height='496'>";
image[2] = '<img src="image2.jpg " align ="left" width="415" height="496">';
image[3] = '<img src="image3.jpg " align ="left" width="415" height="496">';
image[4] = '<img src="image4.jpg " align ="left" width="415" height="496">';
image[5] = '<img src="image5.jpg " align ="left" width="415" height="496">';
image[6] = '<img src="image6.jpg " align ="left" width="415" height="496">';
NumberOfChances = image.length;

//swap the images for the hangman, start with image[0], then replace the image with each wrong guess, 6 chances
function swap(image)
{
document.getEle mentById("image s").src =image+".jpg";
}

// an array to store the letters guessed if i can not figure out how to disable onclick of letters in form,
var usedLetters = new Array();

// creating the random pick of the secret word out of 50 choices
function secretWord()
{
theWord = words[Math.floor(Math .random()*51)];
for (i=0; i<theWord.lengt h; i++)
{
currentGuessed = currentGuessed + "*";
}
document.getEle mentById("secre tWord").value = currentGuessed;
debugger
}

//the process that starts the game and resets it when the player chooses to play again
function gameProcess()
{
currentGuessed ="";
secretWord();
NumberOfChances =0;
document.getEle mentById("lives ").value = NumberOfChances ;
startImage = image[0];
//resets the disabled buttons when player hits start
var form1 = document.getEle mentById("form1 ");
for(var i = 0; i < form1.elements. length; i++)
{
form1.elements[i].disabled = false;
}
document.getEle mentById("lives ").disabled = false;
}

//this is what happens when the player takes a turn
function turn(letterGues sed)
{
value = oldString = "";
var correctGuess = false;
for (i=0; i<theWord.lengt h; i++)
{
if (theWord.charAt (i) == letterGuessed)
{
value = value + letterGuessed;
currentGuessed = currentGuessed. replace(oldStri ng + "*",value);
oldString = value;
correctGuess=tr ue;
}

else
{
if(currentGuess ed.charAt(i) == "*")
{
value = value + '*';
oldString = oldString + "*";
}

else
{
value = value + currentGuessed. charAt(i);
oldString = oldString + currentGuessed. charAt(i);
}

}

}
//if you gess incorrect then swap images until the end of the array
if (!correctGuess)
{
NumberOfChances ++;
swap("image" + NumberOfChances );
var content=documen t.getElementByI d("imgID"+image ).src;

if (NumberOfChance s==6)
{
alert("You Lost!");
document.getEle mentById("secre tWord").value = theWord;
theWord = "";
currentGuessed = "";
}

document.getEle mentById("lives ").value = NumberOfChances ;

if(correctGuess != 0)
{
takeChance();
}
}
win();
}

function win()
{
var winCount = 0;
for(var i = 0;i<theWord.len gth;i++)
{
if(currentGuess ed.charAt(i) == "*")
{
winCount++;
}
document.getEle mentById("secre tWord").value = currentGuessed;

}
if(winCount == 0 && currentGuessed != "")
{
alert("yay, you win!");
}
}

function gameEnd()
{
alert("Thank you for playing");
}

var button;
function disable(button)
{
button.disabled = true;
}

</script>
</head>

<body>
<H1> Hang De Clown</H1>

<form name="userGuess Form" id="form1">
<div id="Image"><im g src="image0.jpg " align ="left" width="415" height="496" id="images"/></div>
<div id="wordDisplay "></div>
This is the Secret Word<br /><input id="secretWord " type="text" value="currentG uessed" />

<br />
<input id="Button0" type="button" name="a" value="a" onClick="turn(' a'); disable(this);" >
<input id="Button1" type="button" name="b" value="b" onClick="turn(' b'); disable(this);" >
<input id="Button2" type="button" name="c" value="c" onClick="turn(' c'); disable(this);" >
<input id="Button3" type="button" name="d" value="d" onClick="turn(' d'); disable(this);" >
<input id="Button4" type="button" name="e" value="e" onClick="turn(' e'); disable(this);" >
<input id="Button5" type="button" name="f" value="f" onClick="turn(' f'); disable(this);" >
<input id="Button6" type="button" name="g" value="g" onClick="turn(' g'); disable(this);" >
<input id="Button7" type="button" name="h" value="h" onClick="turn(' h'); disable(this);" >
<input id="Button8" type="button" name="i" value="i" onClick="turn(' i'); disable(this);" >
<input id="Button9" type="button" name="j" value="j" onClick="turn(' j'); disable(this);" >
<input id="Button10" type="button" name="k" value="k" onClick="turn(' k'); disable(this);" >
<input id="Button11" type="button" name="l" value="l" onClick="turn(' l'); disable(this);" >
<input id="Button12" type="button" name="m" value="m" onClick="turn(' m'); disable(this);" >
<input id="Button13" type="button" name="n" value="n" onClick="turn(' n'); disable(this);" >
<input id="Button14" type="button" name="o" value="o" onClick="turn(' o'); disable(this);" >
<input id="Button15" type="button" name="p" value="p" onClick="turn(' p'); disable(this);" >
<input id="Button16" type="button" name="q" value="q" onClick="turn(' q'); disable(this);" >
<input id="Button17" type="button" name="r" value="r" onClick="turn(' r'); disable(this);" >
<input id="Button18" type="button" name="s" value="s" onClick="turn(' s'); disable(this);" >
<input id="Button19" type="button" name="t" value="t" onClick="turn(' t'); disable(this);" >
<input id="Button20" type="button" name="u" value="u" onClick="turn(' u'); disable(this);" >
<input id="Button21" type="button" name="v" value="v" onClick="turn(' v'); disable(this);" >
<input id="Button22" type="button" name="w" value="w" onClick="turn(' w'); disable(this);" >
<input id="Button23" type="button" name="x" value="x" onClick="turn(' x'); disable(this);" >
<input id="Button24" type="button" name="y" value="y" onClick="turn(' y'); disable(this);" >
<input id="Button25" type="button" name="z" value="z" onClick="turn(' Z'); disable(this);" >
<br />
</form>
<form name="startForm " id="form2">
Number of Tries (6): <input id="lives" type="text" value="0" onfocus="lives. blur();" SIZE=2>
<input type="button" name="submit" value=" Start " onClick="gamePr ocess()">
<input type="button" name="end" value=" END " onClick="gameEn d()"><br />

</form>

<p> </p>
<H2>Direction s</H2>
Please guess a letter to see if you figure out the secret word.<br />
You will have 6 chances to guess the word, or guess a letter.<br />
If you guess incorrectly you will lose a chance and your clown will be one step closer to being hung!<br />
Good Luck!

</body>
</html>

**vee10** · Mar 13 '08, 06:22 AM

Hey ,

Swap(image) will swap the images accordingly
when i executed it swaped well is that it is not swaping the images??

there is no need of placing it in array directly u can specify the image location in src

Swap function
[CODE=javascript]function swap(image)
{
document.getEle mentById("image s").src =image+".jpg";
}

//turn function
if (!correctGuess)
{
NumberOfChances ++;
swap("image" + NumberOfChances );

//no need of this

var content=documen t.getElementByI d("imgID"+image ).src;

if (NumberOfChance s==6)
{
}
[/CODE]
u have to check whether the image src is correct or not
document.getEle mentById("image s").src =image+".jpg";

this works only when ur images r in the root location
if it is in someother location specify the location

if any doubts u can post

swaping images

swaping images

Comment

Comment

Comment