A simple table tennis game made with javascript

Source: Internet
Author: User

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;
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.