Html5 + js implement Tetris

Code test address: Test
1. knowledge points used

Html5

Javascript

2. functions to be implemented

Normal Russian square gameplay

3. analysis functions

(1) Combination square, a total of 7 shapes, can be statically specified (composed of four squares)

(2) Move down, left, and right of the composite Blocks

: The left shift of the composite image is x coordinate minus 1 The right shift of the composite image is x coordinate plus 1 the downward shift of the composite image is y coordinate plus 1 (3) the composite image is rotated

Assume that the new coordinates after a coordinate point (rx0, ry0) round a coordinate point (x, y) in the image counter-clockwise rotation of the RotaryAngle angle are set to (x, y '), formula:
X' = (x-rx0) * cos (RotaryAngle) + (y-ry0) * sin (RotaryAngle) + rx0;
Y' =-(x-rx0) * sin (RotaryAngle) + (y-ry0) * cos (RotaryAngle) + ry0;

90 ° rotation formula simplified

X' = y-ry0 + rx0;

Y' =-(x-rx0) + ry0;

(4) Square elimination (instead of combination)

Determine whether each row is filled up.

(5) Other functions to be implemented

Points

Upgrade

......

For code design and implementation, see: Code Design

Download Code:

Download