Learn the basics of javascript_ lightly and loosely

The history of JavaScript is short, but it develops rapidly. At first, Netscape developed the LiveScript language, which enabled it to have basic scripting capabilities for its navigator and Web server products. When the Java applet was added to Navigator 2.0, Netscape turned LiveScript into JavaScript, where JavaScript was born.

This article will start with an interesting little program to introduce the basic syntax and functionality of JavaScript. This interesting program is a small ball collision simulation program, it can simulate the elastic collision and kinetic energy damage of the incomplete recovery collision. If you want to understand the collision handler in this routine, you need to be familiar with the coordinate rotation of the vector and some basic physics knowledge. If you don't know anything about it, it doesn't matter, because the collision program between the balls is just a few functions, you just call it, it doesn't affect our learning of JavaScript. The reason to write this interesting routine with a bit of heterodoxy is that you want to add more interest to JavaScript.

Don't say much nonsense, let's start now.

The first step: preparation of materials

Make two small ball pictures, red ball, blue ball each one. The picture format is GIF. You can use 3D software to create a stereo ball picture, and then turn it into GIF format, so that the program animation will appear more lifelike. Note that the picture background must be transparent, otherwise it will let people see flaws. Finally, you need a background map, the picture format ditto.

Step Two: Write the homepage skeleton

1. Generate a skeleton of an HTML file with the new command in Netobject Scriptbuilder. By the way, in the newly generated HTML file, change the text between the title flag to the "Ball Collision simulation Demo program."

2. Add background pattern and small ball picture resources.
Change the body flag to the Background property in this statement to specify Window.gif as the background pattern.

To load the small ball picture resource, add the following sentences between the logo and



These two HTML scripts have exactly the same meaning, and the icon img is used to add a picture resource, where the SRC attribute indicates the file name of the picture you are adding. The id attribute indicates the object name of the picture, which is an important attribute, because it is later used in JavaScript programming. As in the first sentence, indicate the object name Ballblue is a picture resource (you can think of it as a variable name). The Style property indicates how the picture is styled in the browser, where the "position" switch is set to "absolute" so that the picture can be positioned in the window using absolute coordinate mode, not text line mode.

The HTML section is written to complete this. The next step is to use JavaScript to move the picture.


Step three: Write JavaScript programs

1. The emulator uses the Window object's settimeout () method to loop through the Move_step () function to move the picture, and Move_step () calculates the length and direction of the move step based on the speed vector. Collision processing is divided into two parts, the first is the ball to the wall collision treatment, its processing function is Ball_crash_wall (), the second is the collision between the ball processing, its processing function is Ball_crash_ball (). Also need to set some collision flag variables, record the current collision state to avoid errors caused by simulation errors, perhaps now you do not understand why errors will lead to errors, it does not matter, will slowly tell you later.

2. Picture objects Use property style.pixelleft, style.pixeltop Specify the bit of the picture on the window
, these two properties are the key to the motion of the picture. However, it is not used to calculate the position of the picture moving, but to use the array variable Ballcoord to record the current coordinate position of the picture, because the attribute style.pixelleft, Style.pixeltop is an integer variable, and there is a decimal generation in the calculation collision, so that if the direct Style.pixelleft, Style.pixeltop record location, in addition to errors, the most important thing is that at the edge of the window some type of collision between the ball, will produce small ball is knocked out of the screen error. The array variable can be a floating-point type, which is used to hold decimals, thus avoiding the occurrence of errors.

(i) Variable definition and initialization of the program

JavaScript statements can be placed in the main body area of the HTML file or in the header (Head area), the difference is the general layout of the heads area of prefabricated functions and global variables, to be used for body area statement calls, and body area generally put the program initial statement. The Javsscript variable definition is relatively free, but it still needs to satisfy the basic rules that are first defined and then used.

1. To define global variables in the head area:
Window_top = 22//window top position.
Window_left = 22//window left position.
Window_bottom = 294//window bottom position.
Window_right = 590//window right side position.
Setp_proportion = 3.00//speed magnification ratio.

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

Balldiametre = new Array (66,92)//defines a one-dimensional array that holds the diameter of the two spheres, with values of 66 and 92 respectively.

Ballmovevector = new Array (new Array (2,1), new Array (1,-2)) defines a two-dimensional array that records the velocity vectors of two balls, and the second dimension holds the X and Y axes respectively.

Crashingwall = new Array (new Array (false,false,false,false), new Array (false,false,false,false))//Array Crashingwall Two calculations to avoid wall collisions, with a value of true indicating that the current is in a collision state. The initial value is false.

2. Completes the initial work of the program in the body area. Its contents are as follows:

Here you've seen the framework of a JavaScript program. Sign script tells the browser that the following content is a script program that uses language= "JavaScript" to indicate that the program language is JavaScript. Any JavaScript program must be placed between flags, either in the body area or in the head area. The program uses the new array () to define an array balls to store the picture objects later. The Next statement balls[0] = ballblue The Picture object Ballblue to Balls[0], if you are careful, you will find that Ballblue is the object name that is loaded in the picture resource statement. Statement balls[0].style.pixeltop = ballcoord[0][0] = 100, while assigning a value of 100 to the array variable ballcoord[0][0] and the Style.pixeltop property of the Picture object. Thus the coordinate array variable ballcoord[0][0] Gets the initial value and specifies the initial top position of the ball 1. The rest of the statements have identical meanings. The last sentence calls the function move_step () Moves the ball one step.

(ii) One step move function move_step () explain

Writing the Move_step () function in the head area of an HTML file reads as follows:
function Move_step () {
Ball_crash_ball ()//Call ball-touch handler function

Balls_crash_wall (0)//call, Basketball touch wall processing function
Balls_crash_wall (1)//call red ball touch Wall handle function

Calculate Move Step
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
Balls[0].style.pixeltop = ballcoord[0][0]
Balls[0].style.pixelleft = ballcoord[0][1]
Balls[1].style.pixeltop = ballcoord[1][0]
Balls[1].style.pixelleft = ballcoord[1][1]
Window.settimeout ("Move_step ()", 100)//100 milliseconds after calling the Move_step () function again
}
Most of the meaning of the function, you can look at the comments, here only a few points to explain.

1 in the statement ballcoord[0][0] + = ballmovevector[0][0] * setp_proportion, the Ballmovevector array holds the speed vector. The setp_proportion variable holds the step magnification ratio, ballmovevector[0][0] multiplied by the setp_proportion to get the length of the move step. Finally, the statement plus ballcoord[0][0] The original value and then assigned 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 is constantly looping.

Ball_crash_ball () is the collision between the ball processing function, you just call is, if you do not use it, the program can run, but less to deal with collisions between the ball function. (The function crashend_speed () and atan360 (x,y) are called in the Ball_crash_ball () function, and the global variable crashingballs is used, so that it is used correctly. You must copy the above mentioned functions and variables into your program.


(iii) writing a wall collision handling function in the Head area Balls_crash_wall ()

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 determines whether the ball has touched the wall, and if it reverses the velocity in the corresponding direction, the size does not change. But this function is likely to have an error (the cause of the error is somewhat complicated, where the tip is only hint.) Because the size of the small ball movement is often greater than 1 points, and the simulation is discrete, so that in some cases the error occurs. An array variable crashingwall is required to identify the collision state, so that the ball and the wall in the collision state can not happen second ball and wall collision, the corresponding statement to change, such as the first sentence should be changed to

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 a logical type, recording whether the ball is colliding with the wall. When you are in a collision state, you do not have to reverse the direction of the ball movement.

To the preparation of the program is basically completed, the other details of the original CD-ROM program and instructions. Now select the menu preview item in Netobject Scriptbuilder to run the program.

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

2. Collision between the ball tip: When two balls collide, calculate the two-ball center line and the x-axis angle. The coordinates are rotated according to this angle. Map the original velocity vector to the rotated coordinates. Thus, the collision between the balls is transformed into the collision of the heart. The impulse theorem can be used to calculate the velocity of the collision. Then rotate the coordinates into the original coordinates. The velocity vector after the collision is available. Read the above text is not a bit annoying, in fact, not so, the program only used 11 lines of statements completed all the calculation.