A simple table tennis game made with javascript

When I was just learning JS for a week, instructor Li said that I could write a table tennis game by myself now, and then I thought it would take two hours to write it out, after writing it, I found that it was really easy to write a lot of things. After that, I am very happy to have a lecture with Miss Li!
At that time, I mainly talked about the following aspects: 1. Principle 2. Implementation 3. content.
Principle: 1. Let the ball always crash and rebound. 2. Use the keyboard to control the round-trip movement of the camera. 3. Determine whether to win or lose.
Implementation: 1. In order to achieve the rebound of the ball, you need to write two methods: move up and down and move left and right.
2. Four methods should be written to achieve the left and right movements of the racket: The Left Movement of the green racket, the right movement of the Black racket, and the right movement of the racket.
3. In order to control the movement of the camera through the keyboard, you need to write a method to implement this keyboard event.
Content:
1. Implementation of collision rebound.
2. Determine whether to win or lose.
3. How to move the camera.
4. Implement Keyboard Events.
Function move_lr () {// move the ball left and right to determine whether to win
}
Function move_td () {// move the ball up or down
}
Function move_t_l () {// move left on the green side
}
Function move_t_r () {// move the green square right

}
Function move_d_l () {// black left
}
Function move_d_r () {// move the black side right
}
Function keyDown (e) {// keyboard event
}
Function onload (){
}
Some JS Code is as follows:
 
Function move_lr () {// move the ball left and right
If (lr ){
If (wscroll <= wid ){
Wscroll ++;
Divs [2]. style. left = wscroll + "px ";
}
Else
Lr = false;
}
Else {
If (wscroll> = 0 ){
Wscroll --;
Divs [2]. style. left = wscroll + "px ";
}
Else
Lr = true;
}
If (hscroll = 20 ){
If (wscroll> = top_l-20 & wscroll <= top_r ){
Td = true;
}

Else {
ClearInterval (time1 );
ClearInterval (time2 );
Alert ("The Green Party lost !! Replay press F5 !!! ");
}
}
Else if (hscroll = 260 ){
If (wscroll >=down_l-20 & wscroll <= down_r)
Td = false;
Else {
ClearInterval (time1 );
ClearInterval (time2 );
Alert ("the black party lost and re-played press F5 !!! ");
}
}
}
 
Function move_td () {// move the ball up or down
If (td ){
If (hscroll <= hei)
{
Hscroll ++;
Divs [2]. style. top = hscroll + "px ";
}
Else
Td = false;
}
Else {
If (hscroll> 0)
{
Hscroll --;
Divs [2]. style. top = hscroll + "px ";
}
Else
Td = true;
}
}
Function move_t_l (){
If (top_l <160 ){
Top_l + = 3;
Top_r + = 3;
Divs [1]. style. left = top_l + "px ";
}
}
Function move_t_r (){
If (top_l> 0 ){
Top_l-= 3;
Top_r-= 3;
Divs [1]. style. left = top_l + "px ";
}
}
Function move_d_l (){
If (download_l <160 ){
Down_l + = 3;
Down_r + = 3;
Divs [3]. style. left = down_l + "px ";
}
}
Function move_d_r (){
If (down_l> 0 ){
Down_l-= 3;
Down_r-= 3;
Divs [3]. style. left = down_l + "px ";
}
}
Function keyDown (e ){
// Var keycode = e. which; // obtain the value corresponding to the keyboard.
Var realkey = String. fromCharCode (e. which); // obtain the letter corresponding to the keyboard.
// Var rr = realkey;
Switch (realkey ){
Case "W ":
Move_t_l ();
Break;
Case "E ":
Move_t_r ();
Break;
Case "":
Move_d_l ();
Break;
Case "D ":
Move_d_r ();
Break;
}
}
Function onload (){

Divs = document. getElementsByTagName ("div ");
Wid = divs [0]. clientWidth-divs [2]. offsetWidth;
Hei = divs [0]. clientHeight-divs [2]. offsetHeight;
Wscroll = divs [2]. offsetLeft;
Hscroll = divs [2]. offsetTop;
Top_l = divs [1]. offsetLeft;
Top_r = top_l + 100;
Down_l = divs [3]. offsetLeft;
Down_r = down_l + 100;
Time1 = setInterval ("move_lr ()", 10 );
Time2 = setInterval ("move_td ()", 10 );
Document. onkeydown = keyDown;
}