Volleyball HTML5 Game using Panda

[7Game]

Hi! I have recently find #pandajs provides game Engine and gaming psychics and other gaming concepts. It  is very nicely implimented and too good all showcases live games  . I wanted to build a volleyball game using panda js. i have tried to understand the structure of that but its not more comfortable to understand  . i have seen panda tutorials, Panda Fiddler but not much explanation their    . I request here to guide me for developing the volleyball with #pandajs. i m new to gaming field. recently i have made small #html5 #games like #pacman,#tic-tac-toe, #parrallax horizontal with and without #pandajs.

So Help me to gave rough path like where to start and where to end what classes needed for this game.  

Thank You in advance. 

[SkyzohKey]

Hello

 

I'm an absolute begginer with PandaJS but when I started to use it, I get on the fiddler page and then tried to use and understand all of the samples, then I get into GitHub and searched for "panda.js" which gived me a lot of game samples. Then I readed them all (including all of them files).

 

More later I realized that if I wanted to learn I will have to read and understand the entire way PandaJS works, started to read all the engine files and then I started my game ^^

Hope my bad english will help you to start with this awesome engine

 

You can say enpu for that

[7Game]

Yes! ThanosS  . You are right Fiddler gave new way examples for Panda JS.   I learn more about them from that example. I have made little one but at right now i fixed in one error. i know the problem but how to fix didn't know  . Here i m posting the game layout & CODE. Layout Design are just development purpose after developed professional design attach and publish. Ball Works proper. only players want to modify..

Problem  : Player1 goes to Player2 side which i wanted to restrict it. and jump the Player on UP key EVENT i have done 50% Completed. 

Plz Help me to Fix it..   

Thank You in advance.. Sorry for Bad English. 

 

Main.JS

game.module(    'game.main').require(    'plugins.box2d').body(function() {        game.addAsset('ball.png');    game.addAsset('background.png');    game.addAsset('player1.png');    game.addAsset('player2.png');    game.createClass('Wall', 'Graphics', {        init: function(x, y, width, height) {                        this._super();                        //draw shapes. This is done for demonstration purposes only so you know where the walls are.            this.position = {x: x, y: y};            //set linestyle and draw rectangle            this.lineStyle (1, 0x92C9EF);            this.beginFill(0x92C9EF, 1);            this.drawRect(0, 0, width, height);            this.endFill();            this.drawRect(0, 0, width, height);   //x, y, width, height            this.addTo(game.scene.stage);                      //create body definition (the 'blueprint'for the actual body).            var bodyDef = new game.Box2D.BodyDef();            bodyDef.position = new game.Box2D.Vec2(                (x + width / 2) * game.Box2D.SCALE,                (y + height / 2) * game.Box2D.SCALE            );             //We make the wall a StaticBody (which is actually the default type).            //Mobile bodies are defined as b2_dynamicBody as we will see later on            bodyDef.type = game.Box2D.Body.b2_staticBody;               //Now create the actual body from the definition.            this.body = game.scene.Box2Dworld.CreateBody(bodyDef);                        //In order to handle collision, we have to add a fixture (= the shape) of the body.            //First we set up a fixture definition which will be used to create the actual fixture later on.            //(Starting to see the pattern already?)            var fixtureDef = new game.Box2D.FixtureDef;            fixtureDef.shape = new game.Box2D.PolygonShape.AsBox(                width / 2 * game.Box2D.SCALE,                height / 2 * game.Box2D.SCALE            );            fixtureDef.density = 0;            this.body.CreateFixture(fixtureDef);            //That's it! We don't have to add it to the world anymore because that is dealt with during the construction proces already.            game.scene.addObject(this);                    }            });        game.createClass('Ball', 'Sprite', {                init: function(x, y) {            this._super('ball.png', x, y, {anchor: { x: 0.5, y: 0.5 }});            game.scene.addObject(this);            this.addTo(game.scene.stage);            //create a body using a body definition            var bodyDef = new game.Box2D.BodyDef();            bodyDef.position = new game.Box2D.Vec2(                (this.position.x + this.width / 2) * game.Box2D.SCALE,                (this.position.y + this.height / 2) * game.Box2D.SCALE            );             bodyDef.type = game.Box2D.Body.b2_dynamicBody;  //type is dynamicBody now!            this.body = game.scene.Box2Dworld.CreateBody(bodyDef);            //and the fixture            var fixtureDef = new game.Box2D.FixtureDef;            fixtureDef.shape = new game.Box2D.CircleShape(30 * game.Box2D.SCALE); //15 is the radius of the ball            //The following features add some extra juice to our ball so it will respond in a more realistic way            fixtureDef.density = 0.1;       //density has influence on collisions            fixtureDef.friction = 0.5;      //A higher friction makes the body slow down on contact and during movement. (normal range: 0-1).             fixtureDef.restitution = 0.9;   //=Bounciness (range: 0-1).            this.body.CreateFixture(fixtureDef);        },                update: function(){            //The box2D world keeps track of the movement and position of the body.            //use the update function to get the sprite in the right spot            var p = this.body.GetPosition();            this.position.x = p.x / game.Box2D.SCALE;            this.position.y = p.y / game.Box2D.SCALE;            this.rotation = this.body.GetAngle().round(2);        }    });        game.createClass('Player1', 'Sprite', {                init: function(x, y) {           this._super('player1.png', game.system.width/4, game.system.height-100, {anchor: { x: 0.5, y: 0.5 }});            game.scene.addObject(this);            this.addTo(game.scene.stage);            //create a body using a body definition            var bodyDef = new game.Box2D.BodyDef();            bodyDef.position = new game.Box2D.Vec2(                (this.position.x + this.width / 2) * game.Box2D.SCALE,                (this.position.y + this.height / 2) * game.Box2D.SCALE            );             bodyDef.type = game.Box2D.Body.b2_dynamicBody;  //type is dynamicBody now!            this.body = game.scene.Box2Dworld.CreateBody(bodyDef);            //and the fixture            var fixtureDef = new game.Box2D.FixtureDef;            fixtureDef.shape = new game.Box2D.CircleShape(this.width / 2 * game.Box2D.SCALE); //the radius of the ball            //The following features add some extra juice to our ball so it will respond in a more realistic way            fixtureDef.density = 0.5;     //density has influence on collisions            fixtureDef.friction = 0.5;      //A higher friction makes the body slow down on contact and during movement. (normal range: 0-1).             fixtureDef.restitution = 0.1;   //=Bounciness (range: 0-1).            this.body.CreateFixture(fixtureDef);        },                update: function(){            //The box2D world keeps track of the movement and position of the body.            //use the update function to get the sprite in the right spot            var p = this.body.GetPosition();            this.position.x = p.x / game.Box2D.SCALE;            this.position.y = p.y / game.Box2D.SCALE;                        if(game.keyboard.down("W")){                if(this.body.GetPosition().y >= 50)                {                    //console.log(this.body.GetPosition());                    this.body.ApplyForce( new  game.Box2D.Vec2(0, -5000), this.body.GetPosition());                }                else                {                    this.body.ApplyForce( new  game.Box2D.Vec2(0, 100000), this.body.GetPosition());                   }                            }            if(game.keyboard.down("S")){                this.body.ApplyForce( new  game.Box2D.Vec2(0, 2000), this.body.GetPosition());            }            if(game.keyboard.down("A")){                this.body.ApplyForce( new  game.Box2D.Vec2(-2000, 0), this.body.GetPosition());            }            if(game.keyboard.down("D")){                this.body.ApplyForce( new  game.Box2D.Vec2(2000, 0), this.body.GetPosition());            }        }            });        game.createClass('Player2', 'Sprite', {                init: function(x, y) {            this._super('player2.png', (game.system.width/2)+(game.system.width/4), game.system.height-100, {anchor: { x: 0.5, y: 0.5 }});            game.scene.addObject(this);            this.addTo(game.scene.stage);            //create a body using a body definition            var bodyDef = new game.Box2D.BodyDef();            bodyDef.position = new game.Box2D.Vec2(                (this.position.x + this.width / 2) * game.Box2D.SCALE,                (this.position.y + this.height / 2) * game.Box2D.SCALE            );             bodyDef.type = game.Box2D.Body.b2_dynamicBody;  //type is dynamicBody now!            this.body = game.scene.Box2Dworld.CreateBody(bodyDef);            //and the fixture            var fixtureDef = new game.Box2D.FixtureDef;            fixtureDef.shape = new game.Box2D.CircleShape(this.width / 2 * game.Box2D.SCALE); //the radius of the ball            //The following features add some extra juice to our ball so it will respond in a more realistic way            fixtureDef.density = 0.5;     //density has influence on collisions            fixtureDef.friction = 0.5;      //A higher friction makes the body slow down on contact and during movement. (normal range: 0-1).             fixtureDef.restitution = 0.1;   //=Bounciness (range: 0-1).            this.body.CreateFixture(fixtureDef);        },                update: function(){            //The box2D world keeps track of the movement and position of the body.            //use the update function to get the sprite in the right spot            var p = this.body.GetPosition();            this.position.x = p.x / game.Box2D.SCALE;            this.position.y = p.y / game.Box2D.SCALE;            if(game.keyboard.down("UP")){                this.body.ApplyForce( new  game.Box2D.Vec2(0, -2000), this.body.GetPosition());            }            if(game.keyboard.down("DOWN")){                this.body.ApplyForce( new  game.Box2D.Vec2(0, 2000), this.body.GetPosition());            }            if(game.keyboard.down("LEFT")){                this.body.ApplyForce( new  game.Box2D.Vec2(-2000, 0), this.body.GetPosition());            }            if(game.keyboard.down("RIGHT")){                this.body.ApplyForce( new  game.Box2D.Vec2(2000, 0), this.body.GetPosition());            }        }            });        game.createScene('Main', {        backgroundColor: 0xe1d4a7,                init: function() {            //create gravity vector            var gravity = new game.Box2D.Vec2( 0, 100 * game.Box2D.SCALE );// gravity pull x, y            //and now create world            this.Box2Dworld = new game.Box2D.World(gravity, true);                        //Draw A Volley Net            var graphics = new game.Graphics();            graphics.lineStyle (30, 0xff9900);            graphics.moveTo(game.system.width/2,game.system.height/2+100);            graphics.lineTo(game.system.width/2,game.system.height);//draw line to the absolute coordinate x, y            this.stage.addChild(graphics);            //Add Background             var background = new game.Sprite('background.png').addTo(this.stage);            //add walls             var thickness = 5;            //var wall_top    = new game.Wall( 100,  170, 200,50);             var wall_top    = new game.Wall( 0,  0, game.system.width,  thickness);             var wall_left   = new game.Wall( 0, thickness, thickness,  game.system.height - 2 * thickness);            var wall_right  = new game.Wall( game.system.width - thickness, thickness, thickness,  game.system.height - 2 * thickness);            var wall_bottom = new game.Wall( 0,  game.system.height - thickness, game.system.width,  thickness);             var wall_middle = new game.Wall( game.system.width/2,  game.system.height/2+100, thickness*3,  game.system.height-thickness);             //add a ball            var ball1 = new game.Ball( Math.random()*(game.system.width-200) + 100, Math.random()*250 + 100);                                    var player1 = new game.Player1(300,300);            var player2 = new game.Player2(300,300);                                    //Score Text                    var score = new game.PIXI.Text("::Score::", { font: '50px Comic Sans MS', stroke: '#E7E7E4', strokeThickness:2});                    score.position.x=game.system.width/2-100;                    score.position.y=10;                    this.stage.addChild(score);                    //Score Text Player1                    var scoreplayer1 = new game.PIXI.Text("0", { font: '50px Comic Sans MS', stroke: '#E7E7E4', strokeThickness:2});                    scoreplayer1.position.x=150;                    scoreplayer1.position.y=10;                    this.stage.addChild(scoreplayer1);                    //Score Text Player2                    var scoreplayer2 = new game.PIXI.Text("0", { font: '50px Comic Sans MS', stroke: '#E7E7E4', strokeThickness:2});                    scoreplayer2.position.x=game.system.width-150;                    scoreplayer2.position.y=10;                    this.stage.addChild(scoreplayer2);        },                update: function(){            this._super();            //The following code is needed to update the time in the box2d world.            //The values below are fine as default values, feel free to look up more info in the reference.            this.Box2Dworld.Step(                game.system.delta, //time elapsed                6,  //world Velocity Iterations                6   //world Position Iterations                         );            this.Box2Dworld.ClearForces();  //The world has been updated. Now get rid of forces that had been set during the previous cicle.        }     }); });

[SkyzohKey]

I think you should take an eyes to this part of the Player2 Class:

bodyDef.position = new game.Box2D.Vec2(  (this.position.x + this.width / 2) * game.Box2D.SCALE,  (this.position.y + this.height / 2) * game.Box2D.SCALE);