JQ (JQuery) realizes flying Birds

1. Get the width and height of the image and browser

2. Get the picture's orientation

3. Set the size of the bird movement, global variables

4. Get up or down keys on the keyboard

5. Control the movement of the bird according to the upper and lower sides of the keyboard

6. Out of the browser from the opposite direction

7. Rotate

<div class= "Dbird" ></div>

. dbird{width:206px;height:121px;}

The first step is to get the width and height of the div and the width and height of the browser

var dwidth = $ (". Dbird"). width (); var dheight = $ (". Dbird"). Height (); var bwidth = $ (window). width (); var bheight = $ (window) . height ();

The second step obtains the azimuth x, Y, does not set the position, the default in the browser's upper left corner (0,0) position, namely the picture's upper left corner position is the browser's (0,0)

var off = $ (". Dbird"). Offset ();

The third step is to set the bird to size, we set a global variable, size 20

var step = 20;

The fourth step responds to the keyboard, the keyboard is represented by a number, such as up and Down is 37-40. Assign the key to KeyCode, and then use it to make a fifth step judgment.

$ (document). KeyDown (function (e) {var keycode = E.keycode;}

The fifth step according to the key is the upper and lower left and right to move, using switch-case relatively simple

Switch (keycode) {case 37://Left off.left-= step;    Click Left to move the break;  Case 38://on off.top-= step;    Press to move up the break;   Case 39://Right Off.left +=step;    Click to the right to move the break;  Case 40://under Off.top + = step; Click to move down the break;}

It should be no effect at this time, the location of the bird can be refreshed, after the switch to regain the position after the move can be

$ (". Dbird"). Offset (off);

The sixth step beyond the browser from the opposite direction to fly back, explain, such as always to the right to fly, when the bird's position is larger than the width of the browser, then we can not see the bird, at this time we let the bird in the browser from the left to fly in, because we do not set the position of the bird, then should be from the Then Off.left is-dwidth, look at the image analysis:

Three other empathy

if (off.left <=-dwidth) {//37off.left = Bwidth;} if (off.top<=-dheight) {//38off.top = Bheight;} if (off.left>=bwidth) {//39off.left=-dwidth}if (off.top>=bheight) {//40off.top =-dheight;}

Seventh step rotation by azimuth

The default is 39 (head to right) can be judged, if it is 39, then do not rotate, if not 39 according to the number of buttons to do the corresponding rotation, left to rotate 180 °, on or under the rotation of 60° (degree of their own), you can first write a good number of buttons corresponding to the effect, such as 37, we given 37 class Class 37 CSS style is rotated 180 °, when you press 37 o'clock to add the Dir_37 class, if you do not press 37 instead of 40, remove the Dir_37 class to add dir_40 class.

First of all, write three classes.

. dri_37{Transform:rotatey (180DEG);/* Direct Turn */}.dri_38{transform:rotate ( -60deg);/* Tilt */}.dri_40{transform:rotate (60 DEG);}

Second, you can define a global variable assigned to the default value of 39

var rcode = 39;

Finally, according to the key and rcode comparison, if not equal, then add the corresponding class, add before you can remove the last added class (If you have not added the class will not be executed). Otherwise, continue execution.

if (keycode! = Rcode) {$ (". Dbird"). Removeclass (). addclass ("Dri_" +keycode);}

JQ (JQuery) realizes flying Birds