Home >Web Front-end >JS Tutorial >Share a simple lighting game made with JQuery_jquery

Share a simple lighting game made with JQuery_jquery

WBOYOriginal: 2016-05-16 16:41:561577browse

Recently, diaosi are forced to learn TypeScript (if you don’t learn it, you will be expelled, 5555), so you have to learn JavaScript first. This is a good time. You must understand all web-related things, otherwise you will not be able to fool the BOSS.

I learned JavaScript for a little while today. Here I made a simple light-up game to practice my skills. JQuery is used, otherwise event binding would be a pain.

As the Hello World of JavaScript, this thing is the following thing. Here is a brief introduction to the implementation method.

Rendering:

First define a style sheet. Don’t forget to add dots before custom elements, otherwise it will be invalid (novices have been harmed by this thing many times):
app.css

Copy code 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, which is what is in the body tag. This is very simple, not much to say:

Copy code The code is as follows:

Turn all the light bulbs if you can!

Hello

           Horizontal:

           Vertical:

You have moved 0 steps.

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

Copy code The code is as follows:

$(document).ready(function () {
$(startButton).click(function () {
If (step > 0) {
If (confirm('Are you sure you want to restart the game?') === false)
return;
}

if (isNaN($(X).val()) || isNaN($(Y).val())) {
alert('You can enter numbers in horizontal and vertical cells.');
 return;
}
else if ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val( ) >= 10) {
 alert('The number of horizontal and vertical lines 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 with style xxx.

step is a variable I defined, and the user records how many times the user presses it.

Every time the user presses the start button, clear the originally drawn button (if any). It’s easy to implement with JQuery, just use styles to match:

Copy code The code is as follows:

$(".darkButton").remove();

$(".lightButton").remove();

$(".return").remove();

Then a bunch of buttons are generated. This is very common and requires no explanation:

Copy code 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. The id naming of the button here is bt row number column number, so that it is easy to know which button is pressed in the future. In order to facilitate the period, I stipulated that the row number and column number must be less than 10 (so lazy), so you can just get the first or second character from the last to know the coordinate value.

The most important logic of the program: press a button to change the status of itself and adjacent buttons. We only need to take out the coordinates, and then change the status of the up, down, left, and right buttons (pay attention to the judgment of out-of-bounds situations), write a judgment here:

Copy code 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. One thing to remind you is the following piece of code:

Copy code The code is as follows:

var newX = 1 parseInt(x);

if (x 1 <= maxX) {

​ changeButton('bt' newX y);

}

If you don’t parseInt, JavaScript will treat 1 as a string and concatenate it with the following x, so the id will be wrong, so just convert x to int and add it up (you don’t need to do this in the above subtraction case) ). This is one of the drawbacks of untyped languages, which is why TypeScript appears (what Diaosi is learning recently).

Now that the important parts are finished, all the codes of the htm file are pasted below.

Copy code The code is as follows:

Turn the light

<script> $(document).ready(function () { $(startButton).click(function () { if (step > 0) { If (confirm('Are you sure you want to restart the game?') === false) return; } if (isNaN($(X).val()) || isNaN($(Y).val())) { alert('You can enter numbers in horizontal and vertical cells.'); return; } else if ($(X).val() < 4 || $(Y).val() < 4 || $(X).val() >= 10 || $(Y).val( ) >= 10) { alert('The number of horizontal and vertical lines cannot be less than 4 and cannot be greater than 9.'); return; } startGame(); }); }); </script>

Turn all the light bulbs if you can!

Hello

           Horizontal:

           Vertical:

You have moved 0 steps.

If you want to run the code, you only need to save the initial style sheet as app.css, then save this complete code as default.htm, then put it in the same folder and open the htm file with a browser That's it (IE needs to enable ActiveX).

It should be noted that this thing has a lot to do with browser compatibility, so there is no guarantee that it will run normally on all browsers (and any version). . .

By the way, let me say a little more at the end. You can use Visual Studio 2012 to edit html and JavaScript, it will have Intellisense, and you can directly add breakpoints for debugging, which is very convenient.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Discussion on examples of attention issues when splicing js into html_javascript skillsNext article：Discussion on examples of attention issues when splicing js into html_javascript skills

See more

Share a simple lighting game made with JQuery_jquery

Turn all the light bulbs if you can!

Turn all the light bulbs if you can!

Related articles