1. Can choose game time, show Countdown 1. Define Global variables
2. You can choose the number of English letters 2. Control game time function
3. Statistics score 3. Animation effect
4. Menu options 4. Set the time when the letter picture appears
5. Judgment function
6. Game Menu
7. Game Time Options
8. Show Game time
9. Game Difficulty Options
10. Game Score
-------global variable-------
var data={
"Ten": [" '], "a": ["<img src= ' images/d.gif '/>"],
"A": [" '], "a": ["<img src= ' images/h.gif '/>"],
"A": [" '], "a": [" '], "a": [" ']",
"": [" '], "a": [" '], "a": [" ']",
"": [" '], "I": [" ']",
"A": [" '], "an": [" '], "a": ["<img src= ' images/x.gif '/>"],
"The": ["};
var datas=new array ();//The randomly occurring class style is even stored in an array, with an odd number of images stored in an array
var now=new Date ();
var Image; Randomly appearing pictures
var divs;//random occurrence Layer
var count=0;//Integration System
Value of the Var key;//keyboard
The number of alphabetic pictures appearing in Var amounts=1;//
Var gametime=30;//control of game time
var gametimes;//time is 0
var gametimess=30;//display clock variable
var time1;//setinterval variable
var time2=5000;//set setinterval time
var Time3;
var tab;//is used to record, pass the value of TabIndex focus position
--------write this in order to be compatible with the FF browser-------
var plug = {
Addevent:function (o,e,f) {
if (O.addeventlistener) {
O.addeventlistener (E,f,false);
}
else if (o.attachevent) {
O.attachevent ("on" +e,f);
}
}
}
Plug.addevent (window, "Load", function () {focus ()});//compatible FF browser
------1. Control game time Function--------
function Gametime () {
for (gametimes=gametime;gametimes>=0;gametimes--) {
Window.settimeout (' Show (' + Gametimes + ') ', (gametime-gametimes+2) * 1000);
}
}
Function Show (gametimes) {
if (gametimes==0) {
Clearinterval (time1);/Stop the game
Alert ("Game over! Your score is:" +count);
$ ("#main"). Empty ()//clear Div in main
$ (". Gameapply"). empty ();
$ ("#select1"). empty ();
$ ("#select2"). empty ();
count=0;//score empty to 0
Score ()//Let the score box display 0
Focus ();//Regenerate menu options
}
}
---------2. Animation effect---------
function Fun () {
datas.length=0;
for (Var i=0;i<amounts;i++) {
Image=parseint (Math.random () * 26) +10;//Random letter Picture
Datas.push (image);//The picture is even stored in an array, starting from scratch
Divs=parseint (Math.random () * 8) +1;//The class style of the randomly occurring layer, which is the different position of the layer
Datas.push (divs);//style with odd storage in array
var time=parseint (Math.random () * 2000) +3000;//time to complete animation
if (time<5000) {
var $divs =$ ("<div class= ' Divpop" +divs+ "' >" +data[image]+ "</div>");
$ ("#main"). Append ($divs);
-----JQ Animation Function----
$ (". Divpop" +divs). Animate (
{"Top": $ (window). Height ()-$ (". Divpop" +divs). Height ()-$ (". Divpop" +divs). Position (). Top},time,function () {$ ("# Main "). Empty ()})
}
}
}
--------3. Set the time when the letter picture appears------
function sets () {
time1 = SetInterval (fun,time2);
}
---------4. Bind keyboard---------
---------compatible FF Browser---------
Document.onkeydown = function KeyDown (e) {
E = e| | window.event;
var key = e.charcode| | E.keycode
Select (key)
}
---------5. Judgment function---------
function Select (key) {
if (key==13) {
Switch (tab) {
Case 0:gametime (); Gametimeselect (); Time3=setinterval (countdown,1000); sets (); $ ("#select"). Hide (n); break;//start the game
Case 1:gametime (); Gametimeselect (); Time3=setinterval (countdown,1000); sets (); $ ("#select"). Hide (n); break;//start the game
Case 2:alert ("You can set game options on the left");
Case 3:window.opener=null;window.open (', ' _self '); Window.close (); break;//quit the game
Case 4:window.opener=null;window.open (', ' _self '); Window.close (); break;//quit the game
}
}
for (Var j=0;j<datas.length;j=j+2) {//To make the data1 inside the style and the value of the picture does not repeat (that is, odd and even number cannot repeat, m value or K value to a certain value)
if (key==datas[j]+55) {
$ (". Divpop" +datas[j+1]). Hide ();//key value equal, hides the layer
Delete Datas[j]; In order to avoid duplicate letters, it is necessary to remove this value for every traversal to one (key==datas[j]+55) in the array.
count+=10;
Score ();
Break
}
}
}
---------6. Game menu-------
function focus () {
---------Initialize the game interface--------
var $selects =$ ("<div id= ' select ' ><table id=\" tables\ "><tr><td><input class=\" Inputs\ " Type=\ "Text\" value=\ "game start \/></td></tr><tr><td><input class=\" inputs\ "type=\" text \ "value=\" game options \ "/></td></tr><tr><td><input class=\" inputs\ "type=\" text\ "value=\" Exit game \ "/></td></tr></table></div>");
$ (". Gameapply"). Append ($selects);
for (Var i=30;i<=300;i=i+30) {
$ ("#select1"). Append (' <option> ' + i+ ' </option> ')
}
for (Var j=1;j<=9;j++) {
$ ("#select2"). Append (' <option> ' + j+ ' </option> ')
}
---------gets the focus of the first input at the beginning--------
$ (". Inputs:first"). Trigger ("Focus"). AddClass ("input1");
tab=1;//because the first focus is unable to enter, so call the keyboard input event
var tabindex=1;
----------gets the number of TR rows and the number of input--------
$ ("#tables"). Find ("tr"). each (function (r) {
$ (this). Find ("Input"). attr ("TabIndex", r+1);//tabindex is the value of the focus position, the initial values are 1, traversal is 1-2-3-4
});
Keyboard up and down Operation---------Response input
$ ("#tables. Inputs"). Bind ("KeyDown", function (e) {
TabIndex = parseint ($ (this). attr ("TabIndex"))//Get the value of the current TabIndex focus
Switch (E.which) {
Case 38://up
Tabindex-=1;
Tab=tabindex;
Break
Case 40://Down
Tabindex+=1;
Tab=tabindex;
Break
Default
Return
}
--------determine the value of TabIndex focus
if (TabIndex > 0 && tabIndex < 4) {
$ (". inputs[tabindex=" + TabIndex + "]"). focus (). addclass ("input1");//Current input get focused
for (Var i=0;i<=4;i++)
{
if (I==tabindex) {
Break
}
else{
$ (this). Removeclass ("input1");
}
}
KeyDown ();
return false;
}
return true;
});
}
--------7. Game Time Options---------
function Gametimeselect () {
var Option=document.getelementbyid ("Select1");
for (Var i=0;i<option.length;++i) {
if (option[i].selected) {
Gametime=option.options[i].text;
Gametimess=gametime;
}
}
}
-----8. Show Game time-------
function Countdown () {
var Timeshows=document.getelementbyid ("Timeshow");
if (timeshows) {//If the page is slow, the control may not be loaded while the timer is running
if (gametimess<0) {
Clearinterval (TIME3);/Stop Timer
}
else{
timeshows.value=gametimess;
gametimess--;
}
}
}
--------9. Game Difficulty Options---------
function Gameselectamount () {
var Option=document.getelementbyid ("Select2");
for (Var i=0;i<option.length;++i) {
if (option[i].selected) {
Amounts=option.options[i].text;
}
}
}
---------10. Game Score-----------
function Score () {
var Sum=document.getelementbyid ("sum");
Sum.value=count;
if (count==0) {//Init text box score is 0
Sum.value=count;
}
}
Summary: Because time is longer, the code is not optimized, there is a place does not very good, that is, the letters appear too long interval, interested words can try to repair. Code for reference only
