7Game

Volleyball HTML5 Game using Panda

Recommended Posts

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 :blink:  :huh: . 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.  ;)

Share this post


Link to post
Share on other sites

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 :P

Share this post


Link to post
Share on other sites

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 :unsure: . 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 :wacko:  : 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..  :unsure: 

Thank You in advance.. Sorry for Bad English.  :(

cnjhT.png

 

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.