...

View Full Version : Creatring a function to test validity



kellokell
12-09-2006, 11:45 AM
i am creating a simon says game, the game is based on 4 images (each has an opposite) when the game begins one of the image randomly flashes, the flash is between itself and its opposite (day and night). the user is then to mimic that flash by clicking on that image. If he clicks in that image then i want the move to be correct or 'true' if he clicks on another image i want the move to be incorrect 'false'. if false he will be redirected to an alert box thats says game over, if true then 2 of the images then flash as opposed to only one, again randomly. I am unsure how to test if it is correct or incorrect and then if correct get 2 of the images to flash randomly and so on. Can anyone help? please? here is what i have so far :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simon Says Game</title>

<style type="text/css">
body {
background-image : url('background.jpg');
}

table {
background-color: black;
margin-left: auto; margin-right: auto;
border-style: solid; border-color: black; border-width: 3px;
}

img {
width:450px;
height:225px;
}

#label {
width : 450px;
height : 82px;
position: absolute; top : 489px; left : 0 px;
font-family: arial; font-weight: bold; font-size: 25px;
text-align: center;
background-color:black;
color:white;
}


</style>
<script type="text/javascript">
function init(){
alert('START!');
randNumber=Math.floor(Math.random()*4)+1;
var image=document.getElementById('img'+randNumber);
var wen=image.id.charAt(3)+'day.jpg';
f(image,wen);
}

function f(obj,newImg){

oldImg = obj.src;
obj.src=newImg;
window.setTimeout(function(){obj.src=oldImg},600);
}



</script>

</head>

<body onload="init();">
<table border="5" width="900px" height="530px">
<tr width="900px" height="225px">
<td width="450px" height="225px"><img id=img1 src="1night.jpg" onclick="f(this,'1day.jpg')" title=this.src></td>
<td width="450px" height="225px"><img id=img2 src="2night.jpg" onclick="f(this,'2day.jpg')" title=this.src></td>
</tr>

<tr width="900" height="225">
<td width="450px" height="225px"><img id=img3 src="3night.jpg" onclick="f(this,'3day.jpg')" title=this.src></td>
<td width="450px" height="225px"><img id=img4 src="4night.jpg" onclick="f(this,'4day.jpg')" title=this.src></td>
</tr>
<tr width="900" height="80">
<td>
<div id="label">Retry</div>
</td>
<td>
<div id="label">Score: 0</div>
</td>
</tr>
</table>
</body>
</html>

Mr J
12-09-2006, 05:39 PM
Have a play around with this, see if this is the way you want to go.

Note that it is not a finished example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simon Says Game</title>

<style type="text/css">
body {
background-image : url('background.jpg');
}

table {
background-color: black;
margin-left: auto; margin-right: auto;
border-style: solid; border-color: black; border-width: 3px;
}

img {
width:450px;
height:225px;
}

td{
font-family: arial; font-weight: bold; font-size: 25px;
text-align: center;
background-color:black;
color:white;
}


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

arr=[
["1day.jpg","1night.jpg"],
["2day.jpg","2night.jpg"],
["3day.jpg","3night.jpg"],
["4day.jpg","4night.jpg"]
]

patternCount=1
function startSimon(){
simonArr=[]
playerArr=[]

for(var i=0;i<patternCount;i++){
randNumber=Math.floor(Math.random()*arr.length)
simonArr[i]=randNumber
}

simonCount=0
playerCount=0

simonsGo()
}

function simonsGo(){
correct=false
document.images["img"+simonArr[simonCount]].src=arr[simonArr[simonCount]][0]
timer=setTimeout("simonsGo2()",500)
}

function simonsGo2(){
document.images["img"+simonArr[simonCount]].src=arr[simonArr[simonCount]][1]

if(simonCount==simonArr.length-1){
clearTimeout(timer)
}
else{
simonCount++
timer=setTimeout("simonsGo()",500)
}

}

function playersGo(n){
playerArr[playerCount]=n

playerCount++
}

score=0
function chk(){

if(playerArr.length==simonArr.length){

for(var i=0;i<simonArr.length;i++){

if(playerArr[i]==simonArr[i]){
correct=true
}
else{
correct=false
}

}

}

if(correct==true){
score++
patternCount++
setTimeout("startSimon()",3000)
}

document.getElementById("score").innerHTML=score
alert(correct)

}

</script>

</head>

<body>

<table border="5" width="900px" height="530px">
<tr>
<td width="450px" height="225px"><img id="img0" src="1night.jpg" onmousedown="playersGo(0);this.src='1day.jpg'" onmouseup="this.src='1night.jpg'" title=this.src></td>
<td width="450px" height="225px"><img id="img1" src="2night.jpg" onmousedown="playersGo(1);this.src='2day.jpg'" onmouseup="this.src='2night.jpg'" title=this.src></td>
</tr>

<tr>
<td width="450px" height="225px"><img id="img2" src="3night.jpg" onmousedown="playersGo(2);this.src='3day.jpg'" onmouseup="this.src='3night.jpg'" title=this.src></td>
<td width="450px" height="225px"><img id="img3" src="4night.jpg" onmousedown="playersGo(3);this.src='4day.jpg'" onmouseup="this.src='4night.jpg'" title=this.src></td>
</tr>
<tr>
<td height="80">
<div id="label" onclick="startSimon()">Start/Retry || <span onclick="event.cancelBubble=true;chk()">Check</span></div>

</td>
<td>
<div id="score">Score: 0</div>
</td>
</tr>
</table>


</body>
</html>

kellokell
12-09-2006, 07:47 PM
once again trhank you very much



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum