jquery do a simple lighting game to share

jquery do a simple lighting game to share _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Tags jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Dick Silk recently forced to learn typescript (not learn will be expelled, 5555), so you have to learn JavaScript, this is good, all the Web page related things have to understand, otherwise can not be fooled boss.

Today learned a little can of JavaScript, here first made a simple lighting game, is a practicing bar. It uses jquery, otherwise the event binding will hurt the egg.

As a JavaScript hello world, this thing is the following stuff. Here is a simple way to implement.

Effect Chart:

First define a style sheet, do not forget the custom elements should be added dot before, otherwise invalid (rookie by this thing to harm many times AH):
App.css

Copy Code code 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 to achieve the overall layout bar, is the body tag in the things, this is very simple, not to say more:

Copy Code code as follows:

<body>
Hello
<div id= "option" >
<label for= "X" > Transverse:</label>
<input type= "number" id= "X" value= "5"/>
<label for= "Y" > Portrait:</label>
<input type= "number" id= "Y" value= "4"/>
<button id= "Startbutton" > Start Game </button>
</div>
<div id= "Content" >

</div>
<div id= "Stepcounter" >
You have moved the <label id= "step" >0</label>.
</div>
</body>

Then, implement a very simple validation, after clicking the Start button, to determine whether the user input is a number, and whether in the range of 4-9.

Copy Code code 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 (' Vertical cell can enter a number. ');
Return
}
else if ($ (X). Val () < 4 | | $ (Y). Val () < 4 | | | $ (X). val () >= | | $ (Y). Val () >= 10) {
Alert (' Horizontal number cannot be less than 4, and cannot be greater than 9. ');
Return
}

Startgame ();
});
});

$ () is the jquery library used. Basically, the selector used here is: $ ("#xxx") the first element with an ID of XXX; $ (". XXX") style is all elements of XXX.

Step is the variable that I define, and the user records how many times the user has pressed it.

After each user presses the Start button, the original button is cleared (if any). It's easy to do with jquery, and you can use a style to match it:

Copy Code code as follows:

$ (". Darkbutton"). Remove ();
$ (". Lightbutton"). Remove ();
$ (". return"). Remove ();

And then there's a bunch of buttons to build. This is very conventional, do not need to do any explanation:

Copy Code code 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 elements of HTML. I am here to name the button's ID with the bt+ line number + column number, so that you can easily know what button to press later. In order to facilitate the period, I stipulated that the line number and the column number must be less than 10 (good lazy AH), this kind of directly to the penultimate or second character to know the coordinates value.

The most important logic of the program: Press a button to change the state of yourself and the adjacent button. We just need to take out the coordinates, and then change the top and bottom button state on the line (pay attention to the boundaries of the judgment), here to write a judgment bar:

Copy Code code 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 This is defined in jquery. It wouldn't be easy if you didn't need jquery to get this one. One thing to be reminded of is the following code:

Copy Code code as follows:

var newx = 1 + parseint (x);
if (x + 1 <= maxX) {
Changebutton (' BT ' + newx + y);
}

If you do not parseint,javascript 1 as a string and the x in the back, so that the ID is wrong, so the x into an int after the addition can be (the above subtraction does not need to do this). This is one of the drawbacks of the typescript language, so there will be a lot of it (Dick Silk is learning recently).

The important part is finished, the following is pasted the HTM file all the code.

Copy Code code as follows:

<! DOCTYPE html>

Startgame ();
});
});
</script>

var step = 0;

function Startgame () {
MaxX = $ (X). Val ();
Maxy = $ (Y). Val ();
Makegrid (MaxX, Maxy);
Step = 0;
document.getElementById ("Step"). InnerHTML = step;
}

function Makegrid (x, y) {
$ (". Darkbutton"). Remove ();
$ (". Lightbutton"). Remove ();
$ (". return"). Remove ();

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);
}

$ (". 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);
               }
                if (y-1 > 0) {
                     Changebutton (' BT ' + x + (y-1));
               }

                var newx = 1 + parseint (x);
                if (x + 1 <= maxX) {
                     Changebutton (' BT ' + newx + y);
               }
                var newy = 1 + parseint (y);
                if (y + 1 <= maxy) {
                     Changebutton (' BT ' + x + newy);
               }

step++;

document.getElementById ("Step"). InnerHTML = step;
});
}

function Changebutton (ID) {
var button = document.getElementById (ID);

            if (button.classname = = "Darkbutton") {
                Button.classname = " Lightbutton ";
           }
            else {
                 button.classname = "Darkbutton";
           }
       }

        function Createbutton (ID) {
             var button = document.createelement (' button ');
            button.id = ID;
            button.classname = "Darkbutton";
            return button;
       }
    </script>

</div>
<div id= "Stepcounter" >
You have moved the <label id= "step" >0</label>.
</div>
</body>

If you want to run the code, just save the first stylesheet as App.css, and then save the complete code as Default.htm, then put it in the same folder, and open the HTM file in the browser (ie to enable ActiveX).

Note that this has a lot to do with browser compatibility, so it's not guaranteed to work on all browsers (and any version) ...

By the end, say a little more. You can use Visual Studio 2012来 to edit HTML and JavaScript, IntelliSense, and direct breakpoint debugging, which can be very handy.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More