The game “synthetic big watermelon” was very popular years ago, and it was also popular on microblog search. Recently, it has been playing for a while. It is very interesting, so I studied the principle of small ball collision, and personally wrote the collision algorithm to realize a synthetic big watermelon game. It supports any size layout. You can drag as much area as you want to play. As long as the area is large enough, play it seriously, 100 big watermelons. Ha ha~~~

## 1. Introduction to the game

There are a total of 11 fruits in the game. Two of the same fruits are combined into a larger fruit. Finally, a large watermelon can not be combined anymore:

However, bloggers write their own games, they can’t come up with a big watermelon

If it looks fuzzy or you can’t see the video, you can go directly https://www.bilibili.com/video/BV1eh411Y7uV/ Beep, beep, beep, beep, beep, beep, beep, beep, beep

The logic in the code is mainly as follows:

Move the fruit, carry out boundary detection, and calculate the collision detection between fruits. If it is two identical fruits, merge the fruits, otherwise calculate the moving direction after the collision of small balls. Judge whether the fruit overflows the finish line. If it overflows, break each fruit, pop up the end screen, and wait for the next game

The fruit collision calculation is more complex, so before I explain the small ball collision algorithm to you, let’s first review the vectors learned before

## 2. Vector introduction

Let’s take the following vector as an example:

Then the vector at this time is, and their content is (b.x-a.x, b.y-a.y). When we take the absolute value of the vector, we find the length from a coordinate to B coordinate, that is:

Slash length=

## 3. Unit vector

Unit vector is a vector with length 1. Take this vector as an example (length C):

If you want to obtain the unit vector, their contents are: ((b.x-a.x) / C, (b.y-a.y) / C)

So the unit vector is equal to 1

## 4. Dot multiplication of vector and unit vector

Point multiplication of vector and unit vector is used to obtain the projection of vector on unit vector

First, the formula of vector and vector point multiplication is as follows:

amongyesVector sumThe angle between vectors

IfIs a unit vector, then the absolute value is equal to 1

So:

$vec{a}* vec{b} = left | vec{a} ight | cos heta$

The final is shown in the figure below:

The red line represents the length of the vector. From the top view, isn’t the red line the projection of the vector in the vector direction?

If two vectors are connected at the end, thenThe angle is the angle after the unit vector is generated along the, as shown in the following figure:

come to conclusion:

- If the included angle is obtuse, thenIs a negative number. (the opposite direction of the unit vector)
- If the included angle is an acute angle, thenIs a positive number (the positive direction of the unit vector)

## 5. Small ball collision scenario

- Due to the collision of two small balls, the velocities on the tangent line are parallel to each other and there is no force (as shown in the figure below)
- The centrelines collide with each other (as shown in the figure below), and there will be a force, so we only need to calculate the velocity in the direction of the centreline of ball 1 and ball 2
- Then, according to the law of conservation of momentum and the law of conservation of mechanical energy, the centreline direction of ball 1 and ball 2 after collision is calculated
- Finally, add their respective velocities on the tangent to each other to obtain the X velocity and y velocity after collision

Before collision, as shown in the figure below:

- V1n and v1t: are the projection velocities of ball 1 in the centreline direction and tangent direction
- V2n and v2t: are the projection velocities of ball 2 in the centreline direction and tangent direction
- V1: velocity direction of ball 1, equal to v1n + v1t
- V2: the velocity direction of ball 2, equal to v2n + v2t

### 5.1 obtaining v1n and v2n

We have proved before: vectorAnd unit vectorPoint multiplication is used to obtain the projection of a vector on a unit vector

So the code is as follows:

let distance = Math.sqrt(Math.pow((ball1.pointX - ball2.pointX),2) + Math.pow((ball1.pointY - ball2.pointY),2));

### 5.2 calculate the velocity direction after collision

First, let’s take a look at the following figure after collision:

- V1 “: the speed direction of ball 1 after collision, which is equal to v1n” + v1t
- V2 “: the velocity direction of ball 2 after collision, which is equal to v2n” + v2t
- V1n “and v2n”: projection speed of two small balls after collision

If the two balls are the same size, the value of v1n “and v2n” is:

v1n” = v2n

v2n” = v1n

According to the law of conservation of momentum and the law of conservation of mechanical energy:

- V1 and V2: speed before two small balls hit
- M1 and M2: mass of two small balls
- V1 “and V2”: speed of two small balls after collision

Therefore, the final collision function code is as follows:

let distance = Math.sqrt(Math.pow((ball1.pointX - ball2.pointX),2) + Math.pow((ball1.pointY - ball2.pointY),2));

## 6. The scene of a small ball passing by

First, let’s take a look at the following two small balls moving in parallel:

If ball 1 and ball 2 are moving in parallel, their included angle with the connecting line is exactly 90 °, and v1n and v2n are both 0

If the included angle of ball 1 is greater than that of ball 2, collision will occur, as shown in the following figure:

The dashed arrow indicates the scene when the included angle of ball 1 is greater than that of ball 2

The value of COS is exactly 0 ~ 180 °, and the larger the angle is, the smaller the value is. Therefore, when v1n > = v2n, there will be no collision

## 7. The small ball has been landing directly above all the small balls

The renderings are as follows:

At this time, because the balls have no velocity direction on the tangent line, they will slowly pile up under the acceleration of gravity, so the game is over

Therefore, we also add the following judgment at the end after collision:

If (v1n = = 0 & & v1t = = 0 & & v2t = = 0) {/ / when v1n is 0, it means that ball 1 is stationary, while v1t and v2t are 0, it means that ball 1 and ball 2 have no speed direction on the tangent line, and ball 2 is directly above ball 1. At this time, it is necessary to give ball 2 a VX offset value to prevent the balls from piling up

The modified rendering is shown below:

The implementation of the whole collision algorithm is completed, and other logic can be implemented according to the gourd and gourd. The code is still uploading. If you still want to realize any small games, you can leave me a message. If you are interested, I will roll out one

The above is the details of QT quick qml-500 lines of code implementation. For more information about QT quick qml-500 lines of code implementation of “synthetic watermelon game”, please pay attention to other relevant articles of developepper!