Methods, devices, equipment, and storage media for running object-controlled games

Abstract

This application discloses a method, apparatus, device, and storage medium for running an object-controlled game, comprising: loading game resources of the object-controlled game and initializing an event response component in the game resources; rendering a first container and a second container in the game interface of the object-controlled game according to the hypertext markup language file and cascading style file in the game resources; binding the style attributes of the second container, the first object, and the second object to the type of a target touch event through the event binding mechanism of the event response component; adjusting the style attributes of the second container, the first object, and the second object according to the touch data of the target touch event when a target touch event is detected; generating a keyframe animation based on the adjusted style attributes of the second container and the second object, generating a sequence frame animation based on the adjusted style attributes of the first object, and rendering an animation of the object carried by the second container flowing to the first container in the game interface according to the keyframe animation and the sequence frame animation.

Description

Technical Field

[0001] This application relates to the field of game technology, and in particular to a method, apparatus, device and storage medium for running object-controlled games. Background Technology

[0002] There are many types of object-controlled mini-games on the market today. For example, physics-based water-pouring games are widely popular due to their simple and fun gameplay. In these games, players control a bottle containing liquid or solid to pour, causing the liquid or solid to flow into a cup below. The success of the game is determined by the height of the liquid in the cup.

[0003] In existing technologies, most water-pouring games are developed based on canvas or other graphics libraries. However, development based on canvas or other graphics libraries is more complex, increasing the development and maintenance costs of the game. Moreover, the animation effects of games developed using canvas or other graphics libraries are relatively simple and lack visual appeal. Summary of the Invention

[0004] This application provides a method, apparatus, device, and storage medium for running object-controlled games. It achieves 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. It solves the problems of high game development difficulty and monotonous visual effects in the prior art, reduces the development and maintenance costs of games, and optimizes the interactive experience and visual effects.

[0005] Firstly, this application provides a method for running an object-controlled game, including:

[0006] In response to the launch operation of an object-controlled game, load the game resources of the object-controlled game and initialize the event response components in the game resources;

[0007] Based on the Hypertext Markup Language (HTML) file and Cascading Style Sheets (CSS) file in the game resources, a first container and a second container are rendered in the game interface of the object-controlled game; wherein, the HTML file includes block elements of the first container, the second container, the first object, and the second object, and the CSS file includes style attributes for each block element;

[0008] The event binding mechanism of the event response component binds 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;

[0009] Upon detecting the target touch event, the style attributes of the block elements of the second container, the first object, and the second object are adjusted in real time based on the touch data of the target touch event.

[0010] A keyframe animation is generated based on the adjusted style attributes of the block elements of the second container and the second object. A sequence frame animation is generated based on the adjusted style attributes of the block elements of the first object. The animation of the object carried by the second container flowing into the first container is rendered on the game interface based on the keyframe animation and the sequence frame animation.

[0011] Secondly, this application provides an object-controlled game running device, comprising:

[0012] The game resource loading module is configured to load the game resources of the object-controlled game in response to the launch operation of the object-controlled game, and initialize the event response components in the game resources;

[0013] The initial rendering module is configured to render a first container and a second container in the game interface of the object-controlled game based on the hypertext markup language file and 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 style attributes for each of the block elements;

[0014] The event binding module 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;

[0015] The style attribute adjustment module is 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 detected.

[0016] The real-time rendering module is configured to generate keyframe animations based on the style attributes of the block elements of the second container and the second object after adjustment, generate sequence frame animations based on the style attributes of the block elements of the first object, and render an animation of the second container pouring water into the first container on the game interface based on the keyframe animations and the sequence frame animations.

[0017] Thirdly, this application provides an object-controlled game running device, including:

[0018] One or more processors;

[0019] A memory that stores one or more programs, which, when executed by one or more processors, cause the one or more processors to implement the object-controlled game running method as described in the first aspect.

[0020] Fourthly, this application provides a storage medium containing computer-executable instructions, which, when executed by a computer processor, are used to perform the object-controlled game running method as described in the first aspect.

[0021] In this application, game resources of an object-controlled game are loaded in response to the launch operation of the game, and event response components in the game resources are initialized. Based on the Hypertext Markup Language (HTML) file and Cascading Style Sheets (CSS) file in the game resources, a first container and a second container are rendered in the game interface of the object-controlled game. The HTML file includes block elements of the first container, the second container, the first object, and the second object; the CSS file includes style attributes for 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. Upon detecting a target touch event, the style attributes of the block elements of the second container, the first object, and the second object are adjusted in real time based on the touch data of the target touch event. Keyframe animations are generated based on the adjusted style attributes of the block elements of the second container and the second object; a sequence frame animation is generated based on the adjusted style attributes of the block elements of the first object; and an animation of the object carried by the second container flowing into the first container is rendered in the game interface based on the keyframe animation and the sequence frame animation. Through the aforementioned technical means, the event binding mechanism of the event response component can bind the target touch event triggered when the player controls the container to the style attributes of the container and object in the game. This allows for rapid adjustment of the style attributes of the container and object when the target touch event is detected. Subsequently, the updated container and object are quickly rendered in the game interface based on the adjusted style attributes. By utilizing keyframe rules and preset sequence frame animations, object control animations can be smoothly played in the game interface, achieving real-time response to player operations and smooth playback of game animations. This solves the problems of high game development difficulty and monotonous visual effects in existing technologies, reduces game development and maintenance costs, and optimizes the interactive experience and visual effects. Attached Figure Description

[0022] Figure 1 This is a flowchart of an object-controlled game running method provided in an embodiment of this application;

[0023] Figure 2 This is a first schematic diagram of the game interface provided in the embodiments of this application;

[0024] Figure 3This is a second schematic diagram of the game interface provided in the embodiments of this application;

[0025] Figure 4 This is a third schematic diagram of the game interface provided in the embodiments of this application;

[0026] Figure 5 This is a flowchart of rendering game animation provided in an embodiment of this application;

[0027] Figure 6 This is a flowchart for determining the game result provided in an embodiment of this application;

[0028] Figure 7 This is a schematic diagram of the structure of an object-controlled game running device provided in an embodiment of this application;

[0029] Figure 8 This is a schematic diagram of the structure of an object-controlled game running device provided in an embodiment of this application. Detailed Implementation

[0030] To make the objectives, technical solutions, and advantages of this application clearer, specific embodiments of this application will be described in further detail below with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are merely for explaining this application and not for limiting it. It should also be noted that, for ease of description, only the parts relevant to this application are shown in the drawings, not all of them. Before discussing exemplary embodiments in more detail, it should be mentioned that some exemplary embodiments are described as processes or methods depicted as flowcharts. Although the flowcharts describe operations (or steps) as sequential processes, many of these operations can be performed in parallel, concurrently, or simultaneously. Furthermore, the order of the operations can be rearranged. A process can be terminated when its operation is completed, but it may also have additional steps not included in the drawings. A process can correspond to a method, function, procedure, subroutine, subroutine, etc.

[0031] The terms "first," "second," etc., used in the specification and claims of this application are used to distinguish similar objects and not to describe a specific order or sequence. It should be understood that such use of data can be interchanged where appropriate so that embodiments of this application can be implemented in orders other than those illustrated or described herein, and the objects distinguished by "first," "second," etc., are generally of the same class and the number of objects is not limited; for example, a first container can be one or more. Furthermore, in the specification and claims, "and / or" indicates at least one of the connected objects, and the character " / " generally indicates that the preceding and following objects are in an "or" relationship.

[0032] In most common existing implementations, water-pouring games are developed using canvas or other graphics libraries. However, development based on canvas or other graphics libraries is more complex, increasing the development and maintenance costs of the game. Moreover, the animation effects of games developed using canvas or other graphics libraries are relatively simple and lack visual appeal.

[0033] To address the aforementioned issues, this embodiment provides a method for running object-controlled games. This method utilizes the event binding mechanism of an event response component to achieve real-time responses to player actions, and leverages the style attributes of block elements to enable rapid rendering of containers and objects and smooth playback of object control animations. This reduces 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. This object-controlled game running device can be implemented through software and / or hardware. The object-controlled game running device can consist of two or more physical entities, or it can consist of a single physical entity. For example, the object-controlled game running device can be a terminal device such as a mobile phone or tablet.

[0035] The object-controlled game running device has at least one operating system installed, including but not limited to Android, Linux, and Windows. The object-controlled game running device can install at least one application based on the operating system; the application can be a built-in application of 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 one application capable of executing object-controlled game running methods; this application can be an object-controlled game.

[0036] For ease of understanding, this embodiment uses a terminal device as the execution object to describe the main body of the game operation method.

[0037] Figure 1 A flowchart of an object-controlled game running method provided in an embodiment of this application is given.

[0038] refer to Figure 1 The specific methods for controlling the game's operation in this object control class include:

[0039] S110. In response to the launch operation of an object-controlled game, load the game resources of the object-controlled game and initialize the event response components in the game resources.

[0040] In this embodiment, the object-control game is one in which the player manipulates a second container to pour objects from the second container into a first container, such as a water-pouring game or a sand-pouring game. The first and second containers can be cups, bottles, boxes, or other containers capable of holding objects, and the objects can be liquids or solids. The types of the first and second containers and the objects are not specifically limited. This embodiment describes an object-control game where the player manipulates a second container to pour liquid from the second container into the first container.

[0041] The launch operation is triggered when a player starts an object-controlled game, specifically when the game's icon is clicked. Upon detecting this launch operation, the system responds by loading the game's resources into memory. These resources include event-responding components, HTML files, and CSS files. The event-responding components are Vue 3 components. The HTML files include block elements representing a first container, a second container, a first object, and the second object. The CSS files contain style properties for each block element. The first object is the object that flows when the second container pours water into the first container. The second object can be understood as the object added to the first container when the second container pours water into the first container. For example, in a water-pouring game, the first object is the liquid flowing in mid-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 utilizes CSS3 and Vue3 components to develop an object-controlled game. By leveraging Vue3's responsive framework and CSS3's animation effects, it provides a more efficient and flexible development experience for the game, reducing development and maintenance costs while optimizing the interactive experience and visual effects.

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

[0043] After loading game resources into memory, the event response components within those resources are initialized so that they can respond to player actions later. During the game resource loading process, a loading message is displayed on the game interface to allow players to wait for the resources to load.

[0044] S120. Based on the Hypertext Markup Language file and Cascading Style File in the game resources, render the first container and the second container in the game interface of the object control game.

[0045] For example, based on the block elements (div elements) of the first and second containers in the Hypertext Markup Language file, the style properties of the block elements of the first and second containers are obtained from the Cascading Style Sheets (CSS) file. The first and second containers are then rendered in the game interface based on these style properties. The style properties of the block elements of the first and second containers define their appearance attributes, such as position, tilt angle, shape, size, and color. These CSS3 style properties allow for rapid rendering of the first and second containers in the game interface. For instance, Figure 2 This is a first schematic diagram of the game interface provided in an embodiment of this application. For example... 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 a tilt angle of 90 degrees, and the first container 11 is placed on the horizontal surface with a tilt angle of 0 degrees.

[0046] In this embodiment, the Hypertext Markup Language (HTML) file also includes block elements such as tick marks and color blocks. Based on the HTML file and Cascading Style Sheets (CSS) file in the game resources, a first container and a second container can be rendered in the game interface of an object-controlled game. Tick marks and color blocks are rendered in the first container. The tick marks and color blocks indicate the liquid level in the first container when the game is successful. Players can determine when to end control of the second container based on the liquid level in the first container and the tick marks and color blocks. (Reference) Figure 2 The scale lines include an upper scale line 13 and a lower scale line 14. The color block area 15 is located between the upper scale line 13 and the lower scale line 14 and its thickness is less than the distance between the upper scale line 13 and the lower scale line 14.

[0047] S130. Bind the style properties 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.

[0048] The target touch event is triggered when the player pours liquid from the first container into the second container. Vue 3's event binding mechanism can be used to bind event listeners to elements that listen for specific events, allowing the element's logic to be executed when the event listener detects a specific event. In this embodiment, after rendering the first and second containers to complete the initial rendering of the game interface, the event binding mechanism of the event response component can bind the style properties of the block elements of the second container, the first object, and the second object to the type of the target touch event. This allows the event response component to respond to the target touch event in real time when the event listener detects it, adjusting the style properties of the block elements of the second container, the first object, and the second object based on the touch data. This, combined with the adjusted style properties and CSS3 animation effects, enables a smooth water-pouring animation to play in the game interface, achieving real-time response to player actions and smooth playback of object control animations.

[0049] In one embodiment, the target touch event types include press event types and swipe event types. That is, the user can control the second container to pour liquid into the first container through a press or swipe operation. Different event listeners can be used to listen for different types of target touch events, and different responses can be made to different types of target touch events. Correspondingly, by binding the style attributes of the block elements of the second container, the first object, and the second object to the type of target touch event through an 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 enabling different event handling logic.

[0050] When the target touch event is a press event, a first event listener of the press event type is created using the event response component. This first event listener is then bound to a first property adjustment function via the event response component. The first property adjustment function is used to adjust the tilt angle of the block element in the second container, the visibility of the block element in the first object, and the height of the block element in the second object. Specifically, the first event listener listens for press events; when the user presses the second container in the game interface, a press event is triggered, and the first event listener can detect this press event. After the first and second containers are rendered in the game interface to complete the initial rendering of the game interface, the event response component creates the first event listener to listen for press events and binds it to the first property adjustment function. This ensures that when the first event listener detects a press event, it passes the press event as a parameter to the first property adjustment function. The first attribute adjustment function adjusts the tilt angle attribute of the second container's block element, the visibility attribute of the first object's block element, and the height attribute of the second object's block element based on the press event. Then, based on the adjusted tilt angle attribute of the second container's block element, the visibility attribute of the first object's block element, and the height attribute of the second object's block element, the function quickly renders the scene in the game interface where the second container pours liquid into the first container under the player's press operation. This achieves a fast response to the press event while ensuring the rendering speed of the game screen.

[0051] When the target touch event is a swipe event, a second event listener of the swipe event type is created using an event response component. This second event listener is then bound to a second property adjustment function via the event response component. The second property function adjusts the position and tilt angle of the block elements in the second container, the height of the block elements in the second object, and the visibility, position, and size of the block elements in the first object. Specifically, the second event listener listens for swipe events; when the user swipes the second container in the game interface, a swipe event is triggered, and the second event listener can detect and respond to this swipe event. After the first and second containers are rendered in the game interface to complete the initial rendering of the game interface, the event response component creates a second event listener to listen for swipe events and binds it to the second property adjustment function. This ensures that when the second event listener detects a swipe event, it passes the swipe event as a parameter to the second property adjustment function. The second attribute adjustment function adjusts the position and tilt angle attributes of the block elements of the second container, the visibility, position, and size attributes of the block elements of the first object, and the height attribute of the second object based on the sliding event. Then, based on the adjusted position and tilt angle attributes of the block elements of the second container, the visibility, position, and size attributes of the block elements of the first object, and the height attribute of the second object, the function quickly renders the scene in the game interface where the second container pours liquid into the first container under the player's sliding operation. This achieves a fast response to the sliding event while ensuring the rendering speed of the game screen.

[0052] S140. Upon detecting a target touch event, adjust the style properties of the block elements of the second container, the first object, and the second object in real time based on the touch data of the target touch event.

[0053] The touch data includes touch location and / or touch duration. Touch location is the pixel coordinates of the game interface touched by the user when the target touch event is triggered, and touch duration is the duration of contact with the game interface when the target touch event is triggered. When the event response component detects a target touch event through an event listener, it parses the touch data of the target touch event, calls the corresponding adjustment function based on the touch data to adjust the style properties of the block elements of the second container, the first object, and the second object, and then renders the scene in the game interface where the second container pours liquid into the first container under the player's control, based on the adjusted style properties.

[0054] In this embodiment, when the first event listener detects a press event, it obtains the touch duration of the press event through the first event listener, calls the first attribute adjustment function to adjust the tilt angle attribute of the block element of the second container to a preset tilt angle, adjusts the visibility attribute of the block element of the first object to be displayed, and adjusts the height attribute of the block element of the second object based on the touch duration. 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. For example, the first event listener parses the press event detected in real time to obtain the touch duration corresponding to the press event, that is, the duration for which the player presses 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 This is a second schematic diagram of the game interface provided in the embodiments of this application. For example... Figure 3 As shown, after increasing the tilt angle attribute of the block element of the second container 12 from 90 degrees to 135 degrees, the second container 12 tilts downwards with its outlet facing the first container 11. The game interface 10 displays the state of the second container 12 as it pours liquid into the first container 11. Simultaneously, the first attribute adjustment function changes 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 subsequently based on its other style attributes. (Reference) Figure 3 The first object 17 represents the flowing liquid between the outlet of the second container 12 and the inlet of the first container 11. After changing the visibility attribute of the block element of the first object from hidden to visible, the first object 17 can be rendered in the game interface 10, making the game interface 10 appear as if the liquid is flowing from the second container 12 to the first container 11. Simultaneously, the first attribute adjustment function determines the height attribute of the second object corresponding to the current touch duration based on 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 based on the height attribute of the block element of the second object. The positive correlation can be linear, and the height attribute is zero when the touch duration is zero. (Reference) Figure 3The second object 16 is the liquid contained in the first container 11. Since the touch duration and the height of the second object 16 are positively correlated, the height attribute of the second object 16 increases with the touch duration. The height attribute of the second object 16 gradually increases from zero, allowing the game interface 10 to render a gradually rising second object 16, thus creating an animation on the game interface 10 of the liquid in the first container 11 gradually rising due to the liquid poured from the second container 12. Figure 3 As shown, by adjusting the tilt angle of the second container 12, the visibility of the first object 17, and the height of the second object 16, an animation can be displayed in the game interface 10 showing the second container 12 pouring liquid into the first container 11 and the liquid gradually rising in the first container 11. This embodiment achieves rapid rendering of the animation of the second container pouring liquid into the first container in the game interface by adjusting the tilt angle of the second container, the visibility of the first object, and the height of the second object. This reduces the rendering complexity of the game animation, improves the rendering efficiency of the game animation, and thus enhances the player's gaming experience.

[0055] When a swipe event is detected by the second event listener, the touch position of the swipe event is obtained through the second event listener. The second attribute adjustment function is then called to adjust the position and tilt angle attributes of the block elements of the second container based on the touch position. The visibility attribute of the block elements of the first object is adjusted to be visible. The position attributes of the block elements of the first object are adjusted based on the position and tilt angle attributes of the block elements of the second container. The size attributes of the block elements of the first object are also adjusted based on the position and size attributes of the block elements of the second object. The height attribute of the block elements of the second object is adjusted based on the position and size attributes of the block elements of the first object. 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 elements of the first object. For example, the second event listener parses the swipe event detected in real time to obtain the touch position corresponding to the swipe event, that is, the position where the player swipes 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 start position and an end position. The second attribute adjustment function determines the horizontal and vertical coordinate distances between the start and end positions. The horizontal coordinate distance is added to the horizontal coordinate of the current block element's position attribute to obtain the adjusted position attribute of the block element in the second container. The arctangent of the ratio between the vertical and horizontal coordinate distances is added to the 90-degree angle to obtain the tilt angle attribute of the block element in the second container after adjustment. Figure 4 This is a third schematic diagram of the game interface provided in the embodiments of this application. For example... Figure 4 As shown, assume the user presses and holds the second container 12 (initially rendered) in the game interface 10. Figure 4The second container 12 (drawn by a dashed line) is moved to the right and rotated downwards to trigger a sliding event. The second attribute adjustment function can adjust the position and tilt angle attributes of the block elements of the second container 12 according to the start and end positions of the sliding event. The second container 12 is rendered according to the position and tilt angle attributes of the block elements of the second container 12 so that point A of the second container 12 is translated and rotated downwards to point B. The sum of angle c and 90 degrees is the tilt angle attribute of the adjusted block elements of the second container 12. The rendered second container 12 is translated to the right and tilted downwards with the outlet facing the first container 11. The game interface 10 shows the state of the second container 12 when it pours liquid into the first container 11. Simultaneously, the second attribute adjustment function changes the visibility of the block elements of the first object from hidden to visible. Based on the adjusted position and tilt angle of the block elements of the second container, it determines the position of the exit after re-rendering. Based on the exit position, it determines the adjusted position attribute of the first object. Based on the adjusted position attributes of the block elements of the second and first containers, it determines the height difference between the inlet and outlet of the first container. Based on this height difference, it determines the height of the first object. Based on the adjusted tilt angle of the block elements of the second container, it determines the width of the first object. Based on the height and width of the first object, it determines the adjusted size attribute of the first object. (Reference) Figure 4 After changing the visibility attribute of the block element of the first object 17 from hidden to visible, the first object 17 can be rendered in the game interface 10 according to its size and position attributes. This makes the game interface 10 appear as if liquid is flowing from the second container 12 to the first container 11, with the size of the flowing liquid adapted to the tilt angle and height of the second container. Simultaneously, 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 and the inlet position of the first container, and determines the adjusted height attribute of the second object based on 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. The height attribute of the second object 16 gradually increases from zero, allowing the game interface 10 to render a gradually rising second object 16, thus creating an animation on the game interface 10 of the liquid in the first container 11 gradually rising due to the liquid poured out from the second container 12. Figure 4As shown, by adjusting the position and tilt angle attributes of the second container 12, the visibility, position, and size attributes 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 gradually rising in the first container 11 can be displayed in the game interface 10. This embodiment achieves rapid rendering of the animation of the second container pouring liquid into the first container in the game interface by adjusting the position and tilt angle attributes of the second container, the visibility, position, and size attributes of the first object, and the height attribute of the second object. This reduces the rendering complexity of the game animation, improves the rendering efficiency of the game animation, and thus enhances the player's gaming experience.

[0056] S150. Generate keyframe animation based on the adjusted style properties of the block elements of the second container and the second object, generate sequence frame animation based on the adjusted style properties of the block elements of the first object, and render the animation of the object carried by the second container flowing to the first container in the game interface based on the keyframe animation and the sequence frame animation.

[0057] For example, after adjusting the style attributes of the block elements of the second container, the second object, and the first object, corresponding keyframes are generated based on the style attributes of the block elements of the second container and the second object. These keyframes are then sorted according to their generation time to generate a keyframe animation, which depicts the second container tilting towards the first container and the second object in the first container gradually increasing in height. A preset sequence of frame animations is obtained based on the adjusted style attributes of the block elements of the first object, which depicts the liquid flowing from the outlet of the second container towards the inlet of the first container. The keyframe animations and the sequence of frame animations are combined and rendered in the game interface to show the liquid in the second container flowing towards the first container and the liquid level in the first container gradually increasing.

[0058] In this embodiment, when the target touch event is a press event, keyframe animation can be generated based on the adjusted tilt angle attribute of the block elements of the second container and the adjusted height attribute of the block elements of the second object, and sequence frame animation can be generated based on the adjusted visibility attribute of the block elements of the first object. For example, Figure 5 This is a flowchart of the rendering of game animation provided in an embodiment of this application. For example... Figure 5 As shown, the specific steps for rendering the game animation include S1501-S1503:

[0059] S1501. Draw keyframes based on the tilt angle attribute of the block element of the second container after real-time adjustment and the height attribute of the block element of the second object after real-time adjustment, and generate keyframe animation based on the keyframes and preset keyframe rules.

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

[0061] S1502. Obtain the preset sequence frame animation based on the real-time adjusted visibility attributes of the block elements of the first object.

[0062] For example, if the visibility attribute of the first object is adjusted to be visible, then a pre-prepared sequence frame animation is obtained from the game resources, and the sequence frame animation presents the flowing scene of the first object.

[0063] S1503. Based on the timestamps of the sequence frame animation and the key frame animation, combine the key frame animation and the sequence frame animation group to obtain a combined animation, and render the combined animation frame by frame in the game interface.

[0064] For example, frames with the same timestamps in the sequence frame animation and keyframe animation are merged. The merged frames are then sorted according to their chronological order to obtain a combined animation, which is rendered frame by frame in the game interface. At this point, the game interface displays an animation of the second container pouring liquid into the first container under the player's pressing action, the liquid in the second container flowing into the first container, and the liquid level in the first container gradually rising. This embodiment uses CSS3 to quickly generate keyframe animations, combining them with pre-prepared sequence frame animations to quickly render the corresponding water-pouring animation in the game interface, achieving smooth playback of the water-pouring animation.

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

[0066] In one embodiment, during gameplay, the height value of the second object can be acquired in real time to determine the corresponding game result. For example, Figure 6 This is a flowchart for determining the game result provided in an embodiment of this application. For example... Figure 6 As shown, the steps for determining the game result specifically include S160-S180:

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

[0068] In Vue 3, the reactive data binding mechanism allows binding event listeners that monitor specific events to reactive data. This enables the logic to update the reactive data when the event listener detects a specific event. After rendering the first and second containers in the game interface to complete the initial rendering, the height value of the second object can be configured as reactive data using the reactive data binding mechanism of the event-responsive component. A corresponding target event listener is created based on the type of the target touch event. Specifically, a first event listener is created to listen for a press event, and a second event listener is created to listen for a swipe event. 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 duration of the press event; when the target touch event is a swipe event, the data update function updates the height value of the second object based on the touch position of the swipe event. Binding the target event listener to the corresponding data update function ensures accurate updates to the height value of the second object.

[0069] S170. When the target event listener detects a target touch event, the touch data of the target touch event is obtained 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.

[0070] For example, when the target event listener detects a target touch event, it parses the touch duration or touch position of the event and passes the touch duration or touch position as a parameter to the corresponding bound data update function. This allows the data update function to determine the current height value of the second object 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 height attribute value of the block element of the second object determined by the first or second attribute adjustment function. This ensures that the game interface accurately displays the height of the second object and allows for accurate judgment of the game result based on the height of the second object.

[0071] S180. If the target event listener detects the end of the target touch event, determine the game result by the latest height value of the event response component and the second object.

[0072] For example, when the player's finger leaves the game interface, the target event listener detects the end of the target touch event. The target event listener then passes the end information of the target touch event to the event response component. The event response component determines the game result based on the latest height value of the second object calculated by the data update function. This embodiment utilizes Vue 3's reactive data binding mechanism 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 based on the height value of the second object when the target touch event is detected to have ended, reducing missed and false judgments in the game and improving the accuracy of game operation.

[0073] In this embodiment, when the first container of the game interface renders scale lines and color blocks, the first height range of the scale lines and the second height range of the color blocks can be obtained through the event response component. The latest height value of the second object is compared with the first and second height ranges. 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; if the latest height value is within the second height range, the game result is determined to be a perfect result. (Reference) Figure 3 The upper limit of the first height range of the scale lines 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. When the target touch event ends, 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 but is lower than the upper scale line 14, then 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, then 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, then the game result is determined to be a failure.

[0074] In one embodiment, after the game ends, the difficulty of the next game level can be adjusted based on the game result to match the player's skill level and improve the player's gaming 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 based on the game result. The state management mechanism manages the game result and game state for each game. After the game result is obtained, if the game result is successful, the difficulty of the next game level is increased by one level; if the game result is perfect, the difficulty of the next game level is increased by two or more levels; if the game result is unsuccessful, the difficulty of the next game level remains unchanged or decreases by one level.

[0075] In summary, the object-controlled game running method provided in this application loads game resources of the object-controlled game in response to the game's startup operation and initializes the event response component in the game resources; renders a first container and a second container in the game interface of the object-controlled game according to the hypertext markup language file and cascading style file in the game resources; wherein, the hypertext markup language file includes the first container, the second container, the first object, and the block elements of the second object, and the cascading style file includes the style attributes of each block element; binds 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; when the target touch event is detected, adjusts 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; generates keyframe animation based on the adjusted style attributes of the block elements of the second container and the second object, generates sequence frame animation based on the adjusted style attributes of the block elements of the first object, and renders an animation of the object carried by the second container flowing to the first container in the game interface according to the keyframe animation and the sequence frame animation. Through the aforementioned technical means, the event binding mechanism of the event response component can bind the target touch event triggered when the player controls the container to the style attributes of the container and object in the game. This allows for rapid adjustment of the style attributes of the container and object when the target touch event is detected. Subsequently, the updated container and object are quickly rendered in the game interface based on the adjusted style attributes. By utilizing keyframe rules and preset sequence frame animations, object control animations can be smoothly played in the game interface, achieving real-time response to player operations and smooth playback of game animations. This solves the problems of high game development difficulty and monotonous visual effects in existing technologies, reduces game development and maintenance costs, and optimizes 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-controlled game running device provided in an embodiment of this application. (Reference) Figure 7 The object-controlled 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] Among them, 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 components 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 based on the hypertext markup language file and cascading style file in the game resources; wherein, the hypertext markup language file includes the first container, the second container, the first object and the block elements of the second object, and the cascading style file includes the style attributes of each block element;

[0079] 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 the target touch event is detected.

[0081] The real-time rendering module 25 is configured to generate keyframe animations based on the style properties of the block elements of the second container and the second object, generate sequence frame animations based on the style properties of the block elements of the first object, and render the animation of the second container pouring water into the first container in the game interface based on the keyframe animations and sequence frame animations.

[0082] Based on the above embodiments, the event binding module 23 includes: a first binding unit, configured to create a first event listener of the press event type through an event response component when the target touch event type is a press event type, and bind the first event listener to a first attribute adjustment function through the event response component, the first attribute adjustment function being 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; and a second binding unit, configured to create a second event listener of the slide event type through an event response component when the target touch event type is a slide event type, and bind the second event listener to a second attribute adjustment function through the event response component, the second attribute function being used to adjust the position and tilt angle attributes of the block element of the second container, the height attribute of the block element of the second object, and the visibility, position, and size attributes of the block element of the first object.

[0083] Based on the above embodiments, the style attribute adjustment module 24 includes: a first attribute adjustment unit, configured to, when a press event is detected by a first event listener, obtain the touch duration of the press event through the first event listener, call a 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 be displayed, and adjust the height attribute of the block element of the second object based on the touch duration; and a second attribute adjustment unit, configured to, when a swipe event is detected by a second event listener, obtain the touch position of the swipe event through the second event listener, call a 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 be displayed, 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] Based on the above embodiments, the real-time rendering module 25 includes: a keyframe animation generation unit, configured to draw keyframes based on the tilt angle attribute of the block elements of the second container after real-time adjustment and the height attribute of the block elements of the second object after real-time adjustment, and generate keyframe animations based on the keyframes and preset keyframe rules; a sequence frame animation generation unit, configured to obtain preset sequence frame animations based on the visibility attribute of the block elements of the first object after real-time adjustment; and a real-time rendering unit, configured to combine the keyframe animations and the sequence frame animations based on the timestamps of the sequence frame animations and the keyframe animations to obtain a combined animation, and render the combined animations frame by frame in the game interface.

[0085] Based on the above embodiments, the object-controlled game running device includes a game result determination module, which includes: a third binding unit, configured to, after rendering the first container and the second container in the game interface of the object-controlled game, configure the height value of the second object as reactive data through the reactive data binding mechanism of the event response component, create a corresponding target event listener according to 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, configured to, when the target event listener detects the target touch event, obtain the touch data of the target touch event through the target event listener, and call the data update function to update the height value of the second object based on the touch data; and a game result determination unit, configured to, when the target event listener detects the end of the target touch event, determine the game result through the latest height value of the event response component and the second object.

[0086] Based on the above embodiments, the Hypertext Markup Language (HTML) file further includes tick marks and color block elements; correspondingly, the initial rendering module further includes: an initial rendering unit configured to render a first container and a second container in the game interface of an object-controlled game based on the HTML file and Cascading Style Sheets (CSS) file in the game resources, and to render tick marks and color blocks in the first container; correspondingly, the game result determination unit includes: a height value comparison subunit configured to obtain a first height range of the tick marks and a second height range of the color blocks through an event response component, and to compare the latest height value of the second object with the first height range and the second height range; the game result determination subunit is configured to determine the game result as a failure if the latest height value is not within the first height range, determine the game result as a success if the latest height value is within the first height range but not within the second height range, and determine the game result as a perfect result if the latest height value is within the second height range.

[0087] Based on the above embodiments, the object control game running device further includes: a game difficulty adjustment module, configured to obtain the game result through the state management mechanism of the event response component after determining the game result through the latest height value of the event response component and the second height range of the color block area in the next game level, and dynamically adjust the first height range of the scale line and the second height range of the color block area according to the game result.

[0088] The object-controlled game running device provided in this application embodiment loads game resources for the object-controlled game in response to the game's startup operation, and initializes the event response component in the game resources; it renders a first container and a second container in the game interface of the object-controlled game according to the hypertext markup language file and cascading style file in the game resources; wherein, the hypertext markup language file includes the first container, the second container, the first object, and the block elements of 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 detected, 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; keyframe animation is generated according to the adjusted style attributes of the block elements of the second container and the second object, and sequence frame animation is generated according to the adjusted style attributes of the block elements of the first object; the animation of the object carried by the second container flowing to the first container is rendered in the game interface according to the keyframe animation and the sequence frame animation. Through the aforementioned technical means, the event binding mechanism of the event response component can bind the target touch event triggered when the player controls the container to the style attributes of the container and object in the game. This allows for rapid adjustment of the style attributes of the container and object when the target touch event is detected. Subsequently, the updated container and object are quickly rendered in the game interface based on the adjusted style attributes. By utilizing keyframe rules and preset sequence frame animations, object control animations can be smoothly played in the game interface, achieving real-time response to player operations and smooth playback of game animations. This solves the problems of high game development difficulty and monotonous visual effects in existing technologies, reduces game development and maintenance costs, and optimizes the interactive experience and visual effects.

[0089] The object-controlled game running device provided in this application embodiment can be used to execute the object-controlled 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-controlled game running device provided in an embodiment of this 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 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-controlled game running method in any embodiment of this application (e.g., the game resource loading module 21, initial rendering module 22, event binding module 23, style attribute adjustment module 24, and real-time rendering module 25 in the object-controlled game running device). The memory 32 may primarily include a program storage area and a data storage area. The program storage area may store the operating system and at least one application required for a function; the data storage area may store data created based on the use of the device, etc. Furthermore, the memory 32 may include high-speed random access memory and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other non-volatile solid-state storage device. In some instances, the memory may further include memory remotely located relative to the processor, and these remote memories can be connected to the device via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations 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 software programs, instructions and modules stored in the memory 32, thereby realizing the above-mentioned object control game running method.

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

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

[0096] This application embodiment also provides a storage medium containing computer-executable instructions. When executed by a computer processor, the computer-executable instructions are used to execute a method for running an object-controlled game. This method includes: loading game resources of the object-controlled game in response to a startup operation; initializing event response components in the game resources; and rendering a first container and a second container in the game interface of the object-controlled game according to a Hypertext Markup Language (HTML) file and a Cascading Style Sheets (CSS) file in the game resources. The HTML file includes block elements of the first container, the second container, the first object, and the second object; the CSS file includes... The style attributes of each block element are defined; 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 detected, 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; keyframe animations are generated based on the adjusted style attributes of the block elements of the second container and the second object, and sequence frame animations are generated based on the adjusted style attributes of the block elements of the first object; the animation of the object carried by the second container flowing to the first container is rendered on the game interface based on the keyframe animations and sequence frame animations.

[0097] Storage medium – any type of memory device or storage device. The term “storage medium” is intended to include: mounting media, such as CD-ROM, floppy disk, or magnetic tape devices; 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 (e.g., hard disk or optical storage); registers or other similar types of memory elements, etc. Storage medium may also include other types of memory or combinations thereof. Furthermore, storage medium may reside in a first computer system in which the program is executed, or it may reside in a different second computer system 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” can include two or more storage media residing in different locations (e.g., in different computer systems connected via a network). Storage medium may store program instructions (e.g., specifically implemented as a computer program) executable by one or more processors.

[0098] Of course, the computer-executable instructions provided in the embodiments of this application are not limited to the object-controlled game running method described above, but can also execute related operations in the object-controlled game running method provided in any embodiment of this 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 this 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 this application.

[0100] The above description is merely a preferred embodiment and the technical principles employed in this application. This application is not limited to the specific embodiments described herein, and various obvious changes, readjustments, and substitutions that can be made by those skilled in the art will not depart from the scope of protection of this application. Therefore, although this application has been described in detail through the above embodiments, this application is not limited to the above embodiments, and may include many other equivalent embodiments without departing from the concept of this application. The scope of this application is determined by the scope of the claims.

Claims

1. A method for running an object-controlled game, characterized in that, include: In response to the launch operation of an object-controlled game, load the game resources of the object-controlled game and initialize the event response components in the game resources; Based on the Hypertext Markup Language (HTML) file and Cascading Style Sheets (CSS) file in the game resources, a first container and a second container are rendered in the game interface of the object-controlled game. The HTML file includes block elements for the first container, the second container, the first object, and the second object. The CSS file includes style attributes for each block element. The style attributes for the second container include tilt angle and position attributes. The style attributes for the first object include visibility, position, and size attributes. The style attributes for the second object include height attributes. The event binding mechanism of the event response component binds 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; Upon detecting the target touch event, the style attributes of the block elements of the second container, the first object, and the second object are adjusted in real time based on the touch data of the target touch event. A keyframe animation is generated based on the adjusted style attributes of the block elements of the second container and the second object. A sequence frame animation is generated based on the adjusted style attributes of the block elements of the first object. The animation of the object carried by the second container flowing into the first container is rendered on the game interface based on the keyframe animation and the sequence frame animation.

2. The method for running an object-controlled game according to claim 1, characterized in that, The process of 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 includes: When the type of the target touch event is a press event, a first event listener of the press event type is created through the event response component. The first event listener is bound to a first attribute adjustment function through the event response component. 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. When the type of the target touch event is a swipe event, a second event listener of the swipe event type is created through the event response component. The second event listener is bound to a second attribute adjustment function through the event response component. The second attribute function is used to adjust the position and tilt angle attributes of the block elements of the second container, the height attribute of the block elements of the second object, and the visibility, position, and size attributes of the block elements of the first object.

3. The method for running an object-controlled game according to claim 2, characterized in that, The step of adjusting the style attributes of the block elements of the second container, the first object, and the second object in real time based on the touch data of the target touch event upon detecting the target touch event includes: When the first event listener detects 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 show, and the height attribute of the block element of the second object is adjusted based on the touch duration. When the second event listener detects the swipe event, the touch position of the swipe event is obtained through the second event listener. The second attribute adjustment function is called to adjust the position and tilt angle attributes of the block element of the second container based on the touch position. The visibility attribute of the block element of the first object is adjusted to be visible. The position attribute of the block element of the first object is adjusted based on the position and tilt angle attributes of the block element of the second container. The size attribute of the block element of the first object is adjusted based on the position and tilt angle attributes of the block element of the second container. The height attribute of the block element of the second object is adjusted based on the position and size attributes of the block element of the first object.

4. The method for running an object-controlled game according to claim 2, characterized in that, The process of generating keyframe animations based on the adjusted style attributes of the block elements of the second container and the second object, generating sequence frame animations based on 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 into the first container on the game interface based on the keyframe animations and the sequence frame animations includes: Keyframes are drawn based on the tilt angle attribute of the block element of the second container after real-time adjustment and the height attribute of the block element of the second object after real-time adjustment. Keyframe animation is generated based on the keyframes and preset keyframe rules. Based on the real-time adjusted visibility attributes of the block elements of the first object, obtain the preset sequence frame animation; Based on the timestamps of the sequence frame animation and the keyframe animation, the keyframe animation and the sequence frame animation are combined to obtain a combined animation, which is then rendered frame by frame in the game interface.

5. The method for running an object-controlled game according to claim 1, characterized in that, After rendering the first and second containers in the game interface of the object-controlled game, the method further includes: The height value of the second object is configured as reactive data through the reactive data binding mechanism of the event response component. A corresponding target event listener is created according to the type of the target touch event, and the target event listener is bound to the data update function corresponding to the height value. When the target event listener detects the target touch event, the touch data of the target touch event is obtained 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 the end of the target touch event, the game result is determined by the latest height value of the event response component and the second object.

6. The method for running an object-controlled game according to claim 5, characterized in that, The Hypertext Markup Language file also includes block elements for tick marks and color blocks; Accordingly, rendering the first and second containers in the game interface of the object-controlled game based on the Hypertext Markup Language file and Cascading Style Sheets (CSS) file in the game resources includes: Based on the hypertext markup language file and cascading style file in the game resources, render a first container and a second container in the game interface of the object control game, and render tick marks and color blocks in the first container; Accordingly, determining the game result using the latest height value of the event response component and the second object includes: The event response component obtains the first height range of the scale line and the second height range of the color block area, and compares the latest height value of the second object 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; if the latest height value is within the second height range, the game result is determined to be a perfect.

7. The method for running an object-controlled game according to claim 5, characterized in that, After determining the game result using the latest height value of the event response component and 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. A device for running an object-controlled game, characterized in that, include: The game resource loading module is configured to load the game resources of the object-controlled game in response to the launch operation of the object-controlled game, and initialize the event response components in the game resources; The initial rendering module is configured to render a first container and a second container in the game interface of the object-controlled game based on the hypertext markup language file and 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 style attributes for each block element; the style attributes corresponding to the second container include tilt angle attributes and position attributes, the style attributes corresponding to the first object include visibility attributes, position attributes, and size attributes, and the style attributes corresponding to the second object include height attributes; The event binding module 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; The style attribute adjustment module is 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 detected. The real-time rendering module is configured to generate keyframe animations based on the style attributes of the block elements of the second container and the second object after adjustment, generate sequence frame animations based on the style attributes of the block elements of the first object, and render an animation of the second container pouring water into the first container on the game interface based on the keyframe animations and the sequence frame animations.

9. A device for running object-controlled games, characterized in that, include: One or more processors; A memory that stores one or more programs, which, when executed by one or more processors, cause the one or more processors to implement the object-controlled 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, when executed by a computer processor, are used to perform the object-controlled game running method as described in any one of claims 1-7.

Images