Member Avatar for eijei

please help..

how can i restart my game , whenever my timer ends . it'll prompt "time expired!"..
and then after , when the user clicks OK.. the game will stop .. and the user can no longer continue the game ..

PLEASE HELP US :

heres my code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JS Typing Tutorial</title>
<style type="text/css">
body {color: white; background-color:#330099; font-family:arial}

.big    {font-size: xx-large color:white}

.done   {color: #99CCFF; background-color:0; font-weight: bold; font-size:50px; font-family:Comic Sans MS}
.todo   {color: #FFFF00; background-color:0; font-weight: normal; font-size:50px; font-family:Comic Sans MS}
.future {color: #FF66FF; background-color:0; font-weight: normal;font-size:50px; font-family:Comic Sans MS}

.prompt {margin: 1ex 1ex 1ex 1ex}

.board  {color: #FFFF00; background-color:0; font-family: arial;
    font-size: large; letter-spacing: 1ex; width: 30ex;
    margin: 1ex 1ex 1ex 1ex; padding: 1ex 1ex 1ex 1ex;}
.row1   {padding: 0 0 0 0;}
.row2   {padding: 0 0 0 0.3ex;}
.row3   {padding: 0 0 0 0.9ex;}
.pressed {color: red; font-weight:bold;font-size:30px}
.silent {color:#FFFF00;}
.target {color: #00FF00;}

.echo {color: #FFFFCC; margin: 1ex 1ex 1ex 1ex}

.count {color:white; margin: 1ex 1ex 0ex 1ex}
.accuracy {color: white; margin: 0ex 1ex 0ex 1ex}
.speed {color: white; margin: 0ex 1ex 1ex 1ex}

.button {width:9ex; text-align:left; padding: 0 0 0 1ex;}





</style>

<script type="text/javascript">
//<![CDATA[

var garray = new Array();
var garrayIndex = -1;
var gtext = "";
var gindex = 0;
var goldPressed = 0; //previous pressed key code
var goldTarget = 0; //previous target key code
var gtarget = 0;
var gpressed = 0;
var ggood = 0;
var gtotal = 0;
var gtime = 0;
var gkeytime = 0;



function setup() {

    setEvents();

    //change this array to suit your needs but note that indices
    //must ascend by 1 from 0: garray[0]="foo"; garray[1]="bar";...

    garray[0] = "Love";
    garray[1] = "Welcome!";
    garray[2] = "Awesome";
    garray[3] = "Pretty";
    garray[4] = "Dominant";
    garray[5] = "Fluent";
    garray[6] = "Environment";
    garray[7] = "Beautiful";
    garray[8] = "Greetings";
    garray[9] = "Project"; 
    garray[10] = "Acceleration";
    garray[11] = "Energy";
    garray[12] = "Ballet";
    garray[13] = "Foreign";
    garray[14] = "Supercalifragilistic";
    garray[15] = "Courteous";
    garray[16] = "Anonymous";
    garray[17] = "Occurence";
    garray[18] = "Playful";
    garray[19] = "Painful";
    garray[20] = "Valley";
    garray[21] = "Zigzag";

    //more similar lines can easily be added above, dont forget to get the index right!

    garrayIndex = -1;

    next();
}



function setPatternInit() {

    //#b note: once we did this using innerHTML but this caused
    //a leakage of handles in ie

    var pat = document.getElementById("pattern");

    for(;;) {
        if (pat.hasChildNodes()) {
            pat.removeChild(pat.lastChild);
        }
        else break;
    }

    var cname = "done";
    for (j=0; j<gtext.length; j++) {
        var ch = gtext.charAt(j); 

        if (j>gindex) cname = "future";
        else if (j==gindex) cname = "todo";

        var kid = document.createElement("span");
        kid.className = cname;

        var txt = document.createTextNode(ch);
        kid.appendChild(txt); //#b innertext doesnt work on firefox
        pat.appendChild(kid);
    }
}

function setPattern() {

    var pat = document.getElementById("pattern");
    var kids = pat.childNodes;

    var cname = "done";

    for (j=0; j<gtext.length; j++) {
        if (j>gindex) cname = "future";
        else if (j==gindex) cname = "todo";

        var kid = kids[j];
        kid.className = cname;
    }
}


function mapToBoard(code) {
    if ((code>=97)&&(code<=122)) return (code-32);
    if ((code>=65)&&(code<=90)) return code;
    if ((code==44)||(code==46)||(code==47)||(code==59)) return code;
    return 0; //not on our board picture
}


function setBoard() {

    var letter;
    var elt;
    var c;
    var s;


    if (goldTarget!=0) {
        c = mapToBoard(goldTarget);
        if (c!=0) {
            letter = "code"+c;
            elt = document.getElementById(letter);
            s = "silent";
            elt.className = s;
        }
    }
    if (goldPressed!=0) {
        c = mapToBoard(goldPressed);
        if (c!=0) {
            letter = "code"+c;
            elt = document.getElementById(letter);
            s = "silent";
            elt.className = s;
        }
    }

    if (gtarget!=0) {
        c = mapToBoard(gtarget);
        if (c!=0) {
            letter = "code"+c; 
            elt = document.getElementById(letter);
            s = "target";
            elt.className = s;
        }
    }
    if (gpressed!=0) {
        c = mapToBoard(gpressed);
        if (c!=0) {
            letter = "code"+c;
            elt = document.getElementById(letter);
            s = "pressed";
            elt.className = s;
        }
    }

}

function nextPattern() {

    goldTarget = gtarget;
    goldPressed = gpressed;

    if (++garrayIndex == garray.length) garrayIndex = 0;
    gtext = garray[garrayIndex]; gindex = 0;
    gpressed = 0; 

    setPrompt();
}

function prevPattern() {

    goldTarget = gtarget;
    goldPressed = gpressed;

    if (--garrayIndex < 0) garrayIndex = garray.length - 1;
    gtext = garray[garrayIndex]; gindex = 0;
    gpressed = 0; 

    setPrompt();
}

function next() {

    nextPattern();
    setPatternInit();
    setBoard(); 
}

function prev() {
    prevPattern();
    setPatternInit();
    setBoard();
}


function skip(e) {
    next();
    return false;
}


function back(e) {
    prev();
    return false;
}



function setEcho(c, isOK) {
    var s;
    if (c<' ') c=' ';

    var s = "Status: "+c;
    if (!isOK) s += " Oops!"


    var elt = document.getElementById("echo");
    var txt = document.createTextNode(s); //#b
    if (elt.hasChildNodes()) {
        elt.replaceChild(txt, elt.lastChild);
    }
    else elt.appendChild(txt); 
}

function setPrompt() {
    var ch = gtext.charAt(gindex);
    gtarget = ch.charCodeAt(0);
}

function adjustStatistics(ch) {
    return; //could count errors by character
}


function updateSpeed(ok) {
    var t = (new Date()).getTime();
    var dt = (t-gtime);
    gtime = t;
    if (dt > 5000) return; //ignore sleepy user
    gkeytime += dt;


//****************************************Code for speed************************************//

    var s = (0.5+ggood*60*1000/gkeytime).toFixed(0) + " chars / min";
    //var s = (gtotal) + " chars/min";
    var elt = document.getElementById("speed");
    var txt = document.createTextNode(s); //#b
    if (elt.hasChildNodes()) {
        elt.replaceChild(txt, elt.lastChild);
    }
    else elt.appendChild(txt); 

//****************************************Code for mistakes************************************//

    var mis = (gtotal-ggood) + "mistakes";
    var elt2 = document.getElementById("mistake");
    var txt2 = document.createTextNode(mis);
    if (elt2.hasChildNodes()) {
        elt2.replaceChild(txt2, elt2.lastChild);
    }
    else elt2.appendChild(txt2); 



}



function updateScore(ok) {
    if (ok) ggood++;
    gtotal++;

    updateSpeed(ok);

    var s1 = ggood.toFixed(0) + " chars";
    var elt = document.getElementById("count");

//****************************************Code for total counts of correct pressed letter************************************//

    var txt = document.createTextNode(s1); //#b
    if (elt.hasChildNodes()) {
        elt.replaceChild(txt, elt.lastChild);
    }
    else elt.appendChild(txt); 


//****************************************Code for ACCURACY************************************//

    s = (ggood*100/gtotal).toFixed(1) + "%";
    elt = document.getElementById("accuracy");

    txt = document.createTextNode(s); //#b
    if (elt.hasChildNodes()) {
        elt.replaceChild(txt, elt.lastChild);
    }
    else elt.appendChild(txt); 


}



function reset(e) {
    ggood = 0; gtotal = 0;
    gtime = 0; gkeytime = 0;


    var elt = document.getElementById("count");
    var txt = document.createTextNode(""); //#b
    if (elt.hasChildNodes()) {
        elt.replaceChild(txt, elt.lastChild);
    }
    else elt.appendChild(txt); 

    elt = document.getElementById("accuracy");
    txt = document.createTextNode(""); //#b
    if (elt.hasChildNodes()) {
        elt.replaceChild(txt, elt.lastChild);
    }
    else elt.appendChild(txt); 

    elt = document.getElementById("speed");
    txt = document.createTextNode(""); //#b
    if (elt.hasChildNodes()) {
        elt.replaceChild(txt, elt.lastChild);
    }
    else elt.appendChild(txt); 


    return true;
}



function debug() { //#b to use, set body onLoad="debug()" instead of "setup()" in html
    //document.onkeydown=debugKey; //#b 
    document.onkeypress=debugKey;
}

function debugKey(evt) { //#b

    var e = (window.event) ? window.event : evt; //#b
    var k = (e.which)? e.which : e.keyCode;
    var f = filterKeyCode(k);

    var s = "k="+k+",f="+f;
    alert(s);

    return false;
}

function setEvents() { //#b
    document.onkeydown=down; //#b 
    document.onkeypress=press;
    (document.getElementById('skip')).onmousedown=skip;
    (document.getElementById('back')).onmousedown=back;
    (document.getElementById('reset')).onmousedown=reset;
}


function cleanup() {
    //pointless, really
    document.onkeydown=null; //#b 
    document.onkeypress=null;
    (document.getElementById('skip')).onmousedown=null;
    (document.getElementById('back')).onmousedown=null;
    (document.getElementById('reset')).onmousedown=null;  
}


function filterKeyCode(code) { //from key down (0 to ignore)

    //note: user must have num lock set if they want to use keypad numbers

    if ((code>=65)&&(code<=90)) return code; //alpha
    if ((code>=48)&&(code<=57)) return code; //numberic
    if (code==32) return code; //blank
    if ((code>=96)&&(code<=105)) return code; //number pad digits
    if ((code==13)||(code==16)) return code; //enter, shift
    if ((code>=106)&&(code<=111)) return  code; //number pad operators 
    if ((code>=186)&&(code<=192)) return code; //punctuation
    if ((code>=219)&&(code<=222)) return code; //punctuation

    return 0;
}


function filterCode(code) { //from key press as ascii char code (0 to ignore)
    if ((code==13)||(code==16)) return code; //enter and shift are allowed
    if (code<32) return 0;
    if (code>=127) return 0;
    return code;
}



function capsLockFilter(e, pressed) { //#b many problems making this cross browser!

    //#b e.modifiers known only on early mozilla (which does not know standard e.shiftkey)?

    var shifted = e.shiftKey || (e.modifiers && (e.modifiers & Event.SHIFT_MASK)); //#b

    var locked = (((pressed > 64) && (pressed < 91) && (!shifted))
         || ((pressed > 96) && (pressed < 123) && (shifted)));
    if (locked) alert("Your caps lock is on!");
}


function down(evt) { //#b

    var e = (window.event) ? window.event : evt; //#b
    var rawcode = (e.which)? e.which : e.keyCode;
    pressed = filterKeyCode(rawcode); 

    if (pressed > 0) return true;

    if (typeof(e.cancelBubble)!="undefined") e.cancelBubble = true;
    if (typeof(e.stopPropagation)!="undefined") e.stopPropagation();
    return false; //#b nuisance keys - backspace etc on ie (no effect for capslock!!)

}


function press(evt) { //#b


    //#b should work in ie, firefox, safari(hopefully), opera(hopefully)


    var e = (window.event) ? window.event : evt; //#b

    var pressed = 0;
    var wc = -1;
    var kc = -1;
    var cc = -1;


    if (typeof(e.keyCode)!="undefined") kc = e.keyCode; //ie
    if (typeof(e.charCode)!="undefined") cc = e.charCode; //firefox
    if (typeof(e.which)!="undefined") wc = e.which; //old mozilla

    if ((kc>=0)&&(cc>=0)) { //firefox
        pressed = cc; 
    }
    else if (kc>=0) pressed = kc; //ie
    else if (wc>=0) pressed = wc; //old mozilla

    //alert("pressed="+pressed+",kc="+kc+",cc="+cc+",wc="+wc);


    pressed = filterCode(pressed);
    if (pressed==0) {
        if (kc==13) return skip(); //#b firefox
        else return false; 
    }
    if (pressed==13) return skip(); //#b ie

    capsLockFilter(e, pressed); //hmm

    var c = String.fromCharCode(pressed); //ie from ascii code
    var ch = gtext.charAt(gindex);
    var ok = (c==ch);

    goldPressed = gpressed;
    gpressed = pressed;
    goldTarget = gtarget;

    if (ok) {
        gindex++;

        if (gindex==gtext.length) {
            nextPattern();
            setPatternInit();
        }
        else setPattern();

        gpressed = 0;
        setPrompt();
        setEcho(c, true);
        updateScore(true);
    }
    else {
        setEcho(c, false);
        updateScore(false);
        setPattern()
    }

    setBoard();
    return false;
} 


//]]>
</script>
</head>

<body onload="setup()" onunload="cleanup()" onload="countDown();" >

<script type="text/javascript">
var timer = null;
var seconds = 10;
function countDown ()
{
document.myform.second.value = seconds;
seconds = seconds - 1;
if (seconds < 0)
{
alert ("Time expired");

clearInterval (timer);

//alert("Count: " + ggood );
//reset();
//alert ("Count: " + ggood + "\n" + "Accuracy: " + s1 + "\n" + "Speed: " + s + "\n" + "Mistakes: " + mis);


}
}
function doTime() {
seconds = 10;
timer = setInterval("countDown()", 1000);
}

doTime();


</script>

<center><BR>
<font size=+1>Typing Tutorial</font>

<form name="myform">
Time: <input type="text" name="second" size="1" value="">
 <br>


<div id="pattern" class="big">Type: 
</div>

<div id="prompt" class="prompt">
</div>

<div id="board" class="board">

<div id="row1" class="row1">
<span id="code81"><font size=5px>Q<img src="cat.gif"></span>
<span id="code87">W</span>
<span id="code69">E</span>
<span id="code82" style="font-style:font-weight:bold">R</span><span id="code84">T</span>
&nbsp;&nbsp;
<span id="code89">Y</span>
<span id="code85" style="font-style:font-weight:bold">U</span>

<span id="code73">I</span>
<span id="code79">O</span>
<span id="code80">P</span>

</font></div>

<div id="row2" class="row2">
<span id="code65"><font size=5px>A</span>
<span id="code83">S</span>
<span id="code68">D</span>

<span id="code70" style="font-style:font-weight:bold">F</span>

<span id="code71">G</span>
&nbsp;&nbsp;
<span id="code72">H</span>
<span id="code74" style="font-style:font-weight:bold">J</span>
<span id="code75">K</span>
<span id="code76">L<img src="cat.gif"></span>
<span id="code59">;</font></span>

</div>

<div id="row3" class="row3">

<span id="code90"><font size=5px>Z</span>
<span id="code88">X</span>
<span id="code67">C</span>
<span id="code86" style="font-style:font-weight:bold">V</span>
<span id="code66">B</span>
&nbsp;&nbsp;
<span id="code78">N</span>

<span id="code77" style="font-style:font-weight:bold">M</span>
<span id="code44">,</span>

<span id="code46">.</span>
<span id="code47">/</font></span>
</div>

</div>

<div id="echo" class="echo">

Status:
</div>


<div>
<button id="skip" class="button" name="skip">Next</button>

</div>
<div>
<button id="back" class="button" name="back">back</button> 
</div> 

<div id="score" class="score">

<div class="count">Count:
<span id="count"></span>
</div>

<div class="accuracy">Accuracy:
<span id="accuracy"></span>
</div>

<div class="speed">Speed: 
<span id="speed"></span>

</div>


<div class="mistake">Mistakes:
<span id="mistake">

</script></span>
</div>




</div>

<div>
<button id="reset" class="button" name="reset">Reset</button> 

</div> 




</body>
</html>
Edited by Reverend Jim because: Fixed formatting
  • 2 Contributors
  • 1 Reply
  • 231 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

Eijei,

The problem doesn't manifest itself if you hit "Enter" to clear the alert as opposed to clicking OK. Therefore, I think you just need to give focus back to the window after the alert.

...
alert ("Time expired");
window.focus();
...

You may need to do this after other alerts too.

Another approach might be to present your messages within the document rather than using alerts.

By the way, you should really make sure the window has focus after the document has loaded (in a window.onload handler). Otherwise the typing effect may not be manifest.

Without looking too deeply, I'm pretty sure the code can be simplified/tidied somewhat in several areas.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.