Jump to content

Box2d revoluteJoint - Knife Hit game


Recommended Posts

Hi all.

I want to create a game like Knife Hit


I create a circle at center, some items around it and move follow the circle.

I use Box2d physic for them. 

    let angel = pos * 360 / total; // i have 18 position around center circle
    if (angel == 360) {
        angel = 0;
    let posX = Math.sin(angel * (Math.PI /180)) * IG.ITEM_COIN_RADIAN;
    let posY = Math.cos(angel * (Math.PI /180)) * IG.ITEM_COIN_RADIAN;
    item.revo = this.game.physics.box2d.revoluteJoint(circle, item, 0, 0, posX, posY, 0, 5e4, true, 0, 0, true);

Then when the knife hit the circle, i also make it move follow the circle

if (hit) {
 knife.revo = this.game.physics.box2d.revoluteJoint(circle, knife, 0, 0, 0, -(this.game.height * 190 / 1280), 0, 5e4, true);

I set same motor speed. But the knife rotate faster items and it hits all items while the circle are rotating?

Position of the knife as also changes as well from it hits the circle

I want to keep knife and items have fixed position on circle and move with same direction and speed with circle.

Please help me

Thanks so much

Link to comment
Share on other sites

Hi, using Box2D for such game is overkill... You do not need physics simulation for this game.

Make wooden circle as Phaser.Group and place it into world space. Then throw knives in world space and when its blade tip position is less or equal to circle center minus radius, then calculate its position in circle space and make it child of circle Phaser.Group.

Here is image of result & minimal working code for game:


<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Knife hit</title>
    <link rel="stylesheet" href="css/style.css">

    <script src='js/phaser.js'></script>


        var game = new Phaser.Game(800, 600, Phaser.AUTO, "phaser-example", {

            preload: function () {

                // circle with radius 100 pixels
                game.load.image("circle", "assets/circle.png");
                // knife sprite 15 x 50 pixels
                game.load.image("knife", "assets/knife.png");

            create: function() {

                game.stage.backgroundColor = 0x4d4d4d;

                // knife
                this.knife = this.add.sprite(400, 500, "knife");
                this.knife.anchor.set(0.5, 0.1);

                // circle
                this.circle = this.add.sprite(400, 150, "circle");

                // rotate circle
                this.add.tween(this.circle).to({ angle: 360 }, 2500, Phaser.Easing.Linear.None, true, 0, -1);

            update: function () {

                // is knife already child of circle?
                if (this.knife.parent === this.circle) {

                // move knife
                this.knife.y -= 200 * game.time.elapsedMS / 1000;

                // check hit
                if (this.knife.y - this.circle.y <= 100) {

                    // move knife into circle space
                    this.knife.position.add(-this.circle.x, -this.circle.y);
                    this.knife.position.rotate(0, 0, -this.circle.angle, true);
                    this.knife.angle = this.circle.angle;

                    // make circle parent of knife




Link to comment
Share on other sites

Thanks so much Tom.

I also think about this solution. Don't use Box2D

Truly, the project i joined, they are using Box2D, but i don't have experience with it. So that is reason I post this topic.

If we still want to use Box2D, can you give me a advice?

Thanks so much.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...