Начало
Игры
Проблема времени
Начните таймер игры и попытку щелкнуть кнопкой точно через 10 секунд.
JavaScript Games: Проблема времени
<!-- FIVE STEPS TO INSTALL TIME CHALLENGE: 1. Put the first code in the time challenge opener page 2. Create a new document, save it as time-challenge.html 3. Copy the coding into the HEAD of time-challenge.html 4. Put the last coding into the BODY of time-challenge.html 5. Save the necessary button images to your web server --> <!-- STEP ONE: Put this code in your game opener page --> <center> <form name="playgame"> <input type=button value="Play Time Challenge" onClick="window.open('time-challenge','challenge','top=100,left=100,width=575,height=400');"> </form> </center> <!-- STEP TWO: Create a new document, save it as time-challenge.html --> <!-- STEP THREE: Copy the coding into the HEAD of time-challenge.html --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <! > <! > <!-- Begin Bdown = new Image(); Bdown.src = "down.gif"; bX = 200; bY = 250; function moveButton() { x = Math.random() * 50; y = Math.random() * 50; r1 = Math.random() * 10000; r2 = Math.random() * 10000; if (r1 > 5000) r1 = 1; else r1 = -1; if (r2 > 5000) r2 = 1; else r2 = -1; if (x < 25) x = 25; if (y < 25) y = 25; x = x * r1; y = y * r2; if (clock == "on") { bX += x; bY += y; if (document.all) { button.style.pixelTop = bY; button.style.pixelLeft = bX; } if (document.layers){ document.button.left = bX; document.button.top = bY; } } } function message() { if (s <= 0) alert('Start the clock first, and then click this button at exactly 10 seconds.'); if (s > 0 && s < 7) alert("Your timing is way off, click when the timer says 10 seconds."); if (s > 6 && s < 9) alert("Don't panic, wait for the timer to get to 10 seconds."); if (s == 9) alert("Keep practicing, you are very close."); if (s == 10) { clearTimeout(timeID); alert("WOW, I didn't think it could be done!!! Congrats!"); } if (s == 11) alert("Keep practicing, you are very close"); if (s > 11 && s < 13) alert("Something else must have caught your attention"); if (s > 13) alert("Did you read the instructions? You have gone past 10 seconds, reset the timer."); } var clock = "off"; var timeID; var count = 0; var h = 0; var m = 0; var mm = 0; var s = 0; var ss = 0; kickStart = "off"; function setMove(xx) { kickStart = xx; } function timer() { clearTimeout(timeID); count += 1; s += 1; if (s > 8 && s < 11) { clock = "on"; if (kickStart == "on") moveButton(); kickStart = "off"; } else clock = "off"; ss = s; if (s > 59) { s -= 60; m += 1; ss -= 60; } mm = m; if (m > 59) { m -= 60; h += 1; mm -= 60; } if (ss < 10) ss = "0" + ss; if (mm < 10) mm = "0" + mm; msg = "<font size=+3>" + h + ":" + mm + ":" + ss + "</font>"; if (navigator.appName == "Netscape") { document.t.document.write(msg); document.t.document.close(); } else t.innerHTML = msg; timeID = setTimeout("timer()", 1000); } function stopTimer(c) { clock = "off" if (c == 'stop') clearTimeout(timeID); if (c == 'clear') { clearTimeout(timeID); ss = 0; mm = 0; m = 0; s = -1; count = 0; timer(); stopTimer('stop'); } } // End --> </script> </HEAD> <!-- STEP FOUR: Paste the last coding into the BODY of time-challenge.html --> <BODY> <div id=object1 style="position:absolute; visibility:show; left:60px; top:5px; z-index:2"> <table cellpadding=2 border=1 width=175><tr> <td><center><b><font size="+2">Timer</font></b></center></td> </tr> <tr> <td align=center> <table><tr> <td><a href="javascript:timer();setMove('off')">Start</a> |</td> <td><a href="javascript:stopTimer('stop')">Stop</a> |</td> <td><a href="javascript:stopTimer('clear')">Reset</a> </td> </tr></table> </td> </tr></table> </div> <div id=t style="position:absolute; visibility:show; left:100px; top:84px; z-index:2"><font size=+3>0:00:00</font></div> <div id=object1 style="position:absolute; visibility:show; left:260px; top:5px; z-index:2"> <font size="+2"><b>The Time Challenge:<br></b></font><br> <ul> <li>Start the Timer (click start)<br> <li>At exactly 10 seconds, click the button<br> <li>Stop the timer at 10 seconds, you win!<br> </ul> </div> <div id="button" style="position:absolute;left:115;top:120;z-index:5;"> <a href="javascript:message()" onMouseDown = "document.images['imBut'].src='down.gif'" onMouseUp = "document.images['imBut'].src='up.gif'" onMouseOut="setMove('off')" onMouseOver="moveButton(),setMove('on')"> <img name="imBut" src="up.gif" width=62 height=28 border=0></a> </div> <!-- STEP FIVE: Be sure to save the game images to your web server --> <!-- Download them from: ../img/time-challenge/time-challenge.zip --> <!-- Script Size: 4.33 KB -->