Phiên bản đầy đủ: jsB@nk » Trò chơi » Toán học đơn giản
URL: https://www.javascriptbank.com/simple-math-game.html
Hiệu ứng tạo ra trò chơi JavaScript đơn giản bằng cách giải quyết một số phép toán từ đơn giản đến nâng cao trong thời gian giới hạn.
Phiên bản đầy đủ: jsB@nk » Trò chơi » Toán học đơn giản
URL: https://www.javascriptbank.com/simple-math-game.html
<SCRIPT language=JavaScript><!-- // Copyright (c) 2003 Matthew & Grant Davidson All Rights Reserved.font='Ravie';answerSize=30; ymouse= 0;xmouse= 0;MaxNum= 15; var OperatorMax;OperatorMax = new Array;OperatorMax[0] = 3;OperatorMax[1] = 8;OperatorMax[2] = 12;numberBackgroundColor = 'silver';var Questions, Answers,Score,Missed;varRemainingQuestions, QuestionAnswered;var startTime;Ny = new Array();NDy = new Array();for (i=0; i <MaxNum; i++) document.write('<div id= "NumberID"style="position:absolute;top:0px;left:0;height:'+ answerSize +';width:'+ answerSize +';text-align:center;background-color=' + numberBackgroundColor + '"> </B></font></div>'); document.write('<div id= "MouseQuestionID"style="position:absolute;top:0px;left:0;text-align:center;background-color=cornflowerblue"> </B></font></div>'); // document.write('<div id="PointerID" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+'^'+'</B></font></div>');document.onmousemove=Mouse;window.onload=Startup;document.onmouseclick=MouseClick;//var name = prompt('Enter your name :');var incorrectElement;var incorrectCountdown = 0;ResultsTable.style.top = document.body.clientHeight-100;var restartStr = "Click Restart";restartShowing = false;RestartDiameter=40;speed= 0.5;// 0 < speed < 1 R= restartStr.split(''); Angle= 220/R.length;// Angle increment between lettersstep= 0.2;// Angle increment per delay periodcurrStep= 0;// Initial Angle// Current center of rotation for each letterDy = new Array();Dx = new Array();DY = new Array();DX = new Array();for (i=0; i < R.length; i++){Dy[i] = 0;Dx[i] = 0;DY[i] = 0;DX[i] = 0;}restartSize = 10;for (i=0; i < R.length; i++)document.write('<div id="RestartMsg" style="position:absolute;top:0px;left:0;height:' + restartSize + ';width:' + restartSize + ';text-align:center; font-family: sans-serif;">'+R[i]+'</div>');function ShowHelp(){var prev = LoadPreviousResults( );var msg = 'Click on the number on that is the answer to the\n' + 'displayed maths question.\n' + '\n';if ( prev != null ) msg += "Previous results : \n" + prev + "\n\n"; var sessions = SessionsCompleted( );if ( sessions > 0 )msg += "Sessions Completed : " + sessions + "\n\n"; msg += 'Copyright (c) 2003 Matthew & Grant Davidson.\n' + 'All Rights Reserved.' var wasShowing = restartShowing;ShowRestartMsg( false );alert( msg );ShowRestartMsg( wasShowing );}function Mouse( evnt ){ ymouse = event.y; xmouse = event.x; MouseQuestionID.style.top = ymouse + 5; MouseQuestionID.style.left = xmouse + 10;}function ShowRestartMsg( showIt ){restartShowing = showIt;var visibility;if ( showIt )visibility = 'visible';elsevisibility = 'hidden';for (i=0; i < R.length; i++)RestartMsg[ i ].style.visibility = visibility;}function MouseClick( evnt ){element = event.srcElement;if ( element.id == "NumberID" ){if ( element.innerText == Answers[CurrentQuestionIndex] ){QuestionAnswered[ CurrentQuestionIndex ] = true;element.style.visibility = 'hidden';Score += 1;ScoreID.innerText = Score;NextQuestion( );} else{Missed += 1;MissID.innerText = Missed;HighlightIncorrectAnswer( element );}}}function NextQuestion( ){if ( RemainingQuestions == 0 ){MouseQuestionID.innerText = '';ShowCompletionMsg();ShowRestartMsg( true );}else{var index = RandomInteger(1,RemainingQuestions);var i = 0;while ( index > 0 ){if ( !QuestionAnswered[i] ) index = index - 1;i = i + 1;}CurrentQuestionIndex = i - 1;Question.innerText = Questions[CurrentQuestionIndex];MouseQuestionID.innerText = Questions[CurrentQuestionIndex];RemainingQuestions = RemainingQuestions - 1;}}function MoveAnswers(){ var maxY = document.body.clientHeight - ResultsTable.offsetHeight; var dx = document.body.clientWidth / ( MaxNum + 2 ); ResultsTable.style.top = maxY; if ( restartShowing )return; // PointerID.style.top = maxY - 2 * NumberID[0].style.pixelHeight;// PointerID.style.left = xmouse; maxY = maxY - ResultsTable.offsetHeight; for (i=0; i<MaxNum;i++) { Ny[ i ] = Ny[ i ] + NDy[ i ]; if ( Ny[ i ] > maxY ) Ny[ i ] = 0; NumberID[i].style.top = Ny[ i ];NumberID[i].style.left = (i+1)*dx; } }function MaybeResetNumberBackground( force ){ if ( incorrectElement != undefined ) {if ( !force & incorrectCountdown > 0 )incorrectCountdown = incorrectCountdown - 1;else{incorrectElement.style.backgroundColor = numberBackgroundColor;incorrectElement = undefined;} }} function HighlightIncorrectAnswer( element ){MaybeResetNumberBackground( true );element.style.backgroundColor = 'red';incorrectElement = element;incorrectCountdown = 10;}function MoveRestartMsg(){if ( restartShowing ){Dy[0] = Math.round( DY[0] += ((ymouse)-DY[0])*speed );Dx[0] = Math.round( DX[0] += ((xmouse)-DX[0])*speed );for (i=1; i < R.length; i++){Dy[i] = Math.round( DY[i] += (Dy[i-1]-DY[i])*speed );Dx[i] = Math.round( DX[i] += (Dx[i-1]-DX[i])*speed );}for (i=0; i < R.length; i++){RestartMsg[ i ].style.top = Dy[i] + RestartDiameter*1.5*Math.sin(currStep+i*Angle*Math.PI/180);RestartMsg[ i ].style.left = Dx[i] + RestartDiameter*1.5*Math.cos(currStep+i*Angle*Math.PI/180);}currStep-=step;}}function Delay(){ MaybeResetNumberBackground( false ); MoveRestartMsg(); MoveAnswers(); if ( RemainingQuestions > 0 ) {var now = new Date();TimeID.innerText = SecondsAsString( Math.floor( (now.valueOf() - startTime.valueOf())/1000 ) ); } setTimeout('Delay()',100);}function SecondsAsString( seconds ){var minutes = Math.floor( seconds/60 );var secRem = seconds - (minutes*60);var str = minutes + ':';if ( secRem < 10 ) return str + '0' + secRem;return str + secRem;}function CreateQuestionsAndAnswers( Questions, Answers, MaxQuestions ){var i;for (i=0;i<MaxQuestions;i++){operand = OperationID.value;if ( operand == 0 )operand = RandomInteger(1,3);var numberMax = OperatorMax[LevelID.value];// Increase range for addition & subtraction// unless we are on the easy levelif ( operand != 3 & LevelID.value != 0 )numberMax = numberMax * 2;x = RandomInteger(1,numberMax);if ( operand == 2 )y = RandomInteger(1,x);elsey = RandomInteger(1,numberMax);if ( operand == 1 ){z = x + y;operandStr = '+';}else{if ( operand == 2 ){z = x - y;operandStr = '-';}else{z = x * y;operandStr = '*';}}Questions[ i ] = x + operandStr + y + '=';Answers[ i ] = z;}}function RandomInteger( MinValue, MaxValue ){var i;range = MaxValue - MinValue + 1;i = Math.random( ) * range;i = Math.round( i - 0.5 )i = MinValue + i;return i;}function RestartGame( ){Questions = new Array();Answers = new Array();Score = 0;Missed = 0;RemainingQuestions = MaxNum;MaybeResetNumberBackground( true );CreateQuestionsAndAnswers( Questions,Answers, MaxNum );QuestionAnswered = new Array( );for (i=0;i<MaxNum;i++){ QuestionAnswered[ i ] = false;Ny[ i ] = 0;NDy[ i ] = (Math.random( )*0.5+0.5) * (LevelID.value/2 + 1);NumberID[ i ].innerText = Answers[i];NumberID[ i ].style.visibility = 'visible';}ScoreID.innerText = Score;MissID.innerText = Missed;startTime = new Date();NextQuestion( );ShowRestartMsg( false );}function Startup( ){ShowRestartMsg( true );Delay();}function GetLevelDescription( ){switch ( parseInt( LevelID.value ) ){case 0:return "Easy";case 1:return "Medium";case 2:return "Hard";}return "Unknown";}function GetOperationDescription( ){switch ( parseInt( OperationID.value ) ){case 0:return "All";case 1:return "Addition";case 2:return "Subtraction";case 3:return "Multiplication";}return "Unknown";}function ShowCompletionMsg(){var msg = "Congratulations";if ( name != undefined ) msg += " " + name;msg += "!\nAll questions answered in " + TimeID.innerText;if ( Missed == 0 ) msg += " with no incorrect selections!";else{ msg = msg + " with only " + Missed + " incorrect selection"; if ( Missed == 1 ) msg += "!"; else msg += "s!";}UpdateSessionsCompleted( );var prev = LoadPreviousResults( );if ( prev != null )msg += "\n\nPrevious Results : \n" + prev;var sessions = SessionsCompleted( );if ( sessions > 0 )msg += "\n\nSessions Completed : " + sessions;SaveResult( );alert(msg);}function SessionsCompleted( ){var completed = GetCookie("SessionsCompleted");if ( completed == null )return 0;completed = parseInt( completed );// See if completed == Nan (NB : Nan != Nan == true )if ( completed != completed )return 0;return completed;}function GetExpiry( ) {return new Date(2040,1,1); }function UpdateSessionsCompleted( ){var completed = SessionsCompleted( ) + 1;SetCookie( "SessionsCompleted", completed.toString( ), GetExpiry( ) );}function LoadPreviousResults( ){ return GetCookie("PrevResults"); }function SaveResult( ){var prev = LoadPreviousResults( );curResult = GetLevelDescription( ) + "-" + GetOperationDescription( ) + " " + TimeID.innerText + " ";if ( Missed == 0 ) curResult += "None incorrect\n";else curResult += Missed + " incorrect\n";if ( prev != null ) prev = curResult + prev;else prev = curResult; // Strip off last result if result string is too long if ( prev.length > 300 ){ var last = prev.lastIndexOf("\n"); if ( last > -1 )prev = prev.substring( 0, last ); }SetCookie( "PrevResults", prev, GetExpiry( ) );}function getCookieVal (offset){ var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr));}function GetCookie (name){ var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null;}function SetCookie (name, value){ var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");}function setLastlastVisitCookie (){ var rightNow = new Date(); var expdate = new Date(); expdate.setTime (expdate.getTime() + 1 * (24 * 60 * 60 * 1000)); //+1 day SetCookie ("lastVisit", rightNow.getTime(), expdate, "/");}function ResetCookie(){ SetCookie("lastVisit", 0, null, "/");}// --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onclick=MouseClick()><DIV class=Section1 id=TableDiv><P class=MsoNormal style="BACKGROUND-IMAGE:"><TABLE id=ResultsTable style="LEFT: 5px; WIDTH: 100%; FONT-FAMILY: sans-serif; POSITION: absolute; TOP: 486px" height="5%" cellSpacing=1 cellPadding=1 width="100%" bgColor=cornflowerblue> <TBODY> <TR> <TD><INPUT id=HelpID onclick=ShowHelp() type=button size=16 value=? name=HelpBtn></TD> <TD><SELECT id=OperationID> <OPTION value=1 selected>Addition</OPTION><OPTION value=2>Subtraction</OPTION><OPTION value=3>Multiplication</OPTION><OPTION value=0>All</OPTION></SELECT> <SELECT id=LevelID name=select1> <OPTION value=0 selected>Easy</OPTION><OPTION value=1>Medium</OPTION><OPTION value=2>Hard</OPTION></SELECT> <INPUT id=ResetID style="WIDTH: 67px; HEIGHT: 25px" onclick=RestartGame() type=button size=16 value=Restart name=ResetBtn></TD> <TD align=right>Question</TD> <TD id=Question align=left></TD> <TD align=right>Missed</TD> <TD id=MissID align=left>0</TD> <TD align=right>Score</TD> <TD id=ScoreID align=left>0</TD> <TD align=right>Time</TD> <TD id=TimeID align=left>00:00</TD></TR></TBODY></TABLE><SPAN></SPAN></P></DIV></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->