Using jquery based Gamequery plug-ins to do JS table tennis game _jquery

I suggest that you first learn some basic JS, learn jquery again, it will be better to accept something new. Today we will try to do a JS classic game, play table tennis game, this game is probably the most times I have done, I have used XNA, Flash, JS have done the same section. Take a screenshot first, otherwise everyone doesn't know what it is.
Its demo address is: http://www.lovewebgames.com/demo/gamepingbang/
The technology used is jquery+gamequery, jquery everybody knows what it is, this article focuses on the next gamequery,gamequery is a jquery plug-in, its official web site is:
http://gamequery.onaluf.org/, its role is to more easily develop JS games, we can go to its site to see, there are a lot of cases, including the JS version of the boxing emperor.
Language organization ability is a bit bad, don't say more, on the code!

Copy Code code 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 '));
$ (' #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;
$ (' #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"). HTML ("Game over!<br/> 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>

And then we'll start by explaining:
The first is playground, which is defined to be used to display the game Div, where the definition is 300*400, and the third parameter is the refresh rate, which defaults to 30.


Playground.addsprite is to add the wizard in the game scene, this game is mainly a small ball, a board. In this way, the game is half done, and then add speed to the wizard, jquery object gamequery.obj on it, here is the $ (). Gamequery.velx, then call Renderball for ball movement, then monitor the movement of the Button control Board, The last is to detect collisions.
Ball and plate collision, ball and wall collision, Gamequery provides a way to detect, collision (filter), such as:

Copy Code code as follows:

$ ("#ball"). Collision ("#player"). each (function () {
$ (' #ball '). Get (0). gamequery.vely =-$ (' #ball '). Get (0). gamequery.vely;
$ (' #player '). Get (0). gamequery.score++;
});

The direction of the Y axis is changed after this collision.


http://gamequery.onaluf.org/api.php
Here, you can see its API, basically the game has it all, look at the example to understand, is not very simple? Since this thing was done a few years ago, I also can not speak clearly, interested in the study. Here's a tutorial: http://gamequery.onaluf.org/tutorials/1/