HTML and Javascript game help!

Geralt · July 2, 2015

Hey guys, learning Javascript once again and I'm stuck. The game basically asks the user how many times they saw a specific picture flash.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<style>
#wrapper {
   width:1000px;
   height:auto;
   margin:auto;
}
#imageDiv p {
   text-align:center;
}

#imageDiv ul {
   list-style-type:none;
}

#imageDiv ul li {
   float:left;
   display:inline-block;
   height:180px;
   border:4px solid black;
   margin:10px;
}

#theImage {
   width:250px;
   height:250px;
   display:block;
   margin:auto;
}

#question {
   display:none;
}
</style>
<script>
var nameOfImages=["friendshipBear","basketBear","gentlemanBear","ladyBear","panda","snowBear"];
var counter=[0,0,0,0,0,0];
var targetIndex;
var timer1,timer2;
var lastIndex=0;
function flashImages(){

   var index=Math.floor(Math.random()*1000)%images.length;
   if (lastIndex==index) {
       if (index<images.length-1)
           index++;
       else
           index=0;
   }
   lastIndex=index;
   counter[index]++;

   // flash the picture selected

}

function startGame(){
   es
}

function stopFlash() {


}

function checkAnswer(){

}
</script>
</head>
<body>
<div id="wrapper">
<div id="clue"></div>
<div id="imageDiv">
<ul>
<li><img src="images/friendshipBear.jpg" title="friendshipBear"/><p>FriendShipBear</p></li>
<li><img src="images/basketBear.jpg" title="basketBear"/><p>basketBear</p></li>
<li><img src="images/gentlemanBear.jpg" title="gentlemanBear" /><p>gentlemanBear</p></li>
<li><img src="images/ladyBear.jpg" title="ladyBear" /><p>ladyBear</p></li>
<li><img src="images/panda.jpg" title="panda" /><p>panda</p></li>
<li><img src="images/snowBear.jpg" title="snowBear" /><p>snowBear</p></li>
</ul>
</div>
<img id="theImage" src="images/blank.png" alt=""/>
<input type="button" value="Start" onclick="startGame();"/>
<div id="question"><p>How many times did you see the <span id="targetPic"></span>?</p>
<p>Your answer: <input type="number" id="answer" value="0" size="1"/><input type="button" value="check" onclick="checkAnswer();"</p>
</div>
</div>
</body>
</html>

I understand we need to use setInterval and stuff but how and where should I put them? Help again? >.<

Ciccioo · July 2, 2015

setInterval(f, n) calls the function f every n milliseconds, and returns a handle to this interval so that you can later interrupt it.

in the startGame() function you should call setInterval() on flashImages() and store the value that is returned, so that stopFlash() will be able to stop the flashing

Geralt · July 2, 2015

setInterval(f, n) calls the function f every n milliseconds, and returns a handle to this interval so that you can later interrupt it.

in the startGame() function you should call setInterval() on flashImages() and store the value that is returned, so that stopFlash() will be able to stop the flashing

<script>

var nameOfImages=["friendshipBear","basketBear","gentlemanBear","ladyBear","panda","snowBear"];

var counter=[0,0,0,0,0,0]; // keeping the number times the pictures appear

var targetIndex; // to store the index of the randomly picked image for the question

var timer1,timer2; // timer1 for setInterval (how long to change a image), timer2 for setTimeout ( duration of flashing the images )

var lastIndex=0; // keep index of last picture, to prevent repeating picture at the next immediate subsequent timeslot

function flashImages(){

   var index=Math.floor(Math.random()*1000)%images.length;

   if (lastIndex==index) {

       if (index<images.length-1)

           index++;

       else

           index=0;

   }

   lastIndex=index;

   counter[index]++;



   // flash the picture selected



}

function startGame(){

   counterReset("timer1"); // reset the counter

   counter = 0; // reset the answer

   document.getElementById("question").style.visibility = "hidden"; // hide the question

   var flash = setInterval("flashImages(), 400"); // set timer to flash randomly picked picture every 400 ticks

   setTimeout(clearInterval(flash), 2000); // set timer to stop the flashing of pictures

}

function stopFlash() {

   counterReset("timer1, timer2"); // clear the timers

   var target = ???// randomly pick a target picture for question

   var display = document.getElementById("theImage").src="images/blank.png"; // set the display picture back to blank.png

   // update name of target picture at the span and show the question



}

function checkAnswer(){

   // check the guess value and the actual value

   // alert to indicate whether player has the right guess

}

</script>