JQuery is a simple lighting game.

This article mainly introduces JQuery's simple lighting game sharing, which is a very interesting intelligent game, if you want to learn TypeScript, you can refer to the recent cases where diaosi is forced to learn TypeScript (5555 will be expelled if you don't learn it). So you have to learn JavaScript first. This is good. You have to understand all the webpage-related things, otherwise, the BOSS cannot be fooled.

I learned JavaScript for a short time today. Here I made a simple light-on-point game. JQuery is used, otherwise event binding will hurt.

As the JavaScript Hello World, this is the stuff below. The implementation method is briefly described here.

:

First, define a style sheet. Do not forget to add a dot before the custom element. Otherwise, it will be invalid (the cainiao has been harmed for many times ):
App.css

The Code is as follows:

Body
{
Font-family: 'segoe UI ', sans-serif;
}

Span {
Font-style: italic
}

. DarkButton {
Width: 70px;
Height: 70px;
Background-color: green;
}

. LightButton {
Width: 70px;
Height: 70px;
Background-color: lightblue;
}

. Return {
Font-size: small;
}

Next, let's implement the overall layout, that is, the content in the body tag. This is very simple. I will not talk about it much:

The Code is as follows:

Turn all the light bulbs if you can!
Hello

Horizontal:

Vertical:

Start the game

You have moved0Step.

Then, we first implement a simple verification. After clicking the start button, we can determine whether the user input is a number and whether it is within the range of 4-9.

The Code is as follows:

$ (Document). ready (function (){
$ (StartButton). click (function (){
If (step> 0 ){
If (confirm ('Are you sure you want to start the game again? ') = False)
Return;
}

If (isNaN ($ (X). val () | isNaN ($ (Y). val ())){
Alert ('numbers can be entered in the vertical cell. ');
Return;
}
Else if ($ (X ). val () <4 | $ (Y ). val () <4 | $ (X ). val ()> = 10 | $ (Y ). val ()> = 10 ){
Alert ('the number of vertical bars cannot be less than 4 and cannot be greater than 9. ');
Return;
}

StartGame ();
});
});

$ () Is the JQuery library used. Basically, the selectors used here mainly include: $ ("# xxx") the first element with id xxx; $ (". xxx") All elements whose style is xxx.

Step is a variable defined by me. The user records the number of times the user presses.

After you press the start button, clear the original button (if any ). JQuery is easy to implement, and style matching is enough:

The Code is as follows:

$ (". DarkButton"). remove ();
$ (". LightButton"). remove ();
$ (". Return"). remove ();

Then a bunch of buttons are generated. This is common and does not need to be explained as follows:

The Code is as follows:

Var grid = document. getElementById ('content ');

For (var I = 1; I <= x; I ++ ){
For (var j = 1; j <= y; j ++ ){
Var button = createButton ('bt '+ I + j );

Grid. appendChild (button );
}

Var ret = document. createElement ('br ');
Ret. className = "return ";

Grid. appendChild (ret );
}

CreateButton is a method used to generate and set html elements. Here, the button id is named by bt + row number + column number, so that you can easily know which button will be followed. For the sake of convenience, I have stipulated that the number and column number must be smaller than 10 (so it is very lazy). This is also the first or second character to know the coordinate value.

The most important logic of a program: press a button to change the status of itself and adjacent buttons. We only need to retrieve the coordinates and change the buttons in the upper, lower, and lower statuses (pay attention to cross-border judgment). Let's write a judgment here:

The Code is as follows:

$ (". DarkButton"). click (function (){
ChangeButton (this. id );

Var x = this. id. charAt (2 );
Var y = this. id. charAt (3 );

If (x-1> 0 ){
ChangeButton ('bt '+ (x-1) + y );
}

Note that this is defined in JQuery. It is not easy to get this without JQuery. The following code is worth noting:

The Code is as follows:

Var newX = 1 + parseInt (x );
If (x + 1 <= maxX ){
ChangeButton ('bt '+ newX + y );
}

If you do not use parseInt, JavaScript will treat 1 as a string and the following x, so that the id is incorrect, therefore, convert x to an int and add it together (this is not required in the subtraction above ). This is one of the drawbacks of the non-type language, so TypeScript (which diaosi is learning recently) will appear ).

All the important parts are finished. The following is the code for all the htm files.

The Code is as follows:

Turn the light