Phiên bản đầy đủ: jsB@nk » Trò chơi » Giải đố » Giải ô chữ
URL: https://www.javascriptbank.com/xwordz.html
Hiệu ứng tạo ra trò chơi giải ô chữ trên trang web với chủ đề điện ảnh.
Phiên bản đầy đủ: jsB@nk » Trò chơi » Giải đố » Giải ô chữ
URL: https://www.javascriptbank.com/xwordz.html
<STYLE type=text/css>TABLE {FONT-SIZE: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif}.txtV1 {FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}.txtA1 {FONT-SIZE: 8px}.txtV2 {FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript><!--var d=window.document,vCurrentDir=0,vWordLen=0,vCurrentCell=0,vOldDir=0,vOldClueNum=0,vEditPos=0,vGameOver=0,vCorrect=0,vLetters=0,vDate=new Date(),vDateStart=vDate.getTime(),vDateEnd=vDate; vGridData=new Array(); vGridData[0]=new Array("","D1","","T2","","G3","A","R4","Y"); vGridData[1]=new Array("N5","E","M","O","","L","","O",""); vGridData[2]=new Array("","M","","M","","A6","L","A","N"); vGridData[3]=new Array("S7","I","N","B","A","D","","D",""); vGridData[4]=new Array("","","","S","","I","","",""); vGridData[5]=new Array("","F8","","T9","R","A","I","N10","S"); vGridData[6]=new Array("T11","O","T","O","","T","","E",""); vGridData[7]=new Array("","R","","N","","O12","G","R","E"); vGridData[8]=new Array("I13","D","L","E","","R","","O",""); vClueAcross=new Array(); vClueDown=new Array(); vClueAcross[3]="Mr Oldman's first name (4)"; vClueAcross[5]="Captain in "20,000 Leagues Under The Sea" (4)"; vClueAcross[6]="___ Rickman, actor who often plays a baddy (4)"; vClueAcross[7]=""The Seven Voyages of ___" (6)"; vClueAcross[9]="Planes and automobiles? (6)"; vClueAcross[11]="Dorothy's dog in "The Wizard of Oz" (4)"; vClueAcross[12]="What sort of creature is Shrek (4)"; vClueAcross[13]="Eric, the Monty Python man (4)"; vClueDown[1]="Ms Moore, star of the 1990 hit film "Ghost" (4)"; vClueDown[2]="Western starring Kurt Russell as Wyatt Earp (9)"; vClueDown[3]="Epic that made Russell Crowe a star (9)"; vClueDown[4]=""___ House", Patrick Swayze film (4)"; vClueDown[8]="Surname of "The Fugitive" and "Star Wars" actor (4)"; vClueDown[10]="Robert De ___, "Untouchables" bad guy (4)"; function fButton(){if(vGameOver==0){vGameOver=1; if(vOldClueNum!=0){fDeleteTrack(); d.getElementById(vOldClueNum+vOldDir).style.backgroundColor="";} d.getElementById("info").innerHTML='<font color="#333399">XWORD COMPLETE!<br>Correct answers are shown in green and incorrect answers are shown in red.</font>'; d.getElementById("gmeButton").innerHTML='<font color="#ffffff">Stats</font>'; vDate=new Date(); vDateEnd=vDate.getTime(); for(var x=0; x<vGridData.length; x++){for(var y=0; y<vGridData.length; y++){if(vGridData[x][y]!=""){vLetters+=1; vNewX=x; vNewY=y; if(x<10){vNewX="0"+x;} if(y<10){vNewY="0"+y;} vElementRef=""+vNewY+vNewX; if(d.getElementById(vElementRef).className=="X"){vElementRef+="X";} if(d.getElementById(vElementRef).innerText==vGridData[x][y].charAt(0)){vCorrect+=1; d.getElementById(vElementRef).style.color="#009966";} else {d.getElementById(vElementRef).innerText=vGridData[x][y].charAt(0); d.getElementById(vElementRef).style.color="#ff0000";}}}} vCurrentDir=0;} else {vMessage=""; vMessage+="XWORD STATISTICS\n\n\n"; vPercent=parseInt((vCorrect/vLetters)*100); vMessage+="Of the "+vLetters+" letters in the grid, you got "+vCorrect+" correct.\nYou therefore scored "+vPercent+"%.\n\n"; vTotalTime=(vDateEnd-vDateStart)/1000; vHours=0; vMinutes=0; if(vTotalTime<60){vSeconds=parseInt(vTotalTime);} if(vTotalTime>=60 && vTotalTime<3600){vMinutes=parseInt(vTotalTime/60); vSeconds=parseInt(vTotalTime-(vMinutes*60));} if(vTotalTime>=3600){vHours=parseInt(vTotalTime/3600); vMinutes=parseInt((vTotalTime-(vHours*3600))/60); vSeconds=parseInt(vTotalTime-(vHours*3600)-(vMinutes*60));} vMessageTime="It took you "+ vHours+" hour"; if(vHours!=1){vMessageTime+="s";} vMessageTime+=", "+vMinutes+" minute"; if(vMinutes!=1){vMessageTime+="s";} vMessageTime+=" and "+vSeconds+" second"; if(vSeconds!=1){vMessageTime+="s";} vMessageTime+="\nto finish this XWORD.\n\n"; if(vDateEnd<vDateStart){vMessageTime="Congratulations! It would appear that you have\ntravelled back in time to complete this XWORD.\n\n";} if(vTotalTime>86400){vMessageTime="It has taken you more than a day to complete this\nXWORD. You should be ashamed of yourself.\n\n";} alert(vMessage+vMessageTime);}} function fKeyIn(vKey){if(vCurrentDir!=0){if(vCurrentDir==1){x=vCurrentCell.slice(0,2)/1; y=vCurrentCell.slice(2,4); vNewX=x+vEditPos; if(vNewX<10){vNewX="0"+vNewX;} vElementRef=""+vNewX+y;} else {x=vCurrentCell.slice(0,2); y=vCurrentCell.slice(2,4)/1; vNewY=y+vEditPos; if(vNewY<10){vNewY="0"+vNewY;} vElementRef=""+x+vNewY;} if(vKey==13){fDeleteTrack(); d.getElementById(vOldClueNum+vOldDir).style.backgroundColor=""; vCurrentDir=0; vOldDir=0; vOldClueNum=0;} if(vKey>64 && vKey<91 || vKey==32){vText=String.fromCharCode(vKey); fCellColour(vElementRef,"#00ff99","#00df86"); if(d.getElementById(vElementRef).className=="X"){vElementRef+="X";} d.getElementById(vElementRef).innerText=vText; if(vCurrentDir==1){fMoveRight()} else {fMoveDown()}} if(vKey==46){if(d.getElementById(vElementRef).className=="X"){vElementRef+="X";} d.getElementById(vElementRef).innerText=" ";} if(vKey==8){fCellColour(vElementRef,"#00ff99","#00df86"); if(vCurrentDir==1){fMoveLeft()} else {fMoveUp()} if(d.getElementById(vElementRef).className=="X"){vElementRef+="X";} d.getElementById(vElementRef).innerText=" "; event.returnValue=false;}} if(vKey==38){if(event.shiftKey){window.scrollBy(0,-30); return;} if(vCurrentDir!=2){return;} fCellColour(vElementRef,"#00ff99","#00df86"); fMoveUp();} if(vKey==40){if(event.shiftKey){window.scrollBy(0,30); return;} if(vCurrentDir!=2){return;} fCellColour(vElementRef,"#00ff99","#00df86"); fMoveDown();} if(vKey==37){if(event.shiftKey){window.scrollBy(-30,0); return;} if(vCurrentDir!=1){return;} fCellColour(vElementRef,"#00ff99","#00df86"); fMoveLeft();} if(vKey==39){if(event.shiftKey){window.scrollBy(30,0); return;} if(vCurrentDir!=1){return;} fCellColour(vElementRef,"#00ff99","#00df86"); fMoveRight();}} function fMoveUp(){x=vCurrentCell.slice(0,2); y=vCurrentCell.slice(2,4)/1; vEditPos-=1; if(vEditPos==-1){vEditPos=vWordLen-1;} vNewY=y+vEditPos; if(vNewY<10){vNewY="0"+vNewY;} vElementRef=""+x+vNewY; fCellColour(vElementRef,"#00cc66","#00bb5e");} function fMoveDown(){x=vCurrentCell.slice(0,2); y=vCurrentCell.slice(2,4)/1; vEditPos+=1; if(vEditPos==vWordLen){vEditPos=0;} vNewY=y+vEditPos; if(vNewY<10){vNewY="0"+vNewY;} vElementRef=""+x+vNewY; fCellColour(vElementRef,"#00cc66","#00bb5e");} function fMoveLeft(){x=vCurrentCell.slice(0,2)/1; y=vCurrentCell.slice(2,4); vEditPos-=1; if(vEditPos==-1){vEditPos=vWordLen-1;} vNewX=x+vEditPos; if(vNewX<10){vNewX="0"+vNewX;} vElementRef=""+vNewX+y; fCellColour(vElementRef,"#00cc66","#00bb5e");} function fMoveRight(){x=vCurrentCell.slice(0,2)/1; y=vCurrentCell.slice(2,4); vEditPos+=1; if(vEditPos==vWordLen){vEditPos=0;} vNewX=x+vEditPos; if(vNewX<10){vNewX="0"+vNewX;} vElementRef=""+vNewX+y; fCellColour(vElementRef,"#00cc66","#00bb5e");} function fCellColour(vElementRef,vPriColour,vSecColour){d.getElementById(vElementRef).style.backgroundColor=vPriColour; d.getElementById(vElementRef+"A").style.backgroundColor=vSecColour; d.getElementById(vElementRef+"B").style.backgroundColor=vSecColour; d.getElementById(vElementRef+"C").style.backgroundColor=vSecColour;} function fDeleteTrack(){if(vCurrentDir==1){vOldDir=1; vOldX=vCurrentCell.slice(0,2)/1; vOldY=vCurrentCell.slice(2,4); for(var vNewX=vOldX; vNewX<vWordLen+vOldX; vNewX++){if(vNewX<10){vNewX="0"+vNewX;} vElementRef=vNewX+vOldY; fCellColour(vElementRef,"#ffffff","#dcdcdc");}} else {vOldDir=2; vOldX=vCurrentCell.slice(0,2); vOldY=vCurrentCell.slice(2,4)/1; for(var vNewY=vOldY; vNewY<vWordLen+vOldY; vNewY++){if(vNewY<10){vNewY="0"+vNewY;} vElementRef=vOldX+vNewY; fCellColour(vElementRef,"#ffffff","#dcdcdc");}}} function fShowTrack(vCellNum,vCellRef){if(vGameOver==1){return;} vEditPos=0; if(vCurrentDir!=0){fDeleteTrack()} vCurrentDir=1; if(vClueAcross[vCellNum]==null){vCurrentDir=2;} if(vClueDown[vCellNum]!=null && vCurrentCell==vCellRef && vOldDir==1){vCurrentDir=2;} if(vOldClueNum!=0){d.getElementById(vOldClueNum+vOldDir).style.backgroundColor="";} d.getElementById(vCellNum+vCurrentDir).style.backgroundColor="#00cccc"; fCellColour(vCellRef,"#00cc66","#00bb5e"); if(vCurrentDir==1){vOldX=vCellRef.slice(0,2)/1; vOldY=vCellRef.slice(2,4); vWordLen=vClueAcross[vCellNum].substr(vClueAcross[vCellNum].length-2,1)/1; for(var vNewX=vOldX+1; vNewX<vWordLen+vOldX; vNewX++){if(vNewX<10){vNewX="0"+vNewX;} vElementRef=vNewX+vOldY; fCellColour(vElementRef,"#00ff99","#00df86");}} else {vOldX=vCellRef.slice(0,2); vOldY=vCellRef.slice(2,4)/1; vWordLen=vClueDown[vCellNum].substr(vClueDown[vCellNum].length-2,1)/1; for(var vNewY=vOldY+1; vNewY<vWordLen+vOldY; vNewY++){if(vNewY<10){vNewY="0"+vNewY;} vElementRef=vOldX+vNewY; fCellColour(vElementRef,"#00ff99","#00df86");}} vCurrentCell=vCellRef; vOldClueNum=vCellNum;} function fOverCell(vElementRef){if(vGameOver==1){d.getElementById(vElementRef).style.cursor="default"; return;} d.getElementById(vElementRef).style.cursor="hand"; if(d.getElementById(vElementRef).style.backgroundColor=="#00cc66" || d.getElementById(vElementRef).style.backgroundColor=="#00ff99"){return;} fCellColour(vElementRef,"#ffcc00","#eabb00");} function fOutCell(vElementRef){if(d.getElementById(vElementRef).style.backgroundColor!="#ffcc00"){return;} fCellColour(vElementRef,"#ffffff","#dcdcdc");} //--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onkeydown=fKeyIn(event.keyCode) onload=focus()><TABLE cellSpacing=0 cellPadding=3 width="100%" border=0> <TBODY> <TR class=txtV1> <TD bgColor=#333399><FONT color=#ffffff><B>At The Movies</B></FONT></TD> <TD align=right bgColor=#333399><FONT color=#ffffff><B>BY: <A href="mailto:lee@xwordz.co.uk">Lee Irwin</A></B></FONT></TD></TR> <TR align=middle> <TD class=txtV2 id=info bgColor=#0099ff colSpan=2><FONT color=#333399>Complete the XWORD by clicking on the numbers in the grid and typing your answer.<BR>When you've answered all you can, click on the finish button at the bottom of the page.</FONT></TD></TR> <TR> <TD bgColor=#99ccff colSpan=2 height=18></TD></TR></TBODY></TABLE><TABLE cellSpacing=0 cellPadding=0 width="100%" bgColor=#99ccff border=0> <TBODY> <TR> <TD align=middle> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD vAlign=top align=right> <TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 width=180 border=1> <TBODY> <TR> <TD> <TABLE class=txtV2 cellSpacing=0 cellPadding=1 width=180 bgColor=#ffcc00 border=0> <TBODY> <TR> <TD align=middle><FONT color=#990000><B>Across</B></FONT></TD></TR></TBODY></TABLE> <TABLE borderColor=#ffcc00 cellSpacing=0 cellPadding=5 width=180 bgColor=#ffffcc border=1> <TBODY> <TR> <TD> <TABLE class=txtV1 cellSpacing=0 cellPadding=0 width="100%" border=0> <SCRIPT language=JavaScript><!--for(var vNum=0; vNum<vClueAcross.length; vNum++){if(vClueAcross[vNum]!=null){d.write('<tr id="'+vNum+'1">'); d.write('<td width="18" align="right" valign="top"><b>'+vNum+'</b></td><td width="8"></td>'); d.write('<td><font color="#666666">'+vClueAcross[vNum]+'</font></td></tr>');}} // --> </SCRIPT> <TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD> <TD width=18></TD> <TD vAlign=top align=middle> <SCRIPT language=JavaScript><!--d.write('<table border="1" cellspacing="0" cellpadding="0" bordercolor="#0099cc" bgcolor="#0099cc">'); for(var x=0; x<vGridData.length; x++){d.write('<tr>'); for(var y=0; y<vGridData.length; y++){vNewX=x; vNewY=y; if(vNewX<10){vNewX="0"+vNewX;} if(vNewY<10){vNewY="0"+vNewY;} vCellRef=""+vNewY+vNewX; d.write('<td width="29" height="31"'); if(vGridData[x][y]==""){d.write('></td>');} else {if(vGridData[x][y].length>1){vClueNum=vGridData[x][y].slice(1,3); d.write('><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>'); d.write('<td class="X" id="'+vCellRef+'" valign="top" bgcolor="#ffffff" height="27" onClick=fShowTrack("'+vClueNum+'","'+vCellRef+'") onMouseOver=fOverCell("'+vCellRef+'") onMouseOut=fOutCell("'+vCellRef+'")><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr>'); d.write('<td class="txtA1">'+vClueNum+'</td>'); d.write('<td id="'+vCellRef+'X" rowspan="2" align="center" valign="bottom"></td><td width="8"></td></tr><tr><td width="8" height="11"></td><td></td></tr></table></td>');} else {d.write('><table border="0" cellspacing="0" cellpadding="0"><tr>'); d.write('<td id="'+vCellRef+'" width="27" height="27" align="center" bgcolor="#ffffff"></td>');} d.write('<td id="'+vCellRef+'A" bgcolor="#e6e6e6" width="2"></td></tr><tr>'); d.write('<td id="'+vCellRef+'B" bgcolor="#e6e6e6" height="2"></td>'); d.write('<td id="'+vCellRef+'C" bgcolor="#e6e6e6"></td></tr></table></td>');}} d.write('</tr>');} document.write('</table>'); // --> </SCRIPT> <BR> <TABLE class=txtV1 cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD width=1 bgColor=#ffffff height=1></TD> <TD bgColor=#ffffff></TD> <TD width=2 bgColor=#ffffff></TD></TR> <TR> <TD bgColor=#ffffff></TD> <TD id=gmeButton style="CURSOR: hand" onclick=fButton() align=middle width=50 bgColor=#0099cc height=20><FONT color=#ffffff>Finish</FONT></TD> <TD bgColor=#006699></TD></TR> <TR> <TD bgColor=#ffffff height=2></TD> <TD bgColor=#006699></TD> <TD bgColor=#006699></TD></TR></TBODY></TABLE></TD> <TD width=18></TD> <TD vAlign=top align=left> <TABLE borderColor=#ffffff cellSpacing=0 cellPadding=0 width=180 border=1> <TBODY> <TR> <TD> <TABLE class=txtV2 cellSpacing=0 cellPadding=1 width=180 bgColor=#ffcc00 border=0> <TBODY> <TR> <TD align=middle><FONT color=#990000><B>Down</B></FONT></TD></TR></TBODY></TABLE> <TABLE borderColor=#ffcc00 cellSpacing=0 cellPadding=5 width=180 bgColor=#ffffcc border=1> <TBODY> <TR> <TD> <TABLE class=txtV1 cellSpacing=0 cellPadding=0 width="100%" border=0> <SCRIPT language=JavaScript><!--for(var vNum=0; vNum<vClueDown.length; vNum++){if(vClueDown[vNum]!=null){d.write('<tr id="'+vNum+'2">'); d.write('<td width="18" align="right" valign="top"><b>'+vNum+'</b></td><td width="8"></td>'); d.write('<td><font color="#666666">'+vClueDown[vNum]+'</font></td></tr>');}} // --> </SCRIPT> <TBODY></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><TABLE cellSpacing=0 cellPadding=3 width="100%" border=0> <TBODY> <TR> <TD align=middle bgColor=#99ccff colSpan=3 height=16></TD></TR> <TR> <TD width=100 bgColor=#333399></TD></TR></TBODY></TABLE></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->