Easily learn JavaScript

Although JavaScript has a short history, it has developed rapidly. NetScape initially developed the LiveScript language, enabling its Navigator and Web Server products to have basic scripting functions. After the Java Applet was added to Navigator 2.0, NetScape converted LiveScript into JavaScript, which was born now.

This article will begin with an interesting small program and introduce the basic syntax and functions of JavaScript. This interesting program is a ball collision simulation program, which can simulate elastic collision and Incomplete recovery of kinetic energy damage. If you want to know the ball collision processing program in this routine, you need to be familiar with coordinate rotation of vectors and some basic physics knowledge. If you have no idea about this, it doesn't matter, because the collision program between small balls is only a few functions, you just need to call it, which does not affect our learning of JavaScript. I want to write such a interesting routine with a few sides, but I hope you will be more interested in JavaScript.

Let's just talk about it. Let's start now.

Step 1: Prepare materials

Make two small ball pictures, one for each of the red and blue balls. The image format is GIF. You can use 3D software to create a three-dimensional ball image, and then convert it into GIF format, so that the program animation will be more realistic. It should be noted that the image background must be transparent, otherwise it will let people see the flaw. At last, a background image is required. The format of the image is the same as that of the image.

Step 2: Compile the homepage skeleton

1. Use the New command in NetObject ScriptBuilder to generate the skeleton of an HTML file. By the way, in the newly generated HTML file, change the text between the TITLE signs to "small ball collision simulation demo program ".

2. Add background images and small ball image resources.
Change the "BODY" flag to "background". In this statement, "background animated GIF" indicates the background pattern.

To load the image resources of a small ball, add the following two sentences between the logo and



The two HTML scripts have the same meaning, indicating that IMG is used to add image resources. The SRC attribute specifies the file name of the added image. The ID attribute specifies the object name of an image, which is an important attribute because it will be used in JavaScript programming in the future. In the first sentence, specify BallBlue as the object name of the image resource (you can think of it as a variable name ). The STYLE attribute specifies the STYLE of the image in the browser. The "position" switch is set to "absolute", so that the image can be located in the window in the absolute coordinate mode, rather than the text line mode.

This completes the compilation of the HTML part. Next we should use JavaScript to make the image work.


Step 3: Write JavaScript programs

1. the simulation program uses the SetTimeout () method of the window object to call the Move_Step () function cyclically to move the image. Move_Step () calculates the length and direction of the moving step based on the velocity vector. Collision processing is divided into two parts. The first is the collision processing of the ball against the wall. The processing function is Ball_Crash_Wall (), and the second is the collision processing between the sphere. The processing function is Ball_Crash_Ball (). You also need to set some collision flag variables to record the current collision status to avoid errors caused by simulation errors. Maybe you still don't understand why errors may cause errors. It doesn't matter, I will tell you later.

2. Use the style. pixelLeft and style. pixelTop attributes of the image object to specify the position of the image in the window.
These two attributes are the key to image motion. However, when calculating the Moving position of an image, instead of using it, the array variable BallCoord is used to record the current Coordinate Position of the image because of the attribute style. pixelLeft, style. pixelTop is an integer variable, and decimal points are generated in the calculation collision. If style is used directly. pixelLeft, style. besides errors, pixelTop records the position. The most important thing is that when some types of ball collisions occur at the edge of the window, the ball will be hit out of the screen. Array variables can be floating-point type used to store decimal numbers, thus avoiding errors.

(1) variable definition and program Initialization

JavaScript statements can be placed in the BODY area of an HTML file or in the header area. The difference is that pre-fabricated functions and global variables are usually placed in the HEAD area, for the statement calls in the BODY area, while the BODY area is generally placed in the initial statement of the program. The variable definition in JavsScript is relatively free, but it still needs to meet the basic rules defined first and then used.

1. Define global variables in the HEAD area:
Window_Top = 22 // the top position of the window.
Window_Left = 22 // left position of the window.
Window_Bottom = 294 // The bottom position of the window.
Window_Right = 590 // the right side of the window.
Setp_Proportion = 3.00 // speed amplification ratio.

BallCoord = new Array (2), new Array (2) // defines a two-dimensional Array to record the current coordinates of the two balls.

BallDiametre = new Array () // defines a one-dimensional Array and stores the diameter of the two balls. The values are 66 and 92, respectively.

BallMoveVector = new Array (), new Array (1,-2) // defines a two-dimensional Array used to record the velocity vectors of two balls, the second dimension stores the X and Y axes respectively.

CrashingWall = new Array (false, false), new Array (false, false )) // array CrashingWall is used for secondary calculation to avoid wall collision. The value is true, indicating that the current system is in the collision state. The initial value is false.

2. Complete the initial work of the program in the BODY area. The content is as follows:

Here you have seen a JavaScript program framework. The SCRIPT tells the browser that the following content is a SCRIPT program. Use LANGUAGE = "JavaScript" to indicate that the program LANGUAGE is JavaScript. In either the BODY or HEAD area, any JavaScript program must be placed between the flag. The new Array () is used in the program to define an Array bils, so as to store image objects in the future. In the following statement, bils [0] = BallBlue assigns the image object BallBlue to bils [0]. If you are careful, you will find that BallBlue is the name of the object specified in the image resource statement. Statement bils [0]. style. pixelTop = BallCoord [0] [0] = 100, and assign the value 100 to the array variable BallCoord [0] [0] and the style of the image object. pixelTop attribute. The coordinate array variable BallCoord [0] [0] obtains the initial value and specifies the initial top position of ball 1. The meanings of other statements are the same. The last sentence calls the Move_Step () function to move the ball one step.

(2) Move_Step ()

Compile the Move_Step () function in the HEAD area of the HTML file. The content of the function is as follows:
Function Move_Step (){
Ball_Crash_Ball () // call the collision processing function between balls.

Balls_Crash_Wall (0) // call the blue ball hitting Wall processing function
Balls_Crash_Wall (1) // call the red ball hitting Wall processing function

// Calculate the mobile step size
BallCoord [0] [0] + = BallMoveVector [0] [0] * Setp_Proportion
BallCoord [0] [1] + = BallMoveVector [0] [1] * Setp_Proportion
BallCoord [1] [0] + = BallMoveVector [1] [0] * Setp_Proportion
BallCoord [1] [1] + = BallMoveVector [1] [1] * Setp_Proportion
// Move one step
Bils [0]. style. pixelTop = BallCoord [0] [0]
Bils [0]. style. pixelLeft = BallCoord [0] [1]
Bils [1]. style. pixelTop = BallCoord [1] [0]
Bils [1]. style. pixelLeft = BallCoord [1] [1]
Window. setTimeout ("Move_Step ()", 100) // call the Move_Step () function again in 100 milliseconds
}
For most of the meanings of this function, you can see the comments here.

1 In the statement BallCoord [0] [0] + = BallMoveVector [0] [0] * Setp_Proportion, The BallMoveVector array stores the velocity vector. The Setp_Proportion variable holds the step size amplification ratio. The length of the moving step is obtained by multiplying BallMoveVector [0] [0] By Setp_Proportion. Add the original BallCoord [0] [0] value to the statement and then assign it to BallCoord [0] [0] itself to get the Moving position.

2. The statement window. setTimeout ("Move_Step ()", 100) indicates that the Move_Step () function is called again after 100 milliseconds. Now with the setTimeout () method, the program continues to loop.

Ball_Crash_Ball () is a collision processing function between small balls. You just need to call it. If you don't use it, the program can run the same way, but it does not have the ability to handle collision between balls. (The Ball_Crash_Ball () function calls the CrashEnd_Speed () and atan360 (x, y) functions, and uses the global variable crashingbils. Therefore, you must use it correctly, you must include all the functions and variables mentioned above into your program)


(3) Compile the wall collision processing function Balls_Crash_Wall () in the HEAD area ()

A simplified function is as follows:

Function Balls_Crash_Wall (I ){

If (BallCoord [I] [0] <= Window_Top)
BallMoveVector [I] [0] =-BallMoveVector [I] [0]

If (BallCoord [I] [1] <= Window_Left)
BallMoveVector [I] [1] =-BallMoveVector [I] [1]

If (BallCoord [I] [0] + BallDiametre [I]> = Window_Bottom)
BallMoveVector [I] [0] =-BallMoveVector [I] [0]

If (BallCoord [I] [1] + BallDiametre [I]> = Window_Right)
BallMoveVector [I] [1] =-BallMoveVector [I] [1]

}

The function first checks whether the ball has hit the wall. If so, it returns the reverse direction of the speed in the corresponding direction, while the size remains unchanged. However, this function may cause an error (the cause of the error is somewhat complicated. Here, we will only show you the error. Because the moving step of a ball is usually greater than one point, and simulation is performed discretely, errors may occur in some cases ). The array variable CrashingWall is used to identify the collision state. When the ball and the wall are in the collision state, the second collision between the ball and the wall cannot occur. The corresponding statement should also be changed, as shown in the first sentence.

If (BallCoord [I] [0] <= Window_Top)
{If (! CrashingWall [I] [0]) {BallMoveVector [I] [0] =-BallMoveVector [I] [0]}
CrashingWall [I] [0] = true
} Else CrashingWall [I] [0] = false

The type of the CrahingWall array in the statement is logical, which records whether the ball and the wall are colliding. When it is in the collision status, you do not have to reverse the ball's motion direction.

The preparation of this program is basically complete. For more information, see the original program and description on the CD. Select the menu Preview item in NetObject ScriptBuilder to run the program.

Note:
1. To run this routine, you must first install IE4.0 or later browsers or Netscape Navigator 4.0 or later browsers.

2. Collision processing tips: When two balls collide, calculate the angle between the two ball center and the X axis. Rotate the coordinates based on the angle. Map the original velocity vector to the coordinate after rotation. In this way, any collision between balls is converted to a center collision. The impulse theorem can be used to calculate the collision speed. Then, the coordinates are rotated to the original coordinates. Get the velocity vector after collision. Check whether the above text is a little annoying. In fact, this is not the case. In the program, only 11 rows of statements are used to complete all calculations.