当前位置：网站首页>[IVX junior engineer training course 10 papers] 05 canvas and aircraft war game production

[IVX junior engineer training course 10 papers] 05 canvas and aircraft war game production

2022-07-02 01:14:00 【1_ bit】

Catalog

For high score promotion, please check the column ：
iVX Beginner to master
Big talk IVX From actual combat to mastery

11、 ... and 、 Aircraft battle

The general process of making wechat games and wechat applet 、Web similar , The difference is the use of components .

11.1.1 Complete the production of game characters

First, we create a wechat 2D Little games ：

After creating the game scene, you can add pictures in the game interface , As an element in the game . Click the picture component to draw a protagonist plane in the canvas . After clicking the picture, drag the mouse in the canvas to draw the area, and a resource selection box will pop up ：

Select the picture material we need to add , The picture of the protagonist's plane will appear in the canvas ：

Let's click on the picture , Drag to the right size ：

11.1.2 Finish adding the physical world

In order to facilitate the detection of physical collision between aircraft and enemy aircraft , We need to add a physical world to the canvas , And take the protagonist plane as a sub object of the physical world ：

In order for the protagonist's plane to be affected by the physical world , You need to add an object to the protagonist's plane . Click the aircraft picture component in the object tree species , Click the object in the left component bar to add ：

At this point we pass through web Browser debugging , Click preview ：

For better convenience of observation , We press... In the browser window that appears F12, Select this window as the mobile browser window ：

After we refresh the interface, we will see the protagonist's plane falling from top to bottom ：

Due to collisions in the physical world , There will be rotation between objects , We need to keep the plane's head up , It is necessary to prohibit the rotation angle of the protagonist aircraft . Click the object component under the main character of the aircraft , Turn on the fixed rotation angle of the object in the property bar ：

11.1.3 Complete the anti gravity movement of the bullet object

Next, start setting up automatic bullet firing , Let's add a bullet picture component to the canvas again , And add the object component under the bullet picture component ：

At this time, the preview finds that the bullet will fall automatically , To solve this problem, you only need to add a motion component under the bullet component ：

We click on the motion component , Set the moving direction to 90 Degrees are vertical upward motion , Then set the moving speed in this direction , Set to -600 It indicates the movement in the opposite direction , Finally, you need to turn on autoplay to take effect ：

Then we will find that we have successfully made the bullet move in the opposite direction , At this time, also note that the fixed rotation attribute of the bullet should be turned on , Otherwise, the bullet will have an unsatisfactory effect in the subsequent collision .

11.1.4 Use object groups to create bullets

Because bullets need to be fired automatically at certain intervals , We now use the object group component to uniformly manage bullets . At this point, add an object group to the physical world , Select the scope of management for the whole canvas （ Here you need to leave a little gap at the top and bottom for later collision treatment ）：

After adding, it was found that the plane and bullets were missing , This is because the object group covers the picture of the protagonist of the aircraft and the picture of bullets . At this time, the order of object groups in the object tree can be placed at the bottom （ The closer the object tree is to the top, the higher the priority is displayed ）.

Then add the bullet component to the picture group ：

Because the bullets are fired at intervals , At this point, we need to create a trigger in the foreground to launch bullets regularly ：

Then set the trigger interval to 0.3, And turn on autoplay ：

Then set the event for the trigger , The condition is when the trigger is triggered , Use the create object action of the object group component and set the template object as bullet object ：

We then set an initial position for the bullet , This position can be set as the position of the protagonist plane , Then fine tune the position of the bullet in the nose of the aircraft ：

When we run the program, we will find that the bullet will be fired automatically ：

11.1.5 Bullet optimization

The bullet will not disappear automatically , We can add a rectangular component at the top and name it top , After adding object components to this component , Set the position to fixed xy Coordinates and fixed rotation angle ：

Next, let's add an event to the bullet , This event is triggered to start collision , Select the collision object as the top , The current action is automatically removed ：

If you preview the item again, you will find that the bullet will disappear automatically , But the objects at the top have borders and colors , Let's click on the top component , Change the transparency of the background color to 0, Then change the border width of the component to 0, The component can visually disappear into the page ：

Then we began to add mobile events to the aircraft protagonist . We click on the foreground to add an event , When the fingers are pressed , The aircraft protagonist assembly will move to this position within the specified range ：

11.1.6 Set up enemy aircraft

Then we add enemy planes . Add a picture component to the object group , And add object components ：

Click object component , Set the damping to 0.95 And turn on the fixed rotation angle , At this time, the speed of the aircraft falling from the top will slow down ：

We will give another collision event to the enemy aircraft components at this time , It disappears automatically when it hits a bullet ：

Add another event to the bullet assembly , It disappears automatically when it encounters an enemy plane ：

At this point, we start to create enemy aircraft in batch , We create a numeric variable named random x, Random horizontal axis position for enemy aircraft ：

Then we give random in the trigger x Random values of variables ：

Then use the object group in the trigger to create the aircraft object ,X The value is random x A variable's value , Y Value gives a fixed value a certain distance from the top ：

At this time, the enemy plane will fall to the bottom of the screen without hitting , At this time, add a transparent rectangular component at the bottom and name it bottom , The enemy plane disappears automatically after triggering ：

11.1.7 Optimize the game

Next, create a variable to record the number of enemy planes shot down ：

When the bullet touches the enemy aircraft, the value is increased by one ：

We create a text named shoot down at the front desk , Used to display the variable value and set the initial text to 0：

Then add an action when the bullet touches the enemy plane , The contents of the variable will be displayed ：

At this time, the preview content will achieve the scoring effect ：

Finally, add the action when touching the enemy plane in the protagonist's plane ：

In the above events, when the protagonist aircraft touches the enemy aircraft and uses the physical world and trigger to execute the pause action, the game will stop .

Finally, consider the user experience , After we stop, we will display a game end text . Add a text in the foreground and name it the end of the game , The default is invisible ：