"Cocos Creator (8)"--playing bricks (physics engine)

Return of missing persons

This tutorial is based on Cocos Creator1.5 Physics engine, write a simple brick game, as much as possible to speak a little, but now it is almost 11 o'clock, I have to sleep at 12 O, as if not much, this world ah, is a contradiction body.

A new project, named Brick-breaker,brick what meaning, is the meaning of bricks, every time I give engineering name, I can learn a new word.

The directory structure is as follows:

Game scene, setting canvas

Play a game background first

(because I've done it, I'm not going to do it again, so I'm going to turn it off if I don't have a node)

Build a physical layer to install something with physical properties in the game, set the anchor point to the lower left corner

It's time to learn the words, please take out your little notebook:

Wall: wall//The wall that will bounce when the ball hits
Ground: Ground//ball hits the ground, this game is over.
Brick_layout: Brick layout//This word we talked about before, we don't talk.
Ball: Balls//is the ball
Paddle: Propeller//This is specifically the white rectangle that controls the movement.

This wall is definitely going to have collision properties, in the Properties panel, add a physical component

Because our walls have top, left, and right three sides, we add three collision components (one node can have multiple collision components).

Edit a bit

The same ground, the same ball, the same pallet

(This separates the ground from the wall so that there may be different logic for the back wall and the ground)

Several physical nodes have now been edited for the collision bounding box, but have not yet edited their physical properties (CC. Rigidbody)

Start with the ball, click the Balls node, and in the property inspector you can see

The first parameter is checked to indicate that the collision callback is enabled, and a callback function can be written in the script.

Bullet: High-speed moving objects open, avoid penetrating, there is no tick

Type select dynamic,

Static: Will not be affected by the force, not affected by the speed, refers to the physical engine, we can still move the node to change the location
Kinematic: Unaffected by force, can be affected by speed
Dynamic: Affected by force, affected by velocity
Animated: It is said to be used in combination with animation, I have not understood ...

Why not choose kinematic? Leave a job.

The Gravity scale is set to 0 (the standard is 1, the value stands for proportions), i.e. no gravity.

Set line speed (1000,1000)

In the following collision assembly, the set friction (coefficient of friction) equals 0 (no friction), restitution (elasticity coefficient) equals 1 (no momentum loss)

Because the small ball is our main character, the collision between the right and left is the ball, so the collision properties are in the small ball this side of the set can be.

Also set the type of Wall,ground,paddle,brick to be static
Brick's tag is 1,
Ground's tag is 2,
Paddle's tag is 3,
Wall's tag bit 4

Here's a look at the script

Bricklayout.js

Cc. Class ({
    extends:cc.Component,

    properties: {
        padding:0,
        spacing:0,
        cols:0,
        brickprefab:cc. Prefab,
        bricksnumber:0,
    },

    init (bricksnumber) {
        this.node.removeAllChildren ();
        This.bricksnumber = Bricksnumber;
        for (Let i = 0; i < This.bricksnumber; i++) {let
            Bricknode = Cc.instantiate (this.brickprefab);
            Bricknode.parent = This.node;
            bricknode.x = this.padding + (i% this.cols) * (Bricknode.width + this.spacing) + bricknode.width/2;
            Bricknode.y =-this.padding-math.floor (i/this.cols) * (Bricknode.height + this.spacing)-BRICKNODE.HEIGHT/2;
        }
    }
});

Wrote a layout script that dynamically adds bricks, and the number of bricks that need to be added can be dynamically added to the layout node.

Brickprefab So, I'll default you'll do prefab.

Overpanel.js

Cc. Class ({
    extends:cc.Component,

    properties: {
        resultlabel:cc. Label,
        scorelabel:cc. Label,
    },

    //Use this for initialization
    onload:function () {

    },

    init (gamectl) {
        this.gamectl = Gamectl;
        This.node.active = false;
    },

    Show (Score,iswin) {
        this.node.active = true;
        if (Iswin) {
            this.resultLabel.string = ' you win! ';
        } else{
            this.resultLabel.string = ' you lose! ';
        }
        this.scoreLabel.string = Score+ ';
    },

    Onbtnrestart () {
        this.gameCtl.startGame ();}
);

End Interface

Paddle.js

Cc. Class ({
    extends:cc. Component,

    onload:function () {
        This.node.parent.on ("Touchmove", (event) = {
            //convert world coordinates to local coordinates let
            TouchPoint = This.node.parent.convertToNodeSpace (Event.getlocation ());
            this.node.x = touchpoint.x;})
    ,

    init () {
        this.node.x =;
    }

});

The pallet moves with the finger

Ball.js

Cc. Class ({
    extends:cc.Component,

    properties: {

    },

    init (gamectl) {
        this.gamectl = gamectl;
        This.node.position = Cc.v2 (360,270);//Initialize position
        this.getcomponent (CC. Rigidbody). linearvelocity = Cc.v2 (800,800);//initialization Speed
    },

    onbegincontact (contact, self, other) {
        switch ( Other.tag) {case
            1://ball touches brick
                this.gameCtl.onBallContactBrick (Self.node, other.node);
                break;
            Case 2://Ball touches ground
                this.gameCtl.onBallContactGround (Self.node, other.node);
                break;
            Case 3://Ball touches tray
                this.gameCtl.onBallContactPaddle (Self.node, other.node);
                break;
            Case 4://Ball touches
                The wall this.gameCtl.onBallContactWall (Self.node, other.node);
                break;
        }
    },
});

The ball touches other objects and lets gamectl handle it.

Gamectl.js

Const GameModel = require (' GameModel '); Cc. Class ({extends:cc. Component, properties: {gameview:require (' Gameview '), Ball:require (' Ball '), Paddle:requir  E (' paddle '), Bricklayout:require (' Bricklayout '), Overpanel:require (' Overpanel '),},//Use this For initialization onload:function () {///Android Return key exit Cc.systemEvent.on (CC. SystemEvent.EventType.KEY_DOWN, (event) = {if (Event.keycode = = = CC.
            Key.back) {cc.director.end ();
        }
        });
        This.physicsmanager = Cc.director.getPhysicsManager ();
        This.gamemodel = new GameModel ();

    This.startgame ();
    },//this.physicsmanager.debugdrawflags = 0; Cc.
    PhysicsManager.DrawBits.e_aabbBit | Cc.
    PhysicsManager.DrawBits.e_pairBit | Cc.
    PhysicsManager.DrawBits.e_centerOfMassBit | Cc.
    PhysicsManager.DrawBits.e_jointBit | Cc. 

    PhysicsManager.DrawBits.e_shapeBit//;Init () {this.physicsManager.enabled = true;

        This.gameModel.init ();
        This.gameView.init (this);
        This.ball.init (this);
        This.paddle.init ();
        This.brickLayout.init (This.gameModel.bricksNumber);

    This.overPanel.init (this);
    }, Startgame () {this.init ();
    }, Pausegame () {this.physicsManager.enabled = false;
    }, Resumegame () {this.physicsManager.enabled = true;
        }, Stopgame () {this.physicsManager.enabled = false;
    This.overPanel.show (this.gameModel.score, this.gameModel.bricksNumber = = = 0);
        }, Onballcontactbrick (Ballnode, bricknode) {bricknode.parent = null;
        This.gameModel.addScore (1);
        This.gameModel.minusBrick (1);
        This.gameView.updateScore (This.gameModel.score);
        if (this.gameModel.bricksNumber <= 0) {this.stopgame (); }}, Onballcontactground (Ballnode, Groundnode) {THIS.STOPGAme (); }, Onballcontactpaddle (Ballnode, Paddlenode) {}, Onballcontactwall (Ballnode, Bricknode) {}, OnD
    Estroy () {this.physicsManager.enabled = false; }

});

Gamectl hangs on canvas, guarantees the first execution, and drags the corresponding component into

Gameview.js

Cc. Class ({
    extends:cc.Component,

    properties: {
        scorelabel:cc. Label,
    },

    init (gamectl) {
        this.gamectl = gamectl;
        this.scoreLabel.string = ' 0 ';
    },

    Updatescore (score) {
        this.scoreLabel.string = score;
    }
});

Gamemodel.js

Cc. Class ({
    extends:cc. Component,

    properties: {
        score:0,
        bricksnumber:0,
    },

    init () {
        this.score = 0;
        This.bricksnumber =

    (), Addscore (score) {
        This.score + = score;
    },

    Minusbrick (n) {
        This.bricksnumber-= n;
    },

});

Try to write MVC, not standard, simple understanding is that model and view separation, communication through control.

Logically clear code is not too much to explain, right, right.

Source code here: Https://github.com/potato47/brick-breaker-master

Game Demo: http://119.29.40.244/brick-breaker/

Care for missing persons:

The "Pre-graduation programmer" series is being updated ... If you are not concerned, you will miss a genius of the growth process ... 233