{"id":884,"date":"2026-02-13T08:55:52","date_gmt":"2026-02-13T00:55:52","guid":{"rendered":"https:\/\/edu.circuspi.com\/?p=884"},"modified":"2026-03-09T15:47:25","modified_gmt":"2026-03-09T07:47:25","slug":"7-using-variables-to-set-up-game-collision-events","status":"publish","type":"post","link":"https:\/\/edu.circuspi.com\/index.php\/gamebit-en\/7-using-variables-to-set-up-game-collision-events\/","title":{"rendered":"7. Using “Variables” to Set Up Game Collision Events"},"content":{"rendered":"\n

We have sprites, atmosphere, art, and music. Now it’s time to learn a crucial programming concept: Variables<\/strong>.<\/p>\n\n\n\n

Those who have learned programming before are surely familiar with variables. If you haven’t, don’t worry! You have actually used them in previous units; you just didn’t realize they were “Variables<\/strong>.”<\/p>\n\n\n\n

Besides explaining variables, we will also learn about handling “Collision Events<\/strong>” in this unit\u2014that is, programming what happens when two sprites touch. For example, in the “Snake” game, when the snake touches food, the food disappears, and the snake grows. Or in our “Space Destroyer” example, when a meteor hits the fighter jet, the jet explodes, and health decreases.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

7.1 Understanding Variables<\/h2>\n\n\n\n

A “Variable<\/strong>” is a medium used to store data. You can imagine a variable as a box<\/strong>. This box can store any type of data. We can put the Orange Dinosaur inside, or we can put pizza or fried chicken in it.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This “Variable<\/strong>” box can be passed around. The recipient can open the box to retrieve the data inside or replace it with new data.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once data is stored, it remains in its last saved state unless we change it.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

7.2 How to Use Variables<\/h2>\n\n\n\n

Let’s return to the code. During the sprite creation process, we placed our designed sprite into a “Variable<\/strong>.” Just like our understanding of the box metaphor: once the sprite is stored, the data won’t change unless we modify it.<\/p>\n\n\n\n

You can see that this variable has a name. To avoid picking up the wrong “box” when passing variables around, we give it a name. By default, the program names it “mySprite<\/strong>.”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We can understand that the variable “mySprite<\/strong>” is equivalent to the “Sprite (Orange Dinosaur)<\/strong>.” So, when we set the position of “mySprite<\/strong>” or use the controller to move “mySprite<\/strong>,” we are effectively controlling the “Sprite (Orange Dinosaur)<\/strong>.”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

At this point, quick thinkers might ask: “Why can’t I just do this?” (referring to using the “create sprite” block directly in every command).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If you write the code as shown in the hypothetical image above, running it will reveal a surprise: there are two<\/strong> sprites! One is controllable, and the other is not.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This is because the block “sprite [ ] of kind (Player)<\/strong>” essentially means “Create a NEW Sprite<\/strong>.” If you use this block again in a movement command, you are creating a second sprite\u2014one positioned at (x: 80, y: 60), and another separate one that moves with the controller. This is why you see a “shadow clone” (duplicate) in the Game Simulator<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Although creating a variable seems like an extra step, think of it this way: the named variable is like giving your sprite a specific name. When you want to control it, you call it by its name.<\/p>\n\n\n\n

Click on the variable name within the block, and select “Rename variable…<\/strong>” from the dropdown menu to give it a new name.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

7.3 Creating Another Sprite<\/h2>\n\n\n\n

Next, let’s create a second sprite. Click on “Sprites<\/strong>” in the Block Toolbox<\/strong>, use the create sprite block, place it inside “on start<\/strong>,” and design its appearance (in this example, we selected a Burger<\/strong> from the Gallery).<\/p>\n\n\n\n

You will notice that the default “Variable Name<\/strong>” has changed automatically. The editor does this to prevent errors.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Let’s give these variables meaningful names! The sprite generated by default appears in the center of the screen. Let’s use the “set [mySprite] position to x ( 0 ) y ( 0 )<\/strong>” block we learned earlier to change the positions of these two sprites.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We can categorize sprites into groups to facilitate group control later. In this example, we set the Orange Dinosaur’s kind to “Player<\/strong>” and the Burger’s kind to “Food<\/strong>.” You can define these Kind<\/strong> names yourself.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

7.4 Sprite Overlaps<\/h2>\n\n\n\n

If we want the “Orange Dinosaur<\/strong>” to eat the “Burger<\/strong>“\u2014meaning the Burger disappears when the Dinosaur “collides<\/strong>” with it\u2014we need to use the concept of “Overlaps<\/strong>.” This allows us to program subsequent events when the images of two sprites overlap.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Please click on “Sprites<\/strong>” in the Block Toolbox<\/strong>, scroll down to find blocks related to “Overlaps<\/strong>,” and drag out the first block: “on sprite of kind (Player) overlaps otherSprite of kind (Player)<\/strong>.”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Place this block in the Workspace<\/strong> (empty area). Since this block functions similarly to “on start<\/strong>” (it is an event handler), it cannot be placed inside other blocks, but you can place other blocks inside it.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Let’s look closely at this block. It states that when a certain Kind “overlaps<\/strong>” with another Kind, it triggers the blocks inside it.<\/p>\n\n\n\n

So, if we want the Burger to “disappear<\/strong>” when the “Orange Dinosaur<\/strong>” overlaps with the “Burger<\/strong>,” we can place the “destroy<\/strong>” block inside.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Making a specific sprite disappear is easy. In the “Sprites<\/strong>” list, there is a “destroy [mySprite]<\/strong>” block. This block will help us make the Burger vanish.<\/p>\n\n\n\n

Crucial Step:<\/strong> We need to change the logic in the overlap block to: “on sprite of kind (Player) overlaps otherSprite of kind (Food)<\/strong>.”<\/p>\n\n\n\n

Then, inside the block, drag the “otherSprite<\/strong>” value (the red rounded block representing the specific Food that was hit) into the destroy block.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Or, ensure you select the correct variable name for the burger; otherwise, nothing will happen!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once finished, run it in the Game Simulator<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The “destroy [mySprite]<\/strong>” block also allows you to adjust the special effect upon destruction. Click the “+<\/strong>” symbol at the end of the block to select an “effect<\/strong>” (like fire, spray) and adjust the “duration<\/strong>.”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Test it again in the Game Simulator<\/strong>, try switching between different effects, and find the one you like best! (*\u00b4\u2200`)~\u2665<\/p>\n\n\n\n

\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

We have sprites, atmosphere, art, and music. Now it&#82 […]<\/p>\n","protected":false},"author":1,"featured_media":381,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,23],"tags":[],"table_tags":[],"class_list":{"0":"post-884","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-gamebit-en","8":"category-freeinfo-en","9":"czr-hentry"},"_links":{"self":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/comments?post=884"}],"version-history":[{"count":2,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/884\/revisions"}],"predecessor-version":[{"id":1186,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/884\/revisions\/1186"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media\/381"}],"wp:attachment":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media?parent=884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/categories?post=884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/tags?post=884"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/table_tags?post=884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}