Use the jquery-based gamequery plug-in to create a JS table tennis game _ jquery-js tutorial

Jquery is now popular, and javascript games are becoming more and more popular. Although html5 is now available, javascript is needed to do something about html5, therefore, it is very important to learn js well. I suggest you first learn basic JS and then jquery, which will better accept new things. today, we are trying to create a js classic game and a table tennis game. This game is probably the most I have done. I have used xna, flash, and js to make the same one. Upload the image first, or you will not know what it is.
Its demo address is: http://www.lovewebgames.com/demo/gamepingbang/
The technology used is jquery + gamequery, which everyone knows. This article focuses on gamequery. gamequery is a jquery plug-in. its official website is:
Http://gamequery.onaluf.org/, its role is to more easily develop JS games, you can go to its website to see, there are a lot of cases, including the JS version of the king.
The language organization capability is a little poor, so I won't say much about it. Let's go to the code!

The Code is as follows:

Script
Var game = function (){
Var private = {};
Private. PLAYGROUND_WIDTH = 300;
Private. PLAYGROUND_HEIGHT = 400;
Private. status =-1;
Private. speed = 30;
Var get = function (key ){
Return private [key];
}
Var set = function (key, val ){
Private [key] = val;
}
Var playground;
Return {
Init: function (){
$ ("# Gradeinfo"). remove ();
Playground = $ ("# playground "). playground ({height: get ("PLAYGROUND_HEIGHT"), width: get ("PLAYGROUND_WIDTH"), RefreshRate: get ("speed ")});
('{Playground'{.css ('width', get ('playground _ width '));
('{Playground'{.css ('height', get ('playground _ height '));
Comment ('{playground'{.css ('position', 'relative ');
('{Playground'{.css ('border', '1px solid # ccc ');
This. initBall ();
This. initPlayer ();
$ ("# Sceengraph" ).css ("visibility", "visible ");
$ ('# Player'). get (0). gameQuery. score = 0;
Var classObj = this;
$ (). Playground (). registerCallback (function (){
Var status = get ('status ');
If (status> 0 ){
ClassObj. renderBall ();
}
}, Get ("speed "));
},
InitBall: function (){
$ ("# Ball"). remove ();
Playground. addSprite ('ball', {animation: $. gameQuery. Animation ({imageURL: "./blank.gif"}), width: 10, height: 10 });
$ ('# Ball'). get (0). gameQuery. velX = 4;
$ ('# Ball'). get (0). gameQuery. velY = 4;
$ ("# Ball" ).css ("top", get ('playground _ height')-20)
$ ("# Ball" ).css ("left", (get ('playground _ width')-10)/2)
},
InitPlayer: function (){
$ ("# Player"). remove ();
Playground. addSprite ("player", {animation: $. gameQuery. animation ({imageURL :". /blank.gif "}), width: 50, height: 8, posx :( get ('playground _ width')-50)/2, posy: get ('playground _ height ') -10 });
$ ("# Player"). addClass ("player ");
},
RenderBall: function (){
Var ballPosition = $ ('# ball'). position ();
Var PLAYGROUND_WIDTH = get ('playground _ width ');
Var PLAYGROUND_HEIGHT = get ('playground _ height ');
BallPosition. top-= $ ('# ball'). get (0). gameQuery. velY;
BallPosition. left + = $ ('# ball'). get (0). gameQuery. velX;
Certificate ('{ball'}.css ('top', ballPosition. top );
(('{Ball'}.css ('left', ballPosition. left );
If (ballPosition. top <= 0 ){
$ ('# Ball'). get (0). gameQuery. velY =-$ ('# ball'). get (0). gameQuery. velY;
}
If (ballPosition. left <= 0 | ballPosition. left + $ ('# ball'). width ()> = PLAYGROUND_WIDTH ){
$ ('# Ball'). get (0). gameQuery. velX =-$ ('# ball'). get (0). gameQuery. velX;
}
$ ("# Ball"). collision ("# player"). each (function (){
$ ('# Ball'). get (0). gameQuery. velY =-$ ('# ball'). get (0). gameQuery. velY;
$ ('# Player'). get (0). gameQuery. score ++;
});
If (ballPosition. top + $ ('# ball'). height ()> = PLAYGROUND_HEIGHT ){
Playground. addSprite ("gradeinfo", {width: 100, height: 80, posx: 100, posy: 100 });
$ ("# Gradeinfo" developer.html ("the game is over!
Score: "+ $ ('# player'). get (0). gameQuery. score );
Set ('status',-1 );
}
},
Pause: function (){
If (get ('status') = 0 ){
Set ('status', 1 );
} Else {
Set ('status', 0 );
}
},
KeyDownHandler: function (evt ){
// Console. log (evt );
Var thisObj = this;
Switch (evt. keyCode ){
Case 13:
If (get ('status') =-1 ){
This. start ();
} Else {
This. pause ();
}
Break;
Case 37:
If (! This. moveStaus ){
This. moveStaus = window. setInterval (function () {thisObj. movePlayer ('# player',-4) ;}, 20 );
}
Break;
Case 39:
If (! This. moveStaus ){
This. moveStaus = window. setInterval (function () {thisObj. movePlayer ('# player', 4) ;}, 20 );
}
Break;
}
},
KeyUpHandler: function (evt ){
Window. clearInterval (this. moveStaus );
This. moveStaus = null;
},
MovePlayer: function (player, dir ){
If (get ('status') = 1 ){
Var pos = $ (player). position ();
Var newPos = pos. left + dir;
If (newPos> 0 & newPos + $ (player). width () <get ('playground _ width ')){
((Player).css ('left', newPos );
}
}
},
Start: function (){
If (get ('status') =-1 ){
Set ('status', 1 );
$ (). Playground (). startGame (function (){
$ ("# Welcome"). remove ();
});
}
}
}
}()
$ (Function (){
Game. init ();
$ (Document). keydown (function (evt ){
Game. keyDownHandler (evt );
});
$ (Document). keyup (function (evt ){
Game. keyUpHandler (evt );
});
});
Script

Then let's start to explain:
The first is playground. This function definition is used to display game p. The definition is 300*400. The third parameter is the update rate. The default value is 30.


Playground. addSprite is used to add genie in game scenarios. This game is mainly a ball and a board. In this way, the game is half done, and the speed is added to the Genie. The gameQuery of the jquery object. obj. $ () is written here (). gameQuery. velX, then calling renderBall to perform ball movement, then monitoring the motion of the key control panel, and finally detecting collision.
The collision between the ball and the board, the collision between the ball and the wall, gamequery provides a method to detect, collision (filter), such:

The Code is as follows:

$ ("# Ball"). collision ("# player"). each (function (){
$ ('# Ball'). get (0). gameQuery. velY =-$ ('# ball'). get (0). gameQuery. velY;
$ ('# Player'). get (0). gameQuery. score ++;
});

After the collision, the Y axis direction is changed.


Http://gamequery.onaluf.org/api.php
Here, we can see that its APIs are basically all available in the game. Let's take a look at the example and see if it's easy? Since this was done a few years ago, I am not clear about it. If you are interested, you can study it. There is also a tutorial: http://gamequery.onaluf.org/tutorials/1/