280 lines of code: 2048 Games Written in Javascript

2048 the original author wrote it in Js and tried it for a long time.

I taught students to learn JS Code yesterday. Just make an interesting game. 2048 is a good choice.

Ideas:

1. array, 2-dimensional array 4x4

2. The mobile algorithm is aligned with the number after moving. No number (I used 0, but not displayed) is filled.

Before moving

After moving (note that the program merges 2 in the first line and generates a new 2)

The mobile algorithm consists of two steps:

Step 1: Move

Step 2: Merge

Mobile Code reference:

[Html]View plaincopy

1. Function left (t, I)
2. {
3. Var j;
4. Var len = t [I]. length;
5. For (j = 0; j <len-1; j ++)
6. {
7. If (t [I] [j] = 0 & t [I] [j + 1]! = 0)
8. {
9. Temp = t [I] [j];
10. T [I] [j] = t [I] [j + 1];
11. T [I] [j + 1] = temp;
12. Left (t, I );
14. }
15. }
17. }

For code merging, refer:

[Html]View plaincopy

1. Function lcombine (a, I)
2. {
3. Var len = a [I]. length;
5. For (var j = 0; j <len-2; j ++)
6. {
7. If (a [I] [j] = a [I] [j + 1])
8. {
9. A [I] [j] * = 2;
10. A [I] [j + 1] = 0;
11. Left (a, I );
12. Break;
13. }
14. }
15. }

3. Display

Display part of the CSS source 2048 source author program.

Show Code:

[Html]View plaincopy

1. Function display_div ()
2. {
3. Var I, j;
4. Var n = "# d ";
5. For (I = 0; I <4; I ++)
6. {
7. For (j = 0; j <4; j ++)
8. {
9. If (a [I] [j]! = 0)
10. $ (N + (I * 4+j)).html ("<div class = 'tile tile-" + a [I] [j] + "'> <div class = 'tile-inner'> "+ a [I] [j] +" </div> ");
11. Else
12. $ (N + (I * 4+j1_0000.html ("");
15. }
16. }
17. }

This code displays the array content in a 4x4 table.

Source code and Online Demo: http://jsbin.com/biximuho/6/edit