Zero-based "re-engraving" classic aircraft war small program game [One article uses IVX to easily combat 5]

About the Author

Author name: 1_bit
Introduction: CSDN blog expert, TOP5 blog star in 2020, signed author of Blue Bridge. In 15-16, he was broadcast live on the Internet, leading a group of programmers to embark on the road of programmers. Welcome everyone to join me and consult me ​​for relevant information. If you are confused, you will find the answer.

Must-see tips

Items stored in: https://editor.ivx.cn/#10692349 need to be looking at direct imitation

Learn how to make a beautiful web page resume
without coding in 1 hour (1) In 1 hour, how can I complete the webpage production of NetEase Cloud Music Homework without coding? (IVX Part 2)
Earn 300 yuan in 1 hour, don’t code to help people make a chicken web page [IVX Actual Combat Part 3]
Earn 1,000 in 1 hour on zero basis, teach you to complete the library management system, absolutely learn without coding meeting! [Complete site-wide teaching IVX actual combat fourth chapter]

Note: Picture resources can be privately chatted with bit brother~ welcome to private chat, enthusiastic blogger bit brother

The plot begins

👸Xiaoyuan: bit brother, IVX is really powerful, and the customer was very satisfied with what I did last time. 😂

🐶1_bit: Then you follow him. Huawei, Platform, Poly and other companies are all using IVX?

👸Xiaoyuan: I said it, and then he thought it was awesome, and he gave me an extra 200 yuan. 😂

🐶1_bit: Hahaha, do you now know what IVX is? I made a few orders.

👸Xiaoyuan: IVX is a programming language, IDE, which can deploy applications to the cloud with one click, and there are a lot of solutions to make an application in minutes.

🐶1_bit: IVX can also be used for mini games, did you know?

👸Xiaoyuan: Can you still do it? I just turned down a classmate who asked me to do a mini game and told me to give me 1,000. 😂

🐶1_bit: Yes, it can also be done with small programs.

👸Xiaoyuan: Then you teach me how to make mini games? ☺️

🐶1_bit: Hahaha, you are addicted to taking orders.

👸Xiaoyuan: No, this is because I am getting more and more famous in school. ☺️

1. Create a mini game

🐶1_bit: Okay. Then we first open the IVX online IDE, https://editor.ivx.cn/ .

👸 Xiaoyuan: It's opened.

🐶1_bit: We choose a small program game, choose 2D and give a name, we first make a 2D version of the classic airplane war game.

👸Xiaoyuan: Nice.

🐶1_bit: At this time, an interface will appear. The detailed information of the interface is as follows; one thing to be reminded here is that the attribute bar will display the attributes of the element currently selected in the object tree.


👸Xiaoyuan: I received it.

🐶1_bit: Let's start the first step. Since what we need to do is a 2d mini game, in the mini game, our game elements all use pictures as the character material, and finally add some logic scripts to the pictures, at this time, we can make this picture correspond to the motion effect and collision effect. , Collision logic, collision effects and other game logic, but visual logic settings can be used in IVX to make game development simple and easy to understand.

👸Xiaoyuan: Hahaha, you don’t need to type code to be incense. 😆

🐶1_bit: At this time, we can find the picture component from the left sidebar. After clicking, the mouse becomes a cross. We draw the size of the picture on the canvas, and then a resource selection box will pop up. In the selection box we find After confirming the picture materials we need, the component can be added to this canvas. (You can get the game materials from bit brother, just chat privately)



👸 Xiaoyuan: It's solved.



🐶1_bit: If you don’t like the size, we can drag the 8 zoom buttons of the picture to enable the picture to be zoomed and drawn.

Second, the event

🐶1_bit: In IVX, we can write logic to this protagonist through events.

👸Xiaoyuan: What is the incident? 😅

🐶1_bit: The event is what action is in response to the protagonist.

👸Xiaoyuan: Can you be more specific? 😅

🐶1_bit: For example, if we click on a certain position and the protagonist needs to move to that position, then moving to the specified point is an action that needs to be performed, and clicking on a certain position is the condition that triggers the action, which can also be said to be an event.

👸Xiaoyuan: I see, you mean that a time corresponds to an execution action, or is it a logic?

🐶1_bit: Yes, we can think about it next, where did we click?

👸Xiaoyuan: It's a page. 😅

🐶1_bit: Yes, the page is the foreground. We click on the foreground in the object tree, and then click the time icon on the right to trigger a condition for this foreground click.


👸Xiaoyuan: Well, I added it, and then a panel appears on the left.

🐶1_bit: Yes, the top of this event panel is the event of that object.


🐶1_bit: Trigger time we can choose one of them, here we choose finger press.


🐶1_bit: Then select the arrow of the object in the action, and then click the character we need to operate.


👸Xiaoyuan: So convenient. 😆

🐶1_bit: Then we start to set the action logic for the object that needs to be manipulated. Here we select "Move to" in the drop-down list of actions to be performed.


🐶1_bit: Then select the automatically appearing x coordinate and y coordinate on the corresponding X coordinate and Y coordinate.


👸Xiaoyuan: What are these two coordinates? 😅

🐶1_bit: These two coordinates are the coordinates you pressed. In the event, the trigger condition will be automatically acquired.

👸 Xiaoyuan: I see. 😆

🐶1_bit: Let's try it out at this time. We click the play button of the preview and we can run it in the browser to see the effect.


👸Xiaoyuan: But this webpage looks uncomfortable. 😅

🐶1_bit: At this time, we can right-click the webpage, click Check, and select the mobile phone screen and the corresponding mobile phone model from the available categories.



👸Xiaoyuan: But why did I suddenly appear in that position at any point, so rough.

🐶1_bit: You also need to set a point, which is to set a movement time, otherwise it will suddenly move to that position. You can set it for 1 second.


princess: Xiaoyuan: Solved, perfect.

Three, the physical world

🐶1_bit: A very important thing is needed next.

👸Xiaoyuan: What is it?

🐶1_bit: The physical world.

👸Xiaoyuan: What is this? 😅

🐶1_bit: This is a concept in most game engines. This physical world will imitate the physical characteristics of the physical world. For example, if you create an object in the physical world, then the object will have physical information such as gravity, mass, damping, etc. At this time, when you are playing a game, you will easily write the physical world similar game features, such as detecting collisions and collisions after collisions. Fly, attack, HP deduction, etc.

👸Xiaoyuan: Wow! so smart! ? My heart is moving, IVX is very powerful. 😆

🐶1_bit: The main reason we created the physics world is to facilitate the detection of collisions. We first click on the foreground, and then click on the physics world in the component bar on the left to create it.


🐶1_bit: Then drag the airplane picture to the lower layer of the physics world.


👸Xiaoyuan: But I didn't feel any changes after adding it.

🐶1_bit: You also need to click on the airplane picture, and click on the object in the component bar that appears on the left side of the airplane picture, so that the airplane becomes an object. You can try it.


👸Xiaoyuan: Hahaha, I feel the gravity, but when I fall below it will spin and I can’t turn it over. What should I do? And it feels too much gravity.


🐶1_bit: Simple, let's change the gravity effect first. We click on the object added to the aircraft, find the damping in the property bar on the left side of the object, and set it to 1. At this time, the damping will become larger, and you will find that the aircraft falls slower when you run the program.


👸Xiaoyuan: Yes, how can I set the airplane upside down?

🐶1_bit: We only need to set the fixed selection angle in the object properties, at this time the plane can not rotate, nor will it be upside down.


👸Xiaoyuan: Hahaha, solved. So how do you make the plane fire bullets next?

🐶1_bit: This is what we need to use a component called a trigger. Bullets are fired automatically. The possible time interval is 0.3 seconds. Then we can set the trigger interval to make an action after a certain time. This action is to create a bullet.

👸Xiaoyuan: Wow, that sounds simple. 😆

🐶1_bit: But our first step is to create a bullet, and once the bullet is created, it needs to fly upwards. What about this bullet?

👸Xiaoyuan: Anyway, you need a picture, right? Then first create a picture with bullet material, and then add an object.


🐶1_bit: To set the bullet to move in the opposite direction, we also need to create a motion component under the picture.



🐶1_bit: Set the movement angle of the bullet in the motion component to 90 degrees, and set the movement speed to -220px/s. At this time, set it to negative to run in the opposite direction.


👸Xiaoyuan: I feel that I need to set the rotation angle of the object so that it will not be affected by the rebound rotation. 😆


🐶1_bit: It is possible. You should have no problem running it.

👸Xiaoyuan: Okay, no problem. 😏

🐶1_bit: We can use an object group next. Because we are creating a lot of bullets, these bullets are created repeatedly. We need a container for unified management of these repeatedly created bullets. At this time, we need to use object groups.


🐶1_bit: After clicking, we can draw the range of the entire object group.


🐶1_bit: Then drag and drop the bullet into the object group.

Fourth, the trigger

🐶1_bit: Then we create a trigger just mentioned, create a trigger in the component bar, click the trigger interval time is 0.3s, and set to auto play.


🐶1_bit: Click on the event in the trigger. In the event, the action object is selected as the object group, and the action of selecting the object group is the creation object.


👸Xiaoyuan: Then you can create the bullet, right?

🐶1_bit: Yes, we set the created template object as a bullet object at this time. The created x and y values ​​can be selected as the x and y values ​​of the hero1 picture.


👸Xiaoyuan: Does it still need to be adjusted?

🐶1_bit: At this time, you can adjust the position of the bullet launching by calculation.

👸Xiaoyuan: It succeeded. The bullets have been firing. 😏


🐶1_bit: Then we need to make a top and a bottom so that the bullet will disappear when it hits the top. We click on the rectangle to draw two thin bars, named top and bottom, and then add an object to the top and bottom rectangles. The object is set to fixed x, y and rotation, so that the position can be fixed.



🐶1_bit: At this time, you set an event for the bullet. When the bullet collides, you can automatically remove the object. There is no need to set the specific collision object, so as long as it touches the object with the added object in the physical world, it will automatically respond to the following Logic, then you only need to set what needs to be done in the logic behind to remove the current object.


👸Xiaoyuan: Okay, once it touches the top object, it will disappear automatically, great.

🐶1_bit: Next we can create a variable and rename it to random x to create a random position of the enemy plane.


🐶1_bit: Click on the trigger created before, and add an action to randomly assign a value to the random x variable. The assignment range is from the screen width 0 to the widest width minus one unit to prevent enemy aircraft from spawning off the screen; create it later Just one enemy plane is enough, the x coordinate of creating the enemy plane is a randomly generated x coordinate, and the y coordinate is -10, just drop from the screen.

Five, record the score

👸Xiaoyuan: Alright, hahaha. Is it necessary to prohibit the rotation of the aircraft at this time, and then set the event of the aircraft so that it will automatically disappear when it touches other objects? 😆


🐶1_bit: Yes, directly ok, directly aircraft hit other objects disappear, and then set a fixed angle of rotation of the object on it.


🐶1_bit: Let’s create one to display the current score.


👸Xiaoyuan: Created and then?

🐶1_bit: At this time, we create a variable, which is renamed to the number of shots down.


🐶1_bit: Next we create a new event.


🐶1_bit: Set as a collision event. If an enemy aircraft is hit, then set the value of the variable, and the value of the variable can be set to plus one.


👸Xiaoyuan: I understand, and then add another action to make the value of the number of shots equal to the variable of the number of shots. 😆



🐶1_bit: Next we just need to set the final step, create several text, set their visibility to invisible, and finally set the current protagonist If you touch the enemy will automatically pop up the game ends.


👸Xiaoyuan: Hahaha, solved. 😎