Learn how to write 2048 for js and css and learn jscss2048

Learn how to write 2048 for js and css and learn jscss2048

In the learning stage, I wrote something interesting to practice hands-on learning. Today, I made a 2048 error in the grid layout, But I didn't do mobile animation and merging special effects. I just implemented some simple functions.

Record the learning process.

1. Entry function, initialization interface. Here is a grid that corresponds to a number. It is better to find the grid first and then dynamically generate it on the grid.

2. Several global variables are defined to control the main logic and style modifications.

 

3. Initial status

 

4. Rendering

5. Listen to Keyboard Events. I don't know if there is any good method here, So I directly write them up and down separately.

6. Finally, define the rule for the end of the game and traverse the array. if 2048 is displayed, modify the span above to "win.

The code is messy, but I don't know how to optimize it ..