Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Creatring a function to test validity

    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>

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Have a play around with this, see if this is the way you want to go.

    Note that it is not a finished example

    PHP Code:
    <!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-colorblack;
    margin-leftautomargin-rightauto;
    border-stylesolidborder-colorblackborder-width3px;
    }

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

    td{
    font-familyarialfont-weightboldfont-size25px;
    text-aligncenter;
    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> 
    Last edited by Mr J; 12-09-2006 at 07:54 PM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    once again trhank you very much


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •