Flip Puzzle web games made

Source: Internet
Author: User

When we learn things, often like to play a bit of fun, this time to refer to other people's ideas, do a little game, although in CSS and JavaScript I am a novice, but hard one day still super brother and the help of fellow brother to get out, the development to share it.

First on the final product

Http://luyishisi.github.io/test.html

Before preparing to write this, at least have html,css and JavaScript knowledge, if jquery is the best.

Start by sticking to the development plan you started thinking about:

Progressive implementation:
1: Click the button to achieve discoloration,
2: Click the button to realize the color change of the Next button
3: To achieve the reproducibility of discoloration,
4: Set the boundary,
5: Set success criteria.

So, the first step is to draw a button, add JavaScript functions, trigger the Click event to modify the background color of the button. Click again to modify it again.

When these two are implemented, the time has elapsed for one hours, before lunch has been depressed about how to make the Next button also discoloration.

The first idea is to set the ID of each button, separately processing, you can imagine this is a very bad idea, and then began to consider other options.

began to eat lunch, along the way I will be the button next to the color change this question, ask big bro. The solution he offered was to use the traversal of jquery and just learned jquery yesterday, which is a good idea.

Later, the elder brother also provides a train of thought, is to use a two-dimensional array to represent values, click the button to modify the number of lease parameters, and then call a function, refresh all the values of the button.

Okay, that's him, let's go, Pikachu.

Fought again for an hour, made a 4*4 matrix, drew 16 buttons,

There's code with the truth

<div class= "main" > <button class= "Butt" id= "but1" onclick= "myFunction (This)" ></button> <button class= "Butt" id= "But2" onclick= "myFunction (This)" ></button> <button class= "Butt" id= "But3" onclick= " MyFunction (This) "></button> <button class=" Butt "id=" But4 "onclick=" myFunction (This) "></button > <br> <button class= "Butt" id= "But5" onclick= "myFunction (This)" ></button> <button class= "Butt" id= "But6" onclick= "myFunction (This)" ></button> <button class= "Butt" id= "but7" onclick= "myFunction (this) "></button> <button class=" Butt "id=" But8 "onclick=" myFunction (This) "></button> &LT;BR&G    T <button class= "Butt" id= "But9" onclick= "myFunction (This)" ></button> <button class= "Butt" id= "but10" on Click= "MyFunction (This)" ></button> <button class= "Butt" id= "but11" onclick= "MyFunction" ></ button> <button class= "Butt" id="But12" onclick= "myFunction (This)" ></button> <br> <button class= "Butt" id= "but13" onclick= "myfunct Ion (This) "></button> <button class=" Butt "id=" but14 "onclick=" myFunction (This) "></button> < Button class= "Butt" id= "but15" onclick= "myFunction (This)" ></button> <button class= "Butt" id= "but16" Onclick= "MyFunction (This)" ></button></div>
function MyFunction (x) {    var id = x.id;//Get ID    var num= (Id.substr (3))-1;    var x_top_id = num-4;//calculates the id    var x_left_id = num-1 for the upper and lower left and right;    var x_right_id = num+1;    var x_bottom_id = num+4;    ar[x_top_id]++;    ar[x_bottom_id]++;    ar[num]++;    if (x_left_id!=3&&x_left_id!=7&&x_left_id!=11)    ar[x_left_id]++;    if (x_right_id!=4&&x_right_id!=8&&x_right_id!=12)    ar[x_right_id]++;    Shuaxin ();    Win ();}

The above is the main processing function. Click to get the current ID, remove the first 3 characters, and then change into a number to handle the changes in the two-dimensional array. You can see that the method is still relatively stupid, because the boundary is calculated by itself, finally add refresh function, and judge the Victory function.

function Shuaxin () {for   (var i = 1;i <=16;i++)    {   var id= ' but ' +i;        X0=document.getelementbyid (ID)        if (ar[i-1]%2==0)            x0.style.background= "#e6ab5e";        else            x0.style.background= "RGB (92,144,255)";}    }
Function win () {for   (var i = 0; i <, i++) {   if (ar[i]!=1) {break;}        else if (i==15) alert ("Congratulations Victory");}    }

And then the super-brother of the code is also out of the people to see, this is the use of the framework to get out, I added a little comment, or by the super-do this young say it.

<script>
var vm = avalon.define (' model ', function (VM) {
VM.SZ = 0;//Set Size
Vm.grid = [];//set array
Vm.tile_click = function () {//Set Click functions
var col = $ (this). Index ()% vm.sz;//know the first few columns
var row = parseint ($ (this). Index ()/VM.SZ);//Get row
var dx = [0, 0, 1, 0, -1];//used to find the upper and lower left and right lattice
var dy = [0, 1, 0,-1, 0];//used to find the upper and lower left and right lattice
var buf;
var k=0;
for (var d = 0; d < 5; ++d) {col + = Dx[d]; row + = dy[d];//Five positions find it again if (Col >=0 && Col < vm.sz && R ow >=0 && Row < VM.SZ) {
Set boundaries
BUF = 1-vm.grid[row*vm.sz+col];
BUF Storing values temporarily
Vm.grid.splice (Row*vm.sz+col, 1, buf);
Replace Enter
}
Col-= dx[d]; Row-= dy[d];//returns to the middle position
}
for (var j=0; j < vm.sz*vm.sz;j++)
{
if (vm.grid[j]==1) k++;
if (k== (VM.SZ*VM.SZ))
{Alert ("Congratulations to Victory"); vm.sz++;}
}
}
});
VM. $watch (' sz ', function (val) {
var i, j, Row;
val = parseint (val) | | 4;
Vm.grid.clear ();
for (i = 0; i < Val * val; ++i) vm.grid.push (0); }); VM.SZ = 3; function up () {vm.sz++; if (vm.sz>15) {alert ("Don't Mess"); vm.sz=14;}
}
function down () {
vm.sz--;
if (vm.sz==1) {alert ("can no longer be lowered"); vm.sz=2;}
}

</script>

Finally, about this little development. , on the next day I tried to use jquery to give him the art, added a little change of effect, but also the square into a rounded corner, plus a few interactive buttons, which can be considered as completed. Feel the use of knowledge, learn what, or like to apply immediately, which can quickly grasp the information.

Flip Puzzle web games made

Related Article

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.