Jump to content

Small Game


TheBnl
 Share

Recommended Posts

Hey,I'm making a little game and i'm using java script to do it.In the upper left corner i have a tekst displaying LEVEL # and what i want it to do is when you level up (by clicking on a correct image) the number increases by one.What i have now is:

document.getElementById("kop").innerHTML=LEVEL+"getal"	var getal=3

But it doesn't show anything!And what i also want to happen when you level up is that the images relocate.What i have now is:

document.getElementById("verstopt").style.left="randwidth"+"px"	var randwidth=Math.round(Math.random()*100)

But that doesn't work either.Anyone who can help me with this?here is the HTML:

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><link rel="stylesheet" href="game.css" type="text/css" media="screen" charset="utf-8" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="game.js"></script></head><body><div class="container"><!--level1-->	<div class="content" id="level">			  				<h3 id="kop"></h3>								<div id="verstopt"><a href="#level2" onClick="toggleContent('level')"><img id="hand" src="grijs.png" width="172" height="118" 				onmouseover="plaatje('hand', 'hand.gif');"onmouseout="plaatje('hand', 'grijs.png');" /></a></div>								</div>				<!--start-->	<div id="start">				<a href="#level1" onclick="toggleContent('level')"><img id="knop" src="playbuttonopen.png" width="400" height="100" style="border:solid 1px #000;" 				 onmouseover="plaatje('knop', 'playbuttondigt.png');" onmouseout="plaatje('knop', 'playbuttonopen.png');"/></a>  				</div>								</div>				</body></html>

Link to comment
Share on other sites

when you enclose a varible within quotes, it becomes text

 document.getElementById("kop").innerHTML=LEVEL+"getal"var getal=3  document.getElementById("verstopt").style.left="randwidth"+"px"

should be

var getal=3	 document.getElementById("kop").innerHTML="LEVEL"+getal;var randwidth=Math.round(Math.random()*100); document.getElementById("verstopt").style.left=randwidth+"px";

you need to target the level value<h3>Level: <span id="kop">1</span></h3>then retrieve this value, and increment current value by 1, then return new value back.

<script type="text/javascript">/*<![CDATA[*//*---->*/function levelup(){var current_value=parseInt(document.getElementById("kop").innerHTML);current_value++;var new_value=current_value;document.getElementById("kop").innerHTML=new_value;}/*--*//*]]>*/</script>

Link to comment
Share on other sites

IF! the element container with id ref 'verstopt' is using position:relative; or absolute, all that below will do is take a number from 0 to 99, and position this element along with the element/s within it, left to the random number produced??.var randwidth=Math.round(Math.random()*100);document.getElementById("verstopt").style.left=randwidth+"px";Is that really what you are looking for??Edit: random return result will be 0 to 99.

Edited by dsonesuk
Link to comment
Share on other sites

But does this code i have now only randomly place on the x axis?
Well yes, as the element will move left to right depending on value, to move y axis you would usually use 'top'As i said in previous post as long as element is using position: relative; or position: absolute it should work.
<script type="text/javascript">/*<![CDATA[*//*---->*/function levelup(){var current_value=parseInt(document.getElementById("kop").innerHTML);current_value++;var new_value=current_value;document.getElementById("kop").innerHTML=new_value;var randwidth=Math.round(Math.random()*100);//alert(randwidth)document.getElementById("verstopt").style.left=randwidth+"px";}/*--*//*]]>*/</script><style type="text/css">#verstopt {position:relative; float:left;}#start{clear:both;}</style>

Edited by dsonesuk
Link to comment
Share on other sites

Yes it works! kind of stupid cause i didn't notice the change cause of the relativ small variable so i increased it to 500 and i added a line what changes the y axis to! The last thing i miss is some sort of a reset button what will make the number (LEVEL #) go back to 1.I'm thinking of a new function i will apply to the "bad" images that is similar to what we have now but tells the current_value to go to 1.

Link to comment
Share on other sites

i uploaded the game so you can get a better view at it:http://www.bram-de-leeuw.nl/game-1but what happens now is that only one image randomly replaces itself and the other two are sticking to there position.and of course figuring out the function to reset the level back to 1.and a minor issue is the play game button shifting down instead of disappearing.Thanks in advance!

Link to comment
Share on other sites

you are not suppose to have multiple id references with the same name, that is why it works only for the first.To get this to work change id ref to a class, now to target the current element use onClick="levelup(this)", also make sure you have a space between onmouseover and onmouseout event calls, these will fail otherwise in some browsers.

				<div class="verstopt"><a href="#" onClick="levelup(this)"><img id="hand" src="grijs.png" width="172" height="118" 				onmouseover="plaatje('hand', 'hand.gif');" onmouseout="plaatje('hand', 'grijs.png');" /></a></div>											<div class="verstopt"><a href="#" onClick="levelup(this)"><img id="geld" src="grijs.png" width="172" height="118" 				onmouseover="plaatje('geld', 'geld.gif');" onmouseout="plaatje('geld', 'grijs.png');" /></a></div>				<div class="verstopt"><a href="#" onClick="levelup(this)"><img id="sexy" src="grijs.png" width="172" height="118" 				onmouseover="plaatje('sexy', 'sexy.gif');" onmouseout="plaatje('sexy', 'grijs.png');" /></a></div>

because you are returning the reference to element that was clicked, but not the parent element '<div class="verstopt">' you have to change the script to target this parent element.

<script type="text/javascript">/*<![CDATA[*//*---->*/function levelup(element){//element is the reference to currently clicked anchor elementvar current_value=parseInt(document.getElementById("kop").innerHTML);current_value++;var new_value=current_value;document.getElementById("kop").innerHTML=new_value;var randwidth=Math.round(Math.random()*500);var topwidth=Math.round(Math.random()*300);//document.getElementById("verstopt").style.left=randwidth+"px";//document.getElementById("verstopt").style.top=topwidth+"px";element.parentNode.style.left=randwidth+"px";element.parentNode.style.top=topwidth+"px";}/*--*//*]]>*/</script>

and change css to

.verstopt {position:relative; float:left;}#start{clear:both;}

Now all the anchor link/image you click, should make its parent container, and its children elements move around to random left and top value applied.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...