Object control type game operation method and device, equipment and storage medium

Abstract

The invention discloses an object control type game operation method and device, equipment and a storage medium. The method comprises the steps that game resources of an object control type game are loaded, and an event response component in the game resources is initialized; according to a hypertext markup language file and a cascading style file in the game resource, rendering a first container and a second container in a game interface of the object control type game; binding the style attributes of the second container, the first object and the second object with the type of the target touch event through an event binding mechanism of the event response component; when the target touch event is monitored, adjusting style attributes of the second container, the first object and the second object according to touch data of the target touch event; generating a key frame animation according to the adjusted style attribute of the second container and the second object, generating a sequence frame animation according to the adjusted style attribute of the first object, and rendering an animation that the object carried by the second container flows to the first container on a game interface according to the key frame animation and the sequence frame animation.

Description

Technical Field

[0001] The present application relates to the field of game technology, and in particular to a method, device, equipment and storage medium for running an object-controlled game. Background Art

[0002] There are many types of object-controlled games on the market. For example, the water pouring game based on physical simulation is widely popular because of its simple and interesting gameplay. In the water pouring game, the player controls the bottle filled with liquid or solid to pour so that the liquid or solid in the bottle flows into the cup below the bottle. The success of the game is determined by the height of the liquid in the cup.

[0003] In the prior art, most water pouring games are developed based on canvas or other graphics libraries. However, the development complexity based on canvas or other graphics libraries is high, which increases the development and maintenance costs of the game. Moreover, the game animation effects developed by canvas or other graphics libraries are relatively simple and lack visual appeal. Summary of the invention

[0004] The present application provides an object control game running method, apparatus, device and storage medium, so as to realize real-time response to player operations through the event binding mechanism of the event response component, realize fast rendering of containers and objects and smooth playback of object control animations through the style attributes of block elements, solve the problems of high difficulty in game development and single visual effects in the prior art, reduce the development and maintenance costs of the game, and optimize the interactive experience and visual effects.

[0005] In a first aspect, the present application provides a method for running an object control game, comprising:

[0006] In response to a start operation of the object control game, game resources of the object control game are loaded, and event response components in the game resources are initialized;

[0007] Rendering a first container and a second container in a game interface of the object control game according to a hypertext markup language file and a cascading style sheet file in the game resources; wherein the hypertext markup language file includes block elements of the first container, the second container, the first object, and the second object, and the cascading style sheet file includes style attributes of each of the block elements;

[0008] Binding the style attributes of the second container, the first object, and the block elements of the second object to the type of the target touch event through the event binding mechanism of the event response component;

[0009] When the target touch event is monitored, adjusting the style attributes of the second container, the first object, and the block elements of the second object in real time according to the touch data of the target touch event;

[0010] A key frame animation is generated according to the adjusted style attributes of the block elements of the second container and the second object, a sequence frame animation is generated according to the adjusted style attributes of the block elements of the first object, and an animation of the objects carried by the second container flowing to the first container is rendered in the game interface according to the key frame animation and the sequence frame animation.

[0011] In a second aspect, the present application provides an object control game running device, comprising:

[0012] A game resource loading module, configured to load game resources of the object control game in response to a start operation of the object control game, and initialize event response components in the game resources;

[0013] An initial rendering module is configured to render a first container and a second container in a game interface of the object control game according to a hypertext markup language file and a cascading style sheet file in the game resources; wherein the hypertext markup language file includes block elements of the first container, the second container, the first object and the second object, and the cascading style sheet file includes style attributes of each of the block elements;

[0014] An event binding module, configured to bind the style attributes of the second container, the first object, and the block elements of the second object to the type of the target touch event through the event binding mechanism of the event response component;

[0015] a style attribute adjustment module, configured to adjust the style attributes of the second container, the first object, and the block elements of the second object in real time according to the touch data of the target touch event when the target touch event is monitored;

[0016] The real-time rendering module is configured to generate a key frame animation according to the adjusted style attributes of the block elements of the second container and the second object, generate a sequence frame animation according to the adjusted style attributes of the block elements of the first object, and render an animation of the second container pouring water into the first container in the game interface according to the key frame animation and the sequence frame animation.

[0017] In a third aspect, the present application provides an object control game running device, comprising:

[0018] one or more processors;

[0019] A memory stores one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the object control game running method as described in the first aspect.

[0020] In a fourth aspect, the present application provides a storage medium comprising computer executable instructions, which, when executed by a computer processor, are used to execute the object control game running method as described in the first aspect.

[0021] In the present application, the game resources of the object control game are loaded in response to the start operation of the object control game, and the event response component in the game resources is initialized; according to the hypertext markup language file and the cascading style file in the game resources, the first container and the second container are rendered in the game interface of the object control game; wherein the hypertext markup language file includes the block elements of the first container, the second container, the first object and the second object, and the cascading style file includes the style attributes of each block element; the style attributes of the block elements of the second container, the first object and the second object are bound to the type of the target touch event through the event binding mechanism of the event response component; when the target touch event is monitored, the style attributes of the block elements of the second container, the first object and the second object are adjusted in real time according to the touch data of the target touch event; a key frame animation is generated according to the adjusted style attributes of the block elements of the second container and the second object, a sequence frame animation is generated according to the adjusted style attributes of the block elements of the first object, and an animation of the objects carried by the second container flowing to the first container is rendered in the game interface according to the key frame animation and the sequence frame animation. Through the above-mentioned technical means, the target touch event triggered when the player controls the container can be bound to the style attributes of the container and objects in the game through the event binding mechanism of the event response component, so that the style attributes of the container and the object can be quickly adjusted when the target touch event is monitored, and then the updated container and object can be quickly rendered in the game interface according to the adjusted style attributes of the container and the object, and the object control animation can be smoothly played in the game interface by using the key frame rules and the preset sequence frame animation, so as to achieve real-time response to the player's operation and smooth playback of the game animation, solve the problems of high difficulty in game development and single visual effect in the prior art, reduce the development and maintenance costs of the game, and optimize the interactive experience and visual effects. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 It is a flow chart of a method for running an object control game provided in an embodiment of the present application;

[0023] Figure 2 is a first schematic diagram of a game interface provided in an embodiment of the present application;

[0024] Figure 3is a second schematic diagram of a game interface provided in an embodiment of the present application;

[0025] Figure 4 is a third schematic diagram of a game interface provided in an embodiment of the present application;

[0026] Figure 5 is a flowchart of rendering game animation provided by an embodiment of the present application;

[0027] Figure 6 is a flowchart for determining game results provided by an embodiment of the present application;

[0028] Figure 7 It is a structural diagram of an object control game running device provided in an embodiment of the present application;

[0029] Figure 8 It is a structural diagram of an object-controlled game running device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0030] In order to make the purpose, technical scheme and advantages of the present application clearer, the specific embodiments of the present application are further described in detail below in conjunction with the accompanying drawings. It is understood that the specific embodiments described herein are only used to explain the present application, rather than to limit the present application. It should also be noted that, for the convenience of description, only the part related to the present application but not all the contents are shown in the accompanying drawings. Before discussing the exemplary embodiments in more detail, it should be mentioned that some exemplary embodiments are described as processes or methods depicted as flow charts. Although the flow chart describes each operation (or step) as a sequential process, many of the operations therein can be implemented in parallel, concurrently or simultaneously. In addition, the order of each operation can be rearranged. The process can be terminated when its operation is completed, but it can also have additional steps not included in the accompanying drawings. The process can correspond to a method, a function, a procedure, a subroutine, a subprogram, etc.

[0031] The terms "first", "second", etc. in the specification and claims of the present application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present application can be implemented in an order other than those illustrated or described here, and the objects distinguished by "first", "second", etc. are generally of one type, and the number of objects is not limited. For example, the first container can be one or more. In addition, "and / or" in the specification and claims represents at least one of the connected objects, and the character " / " generally indicates that the objects associated with each other are in an "or" relationship.

[0032] In the more common existing implementation methods, water pouring games are mostly developed based on canvas or other graphics libraries. However, the development complexity based on canvas or other graphics libraries is high, which increases the development and maintenance costs of the game. Moreover, the game animation effects developed by canvas or other graphics libraries are relatively simple and lack visual appeal.

[0033] To solve the above problems, this embodiment provides an object control game running method, which realizes real-time response to player operations through the event binding mechanism of the event response component, and realizes fast rendering of containers and objects and smooth playback of object control animations through the style attributes of block elements, thereby reducing the development and maintenance costs of the game while optimizing the interactive experience and visual effects.

[0034] The object-controlled game running method provided in this embodiment can be executed by an object-controlled game running device, which can be implemented by software and / or hardware, and can be composed of two or more physical entities or one physical entity. For example, the object-controlled game running device can be a terminal device such as a mobile phone or a tablet.

[0035] The object-controlled game running device is installed with at least one type of operating system, wherein the operating system includes but is not limited to Android system, Linux system and Windows system. The object-controlled game running device can install at least one application based on the operating system, and the application can be an application that comes with the operating system, or an application downloaded from a third-party device or server. In this embodiment, the object-controlled game running device has at least an application that can execute the object-controlled game running method, and the application can be an object-controlled game.

[0036] For ease of understanding, this embodiment is described by taking a terminal device as the subject of executing the object control game running method as an example.

[0037] Figure 1 A flowchart of a method for running an object control game provided in an embodiment of the present application is given.

[0038] refer to Figure 1 , the object control game running method specifically includes:

[0039] S110 . In response to a start operation of the object control game, game resources of the object control game are loaded, and event response components in the game resources are initialized.

[0040] In this embodiment, the object control game is a game in which a player controls a second container to pour an object carried by the second container into a first container, for example, a water pouring game or a sand pouring game. The first container and the second container can be containers that can carry objects, such as cups, bottles, boxes, etc. The object can be liquid or solid, and the types of the first container, the second container, and the object are not specifically limited. This embodiment is described by taking a game in which a player controls a second container to pour a liquid carried by the second container into the first container as an example.

[0041] The start operation is an operation triggered when the player starts the object control game, which can be triggered when clicking the icon of the object control game. After detecting the start operation of the object control game, the start operation is responded to load the game resources of the object control game into the memory, and the game resources include event response components, hypertext markup language files and cascading style files. Among them, the event response component is a Vue3 component, the text markup language file, that is, the HTML file, includes the block elements of the first container, the second container, the first object and the second object, and the cascading style file, that is, the CSS3 file, includes the style attributes of each block element. The first object is the object that flows when the second container is poured into the first container, and the second object can be understood as the object added to the first container when the second container is poured into the first container. For example, when the object control game is a water pouring game, the first object is the liquid flowing in the air when the second container pours water into the first container, and the second object is the liquid added to the first container when the second container pours water into the first container. This embodiment uses CSS3 and Vue3 components to develop object-controlled games, so as to provide a more efficient and flexible development experience for the game through the responsive framework of Vue3 and the animation effects of CSS3, thereby reducing the development and maintenance costs of the game while optimizing the interactive experience and visual effects.

[0042] It should be noted that the number of second containers and first containers set in the object control game can be gradually increased according to the difficulty of the game, or can be set according to the game level, and no specific limitation is made here.

[0043] After loading the game resources into the memory, the event response components in the game resources are initialized so that the initialization event response components can respond to player operations later. During the loading of game resources, the text "loading" is displayed in the game interface so that players can wait for the loading of game resources.

[0044] S120: Rendering a first container and a second container in a game interface of an object control game according to a hypertext markup language file and a cascading style sheet file in the game resources.

[0045] Exemplarily, based on the block elements (div elements) of the first container and the second container in the hypertext markup language file, the style attributes of the block elements of the first container and the second container are obtained in the cascading style file, and the first container and the second container are rendered in the game interface based on the style attributes of the block elements of the first container and the second container. Among them, the style attributes of the block elements of the first container and the second container define the properties related to the appearance of the first container and the second container, such as the position, tilt angle, shape, size, color, etc., and the first container and the second container can be quickly rendered in the game interface based on the style attributes in CSS3. For example, Figure 2 is a first schematic diagram of a game interface provided in an embodiment of the present application. Figure 2 As shown, after the first container 11 and the second container 12 are initially rendered in the game interface 11, the second container 12 is suspended in the air with an inclination angle of 90 degrees, and the first container 11 is placed on a horizontal plane with an inclination angle of 0 degrees.

[0046] In this embodiment, the hypertext markup language file also includes block elements of scale lines and color blocks. According to the hypertext markup language file and cascading style files in the game resources, the first container and the second container can be rendered in the game interface of the object control game, and the scale lines and color blocks are rendered in the first container. The scale lines and color blocks are used to indicate the height of the liquid carried by the first container when the game is successful. The player can determine when to end the control of the second container based on the height of the liquid carried by the first container, the scale lines and the color blocks. Figure 2 The scale lines include an upper scale line 13 and a lower scale line 14 , and the color block area 15 is located between the upper scale line 13 and the lower scale line 14 and has a thickness less than the distance between the upper scale line 13 and the lower scale line 14 .

[0047] S130: Bind the style attributes of the second container, the first object, and the block elements of the second object to the type of the target touch event through the event binding mechanism of the event response component.

[0048] Among them, the target touch event is an event triggered when the player controls the liquid carried by the first container to pour into the second container. The event binding mechanism of the Vue3 component can be used to bind the event listener and the element that monitors the specific event, so that the logic of the processing element is executed when the event listener monitors the specific event. In this embodiment, after the first container and the second container are rendered in the game interface and the initial rendering of the game interface is completed, the style attributes of the block elements of the second container, the first object and the second object can be bound to the type of the target touch event through the event binding mechanism of the event response component, so that when the target touch event is subsequently monitored by the event listener of the target touch event, the target touch event can be responded to in real time through the event response component, and then the style attributes of the block elements of the second container, the first object and the second object can be adjusted according to the touch data of the target touch event, so that the pouring animation can be played smoothly in the game interface based on the adjusted style attributes and the animation effect of CSS3, so as to achieve real-time response to player operations and smooth playback of object control animation.

[0049] In one embodiment, the types of target touch events include a press event type and a slide event type, that is, the user can control the second container to pour liquid into the first container through a press operation or a slide operation, and different types of target touch events can be listened to by different event listeners, thereby making different responses to different types of target touch events. Accordingly, by binding the style attributes of the block elements of the second container, the first object, and the second object with the type of the target touch event through the event binding mechanism, different types of target touch events can be bound to different style attributes of the block elements of the second container, the first object, and the second object, thereby making different event processing logics.

[0050] In the case where the type of the target touch event is a press event type, a first event listener of the press event type is created through the event response component, and the first event listener is bound to the first property adjustment function through the event response component. The first property adjustment function is used for the tilt angle property of the block element of the second container, the visibility property of the block element of the first object, and the height property of the block element of the second object. Among them, the first event listener is used to listen to the press event. When the user presses the second container in the game interface, the press event is triggered, and the first event listener can listen to the triggered press event. After the first container and the second container are rendered in the game interface and the initial rendering of the game interface is completed, the event response component creates a first event listener for listening to the press event, and binds the first event listener to the first property adjustment function, so that when the first event listener listens to the press event, the press event is passed as a parameter to the first property adjustment function. The first attribute adjustment function adjusts the tilt angle attribute of the block element of the second container, the visibility attribute of the block element of the first object, and the height attribute of the block element of the second object according to the press event, and then quickly renders a picture of the second container pouring liquid into the first container under the player's press operation in the game interface based on the adjusted tilt angle attribute of the block element of the second container, the visibility attribute of the block element of the first object, and the height attribute of the block element of the second object, thereby achieving a quick response to the press event while ensuring the rendering speed of the game screen.

[0051] In the case where the type of the target touch event is a sliding event type, a second event listener of the sliding event type is created through the event response component, and the second event listener is bound to the second property adjustment function through the event response component. The second property function is used to adjust the position attribute and tilt angle attribute of the block element of the second container, the height attribute of the block element of the second object, and the visibility attribute, position attribute and size attribute of the block element of the first object. Among them, the second event listener is used to listen to the sliding event. When the user slides the second container in the game interface, the sliding event is triggered, and the second event listener can listen to the triggered sliding event. After the first container and the second container are rendered in the game interface and the initial rendering of the game interface is completed, the event response component creates a second event listener for listening to the sliding event, and binds the second event listener to the second property adjustment function, so that when the second event listener listens to the sliding event, the sliding event is passed as a parameter to the second property adjustment function. The second attribute adjustment function adjusts the position attribute and tilt angle attribute of the block element of the second container, the visibility attribute, position attribute and size attribute of the block element of the first object, and the height attribute of the second object according to the sliding event, and then based on the adjusted position attribute and tilt angle attribute of the block element of the second container, the visibility attribute, position attribute and size attribute of the block element of the first object, and the height attribute of the second object, a picture of the second container pouring liquid into the first container under the sliding operation of the player is quickly rendered in the game interface, thereby achieving a quick response to the sliding event while ensuring the rendering speed of the game screen.

[0052] S140: When a target touch event is monitored, adjust style attributes of the second container, the first object, and the block elements of the second object in real time according to touch data of the target touch event.

[0053] The touch data includes a touch position and / or a touch duration, wherein the touch position is the pixel coordinates of the game interface touched by the user when the target touch event is triggered in the game interface, and the touch duration is the duration of the user touching the game interface when the target touch event is triggered in the game interface. When the event response component listens to the target touch event through an event listener for listening to the target touch event, it parses the touch data of the target touch event, calls the corresponding adjustment function according to the touch data to adjust the style attributes of the second container, the first object, and the block elements of the second object, and then renders a picture of the second container pouring liquid into the first container under the control of the player in the game interface according to the adjusted style attributes.

[0054] In this embodiment, when the first event listener listens to the press event, the touch duration of the press event is obtained through the first event listener, the first attribute adjustment function is called to adjust the tilt angle attribute of the block element of the second container to a preset tilt angle, the visibility attribute of the block element of the first object is adjusted to display, and the height attribute of the block element of the second object is adjusted based on the touch duration. Among them, the tilt angle attribute is used to limit the tilt angle of the second container in the game interface, the visibility attribute is used to limit the display or hiding of the first object in the game interface, and the height attribute is used to limit the height of the second object in the game interface. Exemplarily, the first event listener analyzes the press event monitored in real time to obtain the touch duration corresponding to the press event, that is, the duration of the player pressing the second container in the game interface, and passes the touch duration as a parameter to the first attribute adjustment function. The first attribute adjustment function increases the tilt angle attribute of the block element of the second container from 90 degrees to a preset tilt angle, which is greater than 90 degrees but less than 180 degrees and can be set to 135 degrees. Figure 3 is a second schematic diagram of the game interface provided in the embodiment of the present application. Figure 3 As shown, after the tilt angle attribute of the block element of the second container 12 is increased from 90 degrees to 135 degrees, the second container 12 tilts downward and the outlet faces the first container 11, and the game interface 10 presents the state of the second container 12 when the second container 12 pours liquid into the first container 11. At the same time, the first attribute adjustment function adjusts the visibility attribute of the block element of the first object from hidden to visible, so that the first object can be rendered in the game interface later according to other style attributes of the first object. Figure 3 , the first object 17 is the flowing liquid between the outlet of the second container 12 and the inlet of the first container 11. After the visibility attribute of the block element of the first object is converted from hidden to displayed, the first object 17 can be rendered in the game interface 10, so that the game interface 10 presents a state where the second container 12 flows liquid to the first container 11. At the same time, the first attribute adjustment function determines the height attribute of the second object corresponding to the current touch duration according to the positive correlation between the height attribute and the touch duration, and then adjusts the height attribute of the block element of the second object, so that the second object of the corresponding height can be rendered in the first container of the game interface according to the height attribute of the block element of the second object. Among them, the positive correlation can be a linear relationship, and the height attribute is also zero when the touch duration is zero. Reference Figure 3, the second object 16 is the liquid in the first container 11. Since the touch duration is positively correlated with the height of the second object 16, the height attribute of the second object 16 increases with the increase of the touch duration. The height attribute of the second object 16 gradually increases from zero. The second object 16 with gradually increasing height can be rendered in the game interface 10, so that the game interface 10 presents an animation of the liquid in the first container 11 gradually rising due to the liquid poured out of the second container 12. Figure 3 It can be seen from the content shown that after adjusting the tilt angle attribute of the second container 12, the visibility attribute of the first object 17, and the height attribute of the second object 16, an animation of the second container 12 pouring liquid into the first container 11 and the liquid in the first container 11 gradually rising can be presented in the game interface 10. In this embodiment, by adjusting the tilt angle attribute of the second container, the visibility attribute of the first object, and the height attribute of the second object, the animation of the second container pouring liquid into the first container can be quickly rendered in the game interface, which reduces the rendering complexity of the game animation, improves the rendering efficiency of the game animation, and thus improves the game experience of the player.

[0055] When the second event listener listens to the sliding event, the touch position of the sliding event is obtained through the second event listener, and the second attribute adjustment function is called to adjust the position attribute and tilt angle attribute of the block element of the second container based on the touch position, and the visibility attribute of the block element of the first object is adjusted to display, and the position attribute of the block element of the first object is adjusted based on the position attribute and tilt angle attribute of the block element of the second container, and the size attribute of the block element of the first object is adjusted based on the position attribute and tilt angle attribute of the block element of the second container, and the height attribute of the block element of the second object is adjusted based on the position attribute and tilt angle attribute of the block element of the first object. Among them, the position attribute is used to limit the display position of the block elements of the second container and the first object, and the size attribute is used to limit the size of the block element of the first object. Exemplarily, the second event listener parses the sliding event monitored in real time to obtain the touch position corresponding to the sliding event, that is, the position where the player slides after touching the second container in the game interface, and passes the touch position as a parameter to the second attribute adjustment function. The touch position includes a starting position and an ending position. The second attribute adjustment function determines the horizontal coordinate distance and the vertical coordinate distance between the starting position and the ending position. The horizontal coordinate distance is added to the horizontal coordinate of the position attribute of the block element of the current second container to obtain the position attribute of the block element of the adjusted second container. The arc tangent value of the ratio between the vertical coordinate distance and the horizontal coordinate distance is added to the ninety-degree angle to obtain the tilt angle attribute of the block element of the second container after adjustment. Figure 4 is a third schematic diagram of a game interface provided in an embodiment of the present application. Figure 4 As shown, assuming that the user presses and holds the second container 12 ( Figure 4The second container 12 is drawn with a dotted line in the middle) and the second container 12 is moved to the right and rotated downward to trigger a sliding event. The second attribute adjustment function can adjust the position attribute and the tilt angle attribute of the block element of the second container 12 according to the starting position and the ending position of the sliding event. The second container 12 is rendered according to the position attribute and the tilt angle attribute of the block element of the second container 12 so that point A of the second container 12 is translated and rotated downward to point B. The sum of the angle c and the ninety-degree angle is the tilt angle attribute of the block element of the second container 12 after adjustment. The rendered second container 12 is translated to the right and tilted downward with the outlet facing the first container 11. The game interface 10 presents the state of the second container 12 when the second container 12 pours liquid into the first container 11. At the same time, the second property adjustment function adjusts the visibility property of the block element of the first object from hidden to displayed, determines the position of the outlet of the second container after re-rendering according to the adjusted position property and tilt angle property of the block element of the second container, determines the adjusted position property of the first object according to the position of the outlet, determines the height difference between the inlet of the first container and the outlet of the second container based on the adjusted position property of the block element of the second container and the position property of the block element of the first container, determines the height of the first object according to the height difference, determines the width of the first object according to the adjusted tilt angle property of the block element of the second container, and determines the adjusted size property of the first object according to the height and width of the first object. Reference Figure 4 , after the visibility attribute of the block element of the first object 17 is converted from hidden to displayed, the first object 17 can be rendered in the game interface 10 according to the size attribute and position attribute of the first object 17, so that the game interface 10 presents a state in which the second container 12 flows liquid into the first container 11 and the size of the flowing liquid adapts to the tilt angle and height of the second container. At the same time, the second attribute adjustment function determines the percentage of the first object flowing into the first container based on the position attribute of the block element of the first object and the inlet position of the first container, and determines the adjusted height attribute of the second object according to the percentage of the first object flowing into the first container and the size attribute of the first object. Reference Figure 4 , the height attribute of the second object 16 increases as the tilt angle of the second container 12 increases, and the height attribute of the second object 16 gradually increases from zero, and the second object 16 with gradually rising height can be rendered in the game interface 10, so that the game interface 10 presents an animation that the liquid carried in the first container 11 gradually rises due to the liquid poured out of the second container 12. Figure 4It can be seen from the content shown that after adjusting the position attribute and tilt angle attribute of the second container 12, the visibility attribute, position attribute and size attribute of the first object 17, and the height attribute of the second object 16, an animation of the second container 12 pouring liquid into the first container 11 and the liquid in the first container 11 gradually rising can be presented in the game interface 10. In this embodiment, by adjusting the position attribute and tilt angle attribute of the second container, the visibility attribute, position attribute and size attribute of the first object, and the height attribute of the second object, the animation of the second container pouring liquid into the first container can be quickly rendered in the game interface, which reduces the rendering complexity of the game animation, improves the rendering efficiency of the game animation, and thus improves the game experience of the player.

[0056] S150, generating a key frame animation according to the adjusted style attributes of the block elements of the second container and the second object, generating a sequence frame animation according to the adjusted style attributes of the block elements of the first object, and rendering an animation of the objects carried by the second container flowing to the first container in the game interface according to the key frame animation and the sequence frame animation.

[0057] Exemplarily, after adjusting the style attributes of the second container, the second object, and the block elements of the first object, corresponding key frames are generated based on the style attributes of the second container and the block elements of the second object, and the key frames are sorted according to the generation time to generate a key frame animation, so as to present the second container tilting toward the first container and the second object in the first container gradually rising in height through the key frame animation. A preset sequence frame animation is obtained according to the adjusted style attributes of the block elements of the first object, so as to present the liquid flowing out of the outlet of the second container flowing toward the inlet of the first container through the sequence frame animation. The key frame animation and the sequence frame animation are combined and rendered in the game interface, so that the game interface presents the liquid carried by the second container flowing toward the first container and the liquid in the first container gradually rising in height.

[0058] In this embodiment, when the target touch event is a press event, a key frame animation may be generated according to the adjusted tilt angle attribute of the block element of the second container and the adjusted height attribute of the block element of the second object, and a sequence frame animation may be generated according to the adjusted visibility attribute of the block element of the first object. Figure 5 This is a flowchart of rendering game animation provided by an embodiment of the present application. Figure 5 As shown, the step of rendering the game animation specifically includes S1501-S1503:

[0059] S1501, drawing key frames according to the tilt angle attributes of the block elements of the second container adjusted in real time and the height attributes of the block elements of the second object adjusted in real time, and generating key frame animations according to the key frames and preset key frame rules.

[0060] Exemplarily, after each adjustment of the tilt angle attribute of the second container and the height attribute of the second object, key frames are drawn according to the adjusted style attributes of the second container and the second object, and picture frames are inserted between adjacent key frames according to preset key frame rules to generate key frame animation.

[0061] S1502: Obtain a preset sequence frame animation according to the visible and invisible attributes of the block elements of the first object adjusted in real time.

[0062] Exemplarily, if the visibility attribute of the first object after adjustment is display, a pre-prepared sequence frame animation is obtained from the game resources, and the sequence frame animation presents a flowing picture of the first object.

[0063] S1503. According to the timestamps of the sequence frame animation and the key frame animation, the key frame animation and the sequence frame animation group are combined to obtain a combined animation, and the combined animation is rendered frame by frame in the game interface.

[0064] Exemplarily, the frames with the same timestamp in the sequence frame animation and the key frame animation are merged, and the merged frames are sorted in chronological order to obtain a combined animation, and the combined animation is rendered frame by frame in the game interface. At this time, the game interface displays an animation in which the second container pours into the first container under the player's pressing operation, the liquid carried by the second container flows into the first container, and the height of the liquid carried by the first container gradually rises. This embodiment uses CSS3 to quickly generate a key frame animation, combines the key frame animation with the pre-prepared sequence frame animation to quickly render the corresponding pouring animation in the game interface, and realizes smooth playback of the pouring animation.

[0065] When the target touch event is a sliding event, a key frame animation can be generated based on the adjusted position attributes and tilt angle attributes of the block elements of the second container and the adjusted height attributes of the block elements of the second object, and a sequence frame animation can be generated based on the adjusted visibility attributes, position attributes and size attributes of the block elements of the first object.

[0066] In one embodiment, during the game, the height value of the second object can be obtained in real time to determine the corresponding game result according to the height value. Figure 6 This is a flowchart of determining the game result provided by the embodiment of the present application. Figure 6 As shown, the step of determining the game result specifically includes S160-S180:

[0067] S160. Configure the height value of the second object as responsive data through the responsive data binding mechanism of the event response component, create a corresponding target event listener through the type of the target touch event, and bind the target event listener to the data update function corresponding to the height value.

[0068] Among them, the responsive data binding mechanism of the Vue3 component can be used to bind the event listener that listens to a specific time with the responsive data, so that the event listener listens to the specific event and executes the logic of updating the responsive data. After the first container and the second container are rendered in the game interface and the initial rendering of the game interface is completed, the height value of the second object can be configured as responsive data through the responsive data binding mechanism of the event response component, and the corresponding target event listener is created by the type of the target touch event. Among them, when the target touch event is a press event, a first event listener that listens to the press event is created, and when the target touch event is a sliding event, a second event listener that listens to the sliding event is created. Of course, different types of target touch events trigger different data update functions for updating the height value. When the target touch event is a press event, the data update function updates the height value of the second object based on the touch duration of the press event, and when the target touch event is a sliding event, the data update function updates the height value of the second object based on the touch position of the sliding event. Bind the target event listener to the corresponding data update function to accurately update the height value of the second object.

[0069] S170 . When the target event listener listens to the target touch event, the touch data of the target touch event is acquired through the target event listener, and a data update function is called to update the height value of the second object based on the touch data.

[0070] Exemplarily, when the target event listener listens to the target touch event, it parses the touch duration or touch position of the target touch event, and passes the touch duration or touch position as a parameter to the corresponding bound data update function, so that the data update function determines the height value of the second object at the current moment based on the touch duration or touch position. It should be noted that the height value of the second object determined by the data update function is the same as the value of the height attribute of the block element of the second object determined by the first attribute adjustment function or the second attribute adjustment function, which ensures that the game interface accurately presents the height of the second object and can accurately determine the game result based on the height of the second object.

[0071] S180. When the target event listener detects that the target touch event ends, the game result is determined through the event response component and the latest height value of the second object.

[0072] Exemplarily, when the player's finger leaves the game interface, the target event listener monitors the end of the target touch event, and the target event listener transmits the end information of the target touch event to the event response component, and the event response component determines the game result according to the latest height value of the second object newly calculated by the data update function. This embodiment uses the responsive data binding mechanism of vue3 to update the height value of the second object in real time when the target touch event is triggered, and automatically determines the game result by the height value of the second object when the target touch event is monitored to end, thereby reducing missed judgments and misjudgments of the game and improving the accuracy of the game operation.

[0073] In this embodiment, when the first container of the game interface is rendered with a scale line and a color block area, the first height range of the scale line and the second height range of the color block area can be obtained through the event response component, and the latest height value of the second object is compared with the first height range and the second height range; if the latest height value is not within the first height range, the game result is determined to be a failure, if the latest height value is within the first height range but not within the second height range, the game result is determined to be a success, and if the latest height value is within the second height range, the game result is determined to be perfect. Figure 3 , the upper limit of the first height range of the scale line can be understood as the height value of the upper scale line 15, and the lower limit of the first height range can be understood as the height value of the lower scale line 14. At the end of the target touch event, if the height of the second object 16 rendered in the game interface 10 exceeds the lower scale line 14 but is lower than the color block area 15, or exceeds the color block area 15 and is lower than the upper scale line 14, the game result is determined to be successful; if the height of the second object 16 rendered in the game interface 10 is within the color block area 15, the game result is determined to be perfect; if the height of the second object 16 rendered in the game interface 10 exceeds the upper scale line 15 or is lower than the lower scale line 14, the game result is determined to be a failure.

[0074] In one embodiment, after the game is over, the game difficulty of the next game level can be adjusted according to the game result, so that the game difficulty adapts to the player's game level and improves the player's game experience. Specifically, the game result can be obtained through the state management mechanism of the event response component, and the first height range of the scale line and the second height range of the color block area of ​​the next game level can be dynamically adjusted according to the game result. Among them, the state management mechanism is used to manage the game result and game state of each game, and the corresponding game result is obtained after the game result. If the game result is successful, the game difficulty of the next game level is increased by one level. If the game result is perfect, the game difficulty of the next game level is increased by two or more levels. If the game result is a failure, the game difficulty of the next game level remains unchanged or is reduced by one level.

[0075] In summary, the object control game running method provided by the embodiment of the present application loads the game resources of the object control game in response to the start operation of the object control game, and initializes the event response component in the game resources; renders the first container and the second container in the game interface of the object control game according to the hypertext markup language file and the cascading style file in the game resources; wherein the hypertext markup language file includes the block elements of the first container, the second container, the first object and the second object, and the cascading style file includes the style attributes of each block element; the style attributes of the block elements of the second container, the first object and the second object are bound to the type of the target touch event through the event binding mechanism of the event response component; when the target touch event is monitored, the style attributes of the block elements of the second container, the first object and the second object are adjusted in real time according to the touch data of the target touch event; a key frame animation is generated according to the adjusted style attributes of the block elements of the second container and the second object, a sequence frame animation is generated according to the adjusted style attributes of the block elements of the first object, and an animation of the objects carried by the second container flowing to the first container is rendered in the game interface according to the key frame animation and the sequence frame animation. Through the above-mentioned technical means, the target touch event triggered when the player controls the container can be bound to the style attributes of the container and objects in the game through the event binding mechanism of the event response component, so that the style attributes of the container and the object can be quickly adjusted when the target touch event is monitored, and then the updated container and object can be quickly rendered in the game interface according to the adjusted style attributes of the container and the object, and the object control animation can be smoothly played in the game interface by using the key frame rules and the preset sequence frame animation, so as to achieve real-time response to the player's operation and smooth playback of the game animation, solve the problems of high difficulty in game development and single visual effect in the prior art, reduce the development and maintenance costs of the game, and optimize the interactive experience and visual effects.

[0076] Based on the above embodiments, Figure 7 This is a schematic diagram of the structure of an object control game running device provided in an embodiment of the present application. Figure 7 The object control game running device provided in this embodiment specifically includes: a game resource loading module 21, an initial rendering module 22, an event binding module 23, a style attribute adjustment module 24 and a real-time rendering module 25.

[0077] The game resource loading module 21 is configured to load the game resources of the object control game in response to the start operation of the object control game, and initialize the event response component in the game resources;

[0078] The initial rendering module 22 is configured to render the first container and the second container in the game interface of the object control game according to the hypertext markup language file and the cascading style file in the game resources; wherein the hypertext markup language file includes the block elements of the first container, the second container, the first object and the second object, and the cascading style file includes the style attributes of each block element;

[0079] An event binding module 23 is configured to bind the style attributes of the block elements of the second container, the first object, and the second object to the type of the target touch event through the event binding mechanism of the event response component;

[0080] The style attribute adjustment module 24 is configured to adjust the style attributes of the block elements of the second container, the first object, and the second object in real time according to the touch data of the target touch event when a target touch event is monitored;

[0081] The real-time rendering module 25 is configured to generate a key frame animation according to the adjusted style attributes of the block elements of the second container and the second object, generate a sequence frame animation according to the adjusted style attributes of the block elements of the first object, and render an animation of the second container pouring water into the first container in the game interface according to the key frame animation and the sequence frame animation.

[0082] On the basis of the above embodiment, the event binding module 23 includes: a first binding unit, which is configured to create a first event listener of the press event type through the event response component when the type of the target touch event is a press event type, and bind the first event listener to the first attribute adjustment function through the event response component, and the first attribute adjustment function is used to adjust the tilt angle attribute of the block element of the second container, the visibility attribute of the block element of the first object, and the height attribute of the block element of the second object; a second binding unit, which is configured to create a second event listener of the sliding event type through the event response component when the type of the target touch event is a sliding event type, and bind the second event listener to the second attribute adjustment function through the event response component, and the second attribute function is used to adjust the position attribute and tilt angle attribute of the block element of the second container, the height attribute of the block element of the second object, and the visibility attribute, position attribute and size attribute of the block element of the first object.

[0083] On the basis of the above embodiment, the style attribute adjustment module 24 includes: a first attribute adjustment unit, configured to obtain the touch duration of the press event through the first event listener when the first event listener listens to the press event, call the first attribute adjustment function to adjust the tilt angle attribute of the block element of the second container to a preset tilt angle, adjust the visibility attribute of the block element of the first object to display, and adjust the height attribute of the block element of the second object based on the touch duration; a second attribute adjustment unit, configured to obtain the touch position of the slide event through the second event listener when the second event listener listens to the slide event, call the second attribute adjustment function to adjust the position attribute and tilt angle attribute of the block element of the second container based on the touch position, adjust the visibility attribute of the block element of the first object to display, adjust the position attribute of the block element of the first object based on the position attribute and tilt angle attribute of the block element of the second container, adjust the size attribute of the block element of the first object based on the position attribute and tilt angle attribute of the block element of the second container, and adjust the height attribute of the block element of the second object based on the position attribute and size attribute of the block element of the first object.

[0084] On the basis of the above-mentioned embodiment, the real-time rendering module 25 includes: a key frame animation generation unit, configured to draw key frames according to the tilt angle attribute of the block elements of the second container and the height attribute of the block elements of the second object adjusted in real time, and generate key frame animations according to the key frames and preset key frame rules; a sequence frame animation generation unit, configured to obtain a preset sequence frame animation according to the visibility attribute of the block elements of the first object adjusted in real time; a real-time rendering unit, configured to combine the key frame animation and the sequence frame animation group according to the timestamps of the sequence frame animation and the key frame animation to obtain a combined animation, and render the combined animation frame by frame in the game interface.

[0085] On the basis of the above embodiments, the object control game running device includes a game result determination module, which includes: a third binding unit, which is configured to, after rendering the first container and the second container in the game interface of the object control game, configure the height value of the second object as responsive data through the responsive data binding mechanism of the event response component, create a corresponding target event listener through the type of the target touch event, and bind the target event listener to the data update function corresponding to the height value; a height value update unit, which is configured to obtain the touch data of the target touch event through the target event listener when the target event listener listens to the target touch event, and call the data update function to update the height value of the second object based on the touch data; a game result determination unit, which is configured to determine the game result through the event response component and the latest height value of the second object when the target event listener listens to the end of the target touch event.

[0086] On the basis of the above embodiment, the hypertext markup language file also includes block elements of scale lines and color block areas; accordingly, the initial rendering module also includes: an initial rendering unit, configured to render the first container and the second container in the game interface of the object control game according to the hypertext markup language file and the cascading style file in the game resources, and render the scale lines and the color block area in the first container; accordingly, the game result determination unit includes: a height value comparison subunit, configured to obtain the first height range of the scale lines and the second height range of the color block area through the event response component, and compare the latest height value of the second object with the first height range and the second height range; a game result determination subunit, configured to determine that the game result is a failure when the latest height value is not within the first height range, determine that the game result is a success when the latest height value is within the first height range but not within the second height range, and determine that the game result is perfect when the latest height value is within the second height range.

[0087] On the basis of the above-mentioned embodiment, the object control game running device also includes: a game difficulty adjustment module, which is configured to obtain the game result through the state management mechanism of the event response component after determining the game result through the event response component and the latest height value of the second object, and dynamically adjust the first height range of the scale line of the next game level and the second height range of the color block area according to the game result.

[0088] As described above, the object control game running device provided by the embodiment of the present application loads the game resources of the object control game in response to the start operation of the object control game, and initializes the event response component in the game resources; renders the first container and the second container in the game interface of the object control game according to the hypertext markup language file and the cascading style file in the game resources; wherein the hypertext markup language file includes the block elements of the first container, the second container, the first object and the second object, and the cascading style file includes the style attributes of each block element; the style attributes of the block elements of the second container, the first object and the second object are bound to the type of the target touch event through the event binding mechanism of the event response component; when the target touch event is monitored, the style attributes of the block elements of the second container, the first object and the second object are adjusted in real time according to the touch data of the target touch event; a key frame animation is generated according to the adjusted style attributes of the block elements of the second container and the second object, a sequence frame animation is generated according to the adjusted style attributes of the block elements of the first object, and an animation of the objects carried by the second container flowing to the first container is rendered in the game interface according to the key frame animation and the sequence frame animation. Through the above-mentioned technical means, the target touch event triggered when the player controls the container can be bound to the style attributes of the container and objects in the game through the event binding mechanism of the event response component, so that the style attributes of the container and the object can be quickly adjusted when the target touch event is monitored, and then the updated container and object can be quickly rendered in the game interface according to the adjusted style attributes of the container and the object, and the object control animation can be smoothly played in the game interface by using the key frame rules and the preset sequence frame animation, so as to achieve real-time response to the player's operation and smooth playback of the game animation, solve the problems of high difficulty in game development and single visual effect in the prior art, reduce the development and maintenance costs of the game, and optimize the interactive experience and visual effects.

[0089] The object control game running device provided in the embodiment of the present application can be used to execute the object control game running method provided in the above embodiment, and has corresponding functions and beneficial effects.

[0090] Figure 8 This is a schematic diagram of the structure of an object control game running device provided in an embodiment of the present application, with reference to Figure 8 The object-controlled game running device includes: a processor 31, a memory 32, a communication device 33, an input device 34, and an output device 35. The number of processors 31 in the object-controlled game running device can be one or more, and the number of memories 32 in the object-controlled game running device can be one or more. The processor 31, memory 32, communication device 33, input device 34, and output device 35 of the object-controlled game running device can be connected via a bus or other means.

[0091] The memory 32, as a computer-readable storage medium, can be used to store software programs, computer executable programs and modules, such as program instructions / modules corresponding to the object control game running method of any embodiment of the present application (for example, the game resource loading module 21, the initial rendering module 22, the event binding module 23, the style attribute adjustment module 24 and the real-time rendering module 25 in the object control game running device). The memory 32 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application required for at least one function; the storage data area may store data created according to the use of the device, etc. In addition, the memory 32 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage devices. In some instances, the memory may further include a memory remotely arranged relative to the processor, and these remote memories may be connected to the device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network and a combination thereof.

[0092] The communication device 33 is used for data transmission.

[0093] The processor 31 executes various functional applications and data processing of the device by running the software programs, instructions and modules stored in the memory 32, that is, realizes the above-mentioned object control game running method.

[0094] The input device 34 may be used to receive input digital or character information and generate key signal input related to user settings and function control of the device. The output device 35 may include a display device such as a display screen.

[0095] The object control game running device provided above can be used to execute the object control game running method provided in the above embodiment, and has corresponding functions and beneficial effects.

[0096] The embodiment of the present application also provides a storage medium containing computer executable instructions, which are used to execute a method for running an object control game when executed by a computer processor. The method for running an object control game includes: loading game resources of the object control game in response to a startup operation of the object control game, and initializing event response components in the game resources; rendering a first container and a second container in a game interface of the object control game according to a hypertext markup language file and a cascading style file in the game resources; wherein the hypertext markup language file includes block elements of the first container, the second container, the first object, and the second object, and the cascading style file includes The method comprises the following steps: adjusting the style attributes of the block elements of the second container, the first object and the second object in real time according to the touch data of the target touch event when the target touch event is monitored; generating a key frame animation according to the adjusted style attributes of the block elements of the second container and the second object, generating a sequence frame animation according to the adjusted style attributes of the block elements of the first object, and rendering an animation of the objects carried by the second container flowing to the first container in the game interface according to the key frame animation and the sequence frame animation.

[0097] Storage medium - any of various types of memory devices or storage devices. The term "storage medium" is intended to include: installation media, such as CD-ROM, floppy disk or tape device; computer system memory or random access memory, such as DRAM, DDR RAM, SRAM, EDO RAM, Rambus RAM, etc.; non-volatile memory, such as flash memory, magnetic media (such as hard disk or optical storage); registers or other similar types of memory elements, etc. Storage media may also include other types of memory or combinations thereof. In addition, the storage medium may be located in the first computer system in which the program is executed, or may be located in a different second computer system, which is connected to the first computer system via a network (such as the Internet). The second computer system can provide program instructions to the first computer for execution. The term "storage medium" may include two or more storage media residing in different locations (for example, in different computer systems connected by a network). The storage medium may store program instructions (for example, embodied as a computer program) that can be executed by one or more processors.

[0098] Of course, the storage medium containing computer executable instructions provided in the embodiment of the present application is not limited to the above-mentioned object control game running method, and the computer executable instructions can also execute related operations in the object control game running method provided in any embodiment of the present application.

[0099] The object-controlled game running device, storage medium and object-controlled game running equipment provided in the above embodiments can execute the object-controlled game running method provided in any embodiment of the present application. For technical details not described in detail in the above embodiments, please refer to the object-controlled game running method provided in any embodiment of the present application.

[0100] The above are only preferred embodiments of the present application and the technical principles used. The present application is not limited to the specific embodiments herein, and various obvious changes, readjustments and substitutions that can be made by those skilled in the art will not deviate from the protection scope of the present application. Therefore, although the present application is described in more detail through the above embodiments, the present application is not limited to the above embodiments, and may include more other equivalent embodiments without departing from the concept of the present application, and the scope of the present application is determined by the scope of the claims.

Claims

1. A method for running an object control game, characterized in that: include: In response to a start operation of the object control game, game resources of the object control game are loaded, and event response components in the game resources are initialized; Rendering a first container and a second container in a game interface of the object control game according to a hypertext markup language file and a cascading style sheet file in the game resources; wherein the hypertext markup language file includes block elements of the first container, the second container, the first object, and the second object, and the cascading style sheet file includes style attributes of each of the block elements; Binding the style attributes of the second container, the first object, and the block elements of the second object to the type of the target touch event through the event binding mechanism of the event response component; When the target touch event is monitored, adjusting the style attributes of the second container, the first object, and the block elements of the second object in real time according to the touch data of the target touch event; A key frame animation is generated according to the adjusted style attributes of the block elements of the second container and the second object, a sequence frame animation is generated according to the adjusted style attributes of the block elements of the first object, and an animation of the objects carried by the second container flowing to the first container is rendered in the game interface according to the key frame animation and the sequence frame animation.

2. The object control game running method according to claim 1, characterized in that: The binding of the style attributes of the second container, the first object, and the block elements of the second object with the type of the target touch event through the event binding mechanism of the event response component includes: In the case where the type of the target touch event is a press event type, a first event listener of the press event type is created through the event response component, and the first event listener is bound to a first property adjustment function through the event response component, wherein the first property adjustment function is used to adjust the tilt angle property of the block element of the second container, the visibility property of the block element of the first object, and the height property of the block element of the second object; In the case where the type of the target touch event is a sliding event type, a second event listener of the sliding event type is created through the event response component, and the second event listener is bound to a second property adjustment function through the event response component. The second property function is used to adjust the position attribute and tilt angle attribute of the block element of the second container, the height attribute of the block element of the second object, and the visibility attribute, position attribute and size attribute of the block element of the first object.

3. The object control game running method according to claim 2, characterized in that: When the target touch event is monitored, adjusting the style attributes of the second container, the first object, and the block elements of the second object in real time according to the touch data of the target touch event includes: In the case where the first event listener listens to the press event, the touch duration of the press event is obtained through the first event listener, the first attribute adjustment function is called to adjust the tilt angle attribute of the block element of the second container to a preset tilt angle, the visibility attribute of the block element of the first object is adjusted to display, and the height attribute of the block element of the second object is adjusted based on the touch duration; In the case where the second event listener listens to the sliding event, the touch position of the sliding event is obtained through the second event listener, and the second attribute adjustment function is called to adjust the position attribute and the tilt angle attribute of the block element of the second container based on the touch position, and the visibility attribute of the block element of the first object is adjusted to display, and the position attribute of the block element of the first object is adjusted based on the position attribute and the tilt angle attribute of the block element of the second container, and the size attribute of the block element of the first object is adjusted based on the position attribute and the tilt angle attribute of the block element of the second container, and the height attribute of the block element of the second object is adjusted based on the position attribute and the size attribute of the block element of the first object.

4. The object control game running method according to claim 2, characterized in that: The step of generating a key frame animation according to the adjusted style attributes of the block elements of the second container and the second object, generating a sequence frame animation according to the adjusted style attributes of the block elements of the first object, and rendering an animation of the object carried by the second container flowing to the first container on the game interface according to the key frame animation and the sequence frame animation includes: Drawing key frames according to the tilt angle attribute of the block element of the second container adjusted in real time and the height attribute of the block element of the second object adjusted in real time, and generating key frame animation according to the key frames and preset key frame rules; Obtaining a preset sequence frame animation according to the visible and invisible attributes of the block elements of the first object adjusted in real time; According to the timestamps of the sequence frame animation and the key frame animation, the key frame animation and the sequence frame animation group are combined to obtain a combined animation, and the combined animation is rendered frame by frame in the game interface.

5. The object control game running method according to claim 1, characterized in that: After rendering the first container and the second container in the game interface of the object control game, the method further includes: By means of the responsive data binding mechanism of the event response component, the height value of the second object is configured as responsive data, a corresponding target event listener is created by means of the type of the target touch event, and the target event listener is bound to a data update function corresponding to the height value; When the target event listener listens to the target touch event, the touch data of the target touch event is acquired through the target event listener, and the data update function is called to update the height value of the second object based on the touch data; When the target event listener detects that the target touch event ends, the game result is determined by the event response component and the latest height value of the second object.

6. The object control game running method according to claim 5, characterized in that: The hypertext markup language file also includes block elements of tick marks and color block areas; Correspondingly, the rendering of the first container and the second container in the game interface of the object control game according to the hypertext markup language file and the cascading style sheet file in the game resources includes: Rendering a first container and a second container in a game interface of the object control game according to the hypertext markup language file and the cascading style sheet file in the game resources, and rendering tick marks and color block areas in the first container; Correspondingly, determining the game result through the event response component and the latest height value of the second object includes: Acquire a first height range of the scale line and a second height range of the color block area through the event response component, and compare the latest height value of the second object with the first height range and the second height range; When the latest height value is not within the first height range, the game result is determined to be a failure; when the latest height value is within the first height range but not within the second height range, the game result is determined to be a success; and when the latest height value is within the second height range, the game result is determined to be perfect.

7. The object control game running method according to claim 5, characterized in that: After determining the game result through the event response component and the latest height value of the second object, the method further includes: The game result is obtained through the state management mechanism of the event response component, and the first height range of the scale line and the second height range of the color block area of ​​the next game level are dynamically adjusted according to the game result.

8. An object-controlled game running device, characterized in that: include: A game resource loading module, configured to load game resources of the object control game in response to a start operation of the object control game, and initialize event response components in the game resources; An initial rendering module is configured to render a first container and a second container in a game interface of the object control game according to a hypertext markup language file and a cascading style sheet file in the game resources; wherein the hypertext markup language file includes block elements of the first container, the second container, the first object and the second object, and the cascading style sheet file includes style attributes of each of the block elements; An event binding module, configured to bind the style attributes of the second container, the first object, and the block elements of the second object to the type of the target touch event through the event binding mechanism of the event response component; a style attribute adjustment module, configured to adjust the style attributes of the second container, the first object, and the block elements of the second object in real time according to the touch data of the target touch event when the target touch event is monitored; The real-time rendering module is configured to generate a key frame animation according to the adjusted style attributes of the block elements of the second container and the second object, generate a sequence frame animation according to the adjusted style attributes of the block elements of the first object, and render an animation of the second container pouring water into the first container in the game interface according to the key frame animation and the sequence frame animation.

9. An object-controlled game running device, characterized in that: include: one or more processors; A memory stores one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the object control game running method as described in any one of claims 1-7.

10. A storage medium containing computer executable instructions, characterized in that: The computer executable instructions are used to execute the object control game running method as described in any one of claims 1-7 when executed by a computer processor.

Images