jquery do a simple lighting game to share _jquery

Source: Internet
Author: User
Tags jquery library

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>

<meta charset= "Utf-8"/>
<title>turn the Light</title>
<link rel= "stylesheet" href= "app.css" rel= "external nofollow" type= "Text/css"/>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" ></ Script>
<script>
$ (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 ();
});
});
</script>

<script>
var MaxX, Maxy;

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>

<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>

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.