DWQA QuestionsCategory: ProgramHow to judge the movement direction of the small ball and the square after hitting in the brick game?
csdoker asked 1 month ago

JavaScript + Canvas is being used to implement a brick game. The idea for reference of collision algorithm is https://www.zhihu.com/questio…
Now the question is how to determine the direction of the ball’s next movement after detecting the collision between the ball and the rectangular block.
I think there are two situations here. The first one is that the ball bounces from four sides up and down and then keeps its velocity in one direction (e.g. x axis) unchanged and the velocity in the other direction (e.g. y axis) negative so that the ball has a rebound effect (similar to mirror rebound).
In the second case, I think it should be from the four corners of the impact at this time should take the negative velocity in both directions of the ball will “bounce back” in the direction of the movement.
The first situation is very good. The key is how to judge the second situation. I don’t know what to use to judge whether the ball is the four corners of the impact.
If the train of thought is wrong, please correct it.
/Update of 2017-8-10/
Using the angle method I found in the commentary, we realized the judgment of edge and angle impact. But the new problem is that when I move the position of the ball, I can judge whether it collides or not. Sometimes the position of the ball has already been in the brick to judge the impact, which will result in the ghost-animal effect of the dead cycle of the ball moving in the brick…. Then I found an algorithm called “Separation Axis Theorem”, which seems to be able to determine the minimum translation.
But the code in these two links is not very clear. Can Dashen simply use js to write the algorithm of collision between rectangle and circle by using the separation axis theorem? Including the effect of rebound after collision (i.e. along the opposite direction of the minimum translation)

5 Answers
Best Answer
liuyib answered 1 month ago

I’ve been playing this game recently, and the hardest bug I’ve ever encountered is:The ghost and animal effect of the ball moving continuously in the bricksThis problem has nothing to do with the algorithm. Later, I found a solution in the source code of an open-source brick-playing game. Here’s a brief description: after the ball and the brick collide, the speed is reversed, so before the collision, the distance between the center of the ball and the center of the brick must be greater than the distance between the center of the next ball and the center of the brick, and the center coordinate of the next ball is through.Current coordinates + velocityCalculated. Text description is not easy to understand. Look at the code:

If (collision) {// Collision detection
  Var ballCenter = ball. y + ball. height / 2; // Vertical coordinates of the center of the ball
  Var brick center = brick. y + brick. height / 2; // vertical coordinates of the center of the brick
  // The ball moves toward the brick and the velocity reverses.
  if ((ballCenter - brickCenter ) > (ballCenter + speedY - brickCenter )) {
    ball.speedY *= -1;
  } Other {// The ball moves with the brick on its back. At this time, it is still possible to detect the collision between the ball and the brick.
           // If the reverse speed is still taken, there will be a ghost and animal bug that the ball gets stuck in the brick.
    ball.speedY *= 1;

Generally speaking, after the collision is detected, the movement trend of the ball is detected whether it is far from the brick or near the brick. If it is near, the velocity will be reversed, and if it is far away, the direction of the velocity will not change.
Originally, the bug that the ball will enter the brick is due to the direct reverse velocity after the collision is detected, so when the movement is faster, the “pixel penetration” will occur. That is to say, after the reverse velocity, the ball may still overlap with the brick, so that the speed will reverse again, resulting in the ghost and animal effect of the ball moving continuously in the brick.

liuyib replied 1 month ago

Yesterday, I finished the game. I feel good about myself. The whole logic refers to the source code of the little chrome dinosaur game. Because I read the source code of the little chrome dinosaur some time ago, I followed its train of thought.

liuyib replied 1 month ago

By the way, I changed my mind to solve the bug of small ball block. When the velocity is reversed, don’t multiply negative one directly.

liuyib replied 1 month ago

Source code you go to my GitHub to see:https://github.com/liuyib/my-…At present, I’ve only done part of the brick game. If there are problems, we can communicate with each other.

CRIMX answered 1 month ago

When colliding | h | + | R |= | V | it’s just the corner.

jokester answered 1 month ago

After obtaining the shortest distance vector, the collision point can be further obtained, that is, the collision point.Vector P-vector uThe point that you get. When colliding at an angle, the collision point should also be at the corner of the rectangle.
In addition, “the ball will bounce back in the direction of the movement” is inconsistent with life experience, you can try to roll a ball towards the table foot to see. You may need to think about the force and movement of the ball.

duotemplar answered 1 month ago

Add an AABB surround to your bricks. Actually, in the game development, it will not really be implemented according to the laws of physics. Simple way, you can add a circle or rectangle to your bricks, whose radius is larger than your real bricks, so there will be no small balls falling into the bricks.
This kind of game, whether to follow the physics is secondary, rapid development, good effect is the first.

zhao4zhong1 answered 1 month ago

It is suggested to play the interstellar pinball game first.