██FR█████ █INTELL███████████

Learn By Code 1.3


This content originally appeared on DEV Community and was authored by Dat One Dev

Welcome to “Learn by Code”!

Hey fellas, Welcome back to Learn By Code, one of the most loved series of my blogs and channel.

Here we dive deep into the programming concepts and explore new ideas that make you a smarter, faster, and stronger developer.

Previously, we have only worked with Terminal/Text User Interface (TUI), but today we are going to play with Graphical User Interface (GUI).

So let’s not waste our time and get started.

Understanding the Goal.

Understanding from the top

In this post, we’ll be building a simple clicker game where balloons spawn at random positions, and the player earns points for each one they successfully pop.

Image description

Understanding Deeply

Understanding concepts and projects deeply is a very important task and skill to learn for beginners.

Advanced programmers can easily and quickly break down complex projects, but most beginners can’t. The reason for this is that most beginners learn programming without practicing.

There are multiple methods to understand things deeply. The one I prefer is breaking things down into small units. I call it
Divide & Rule.

But today the trick I am going to use is called WH family`. In this trick, we ask questions to ourselves until we can’t answer.

(In English grammar, words like What, How, When are together called part of the WH family. They are also called Question Mark Words)

So let’s start the show.

What, Why, and How?

What is the game loop?
  • The user starts the game
  • A balloon appears on the screen
  • User clicks on the balloon
  • The clicked balloon disappears from the screen
  • New balloon spawns
  • Score gets up.

Now, each of these steps of the game loop can raise more questions.

A balloon comes on their display

  • What is a balloon?

balloon is a sprite with collision .

Now this raises more questions.

  • How would you handle sprite rendering?

Sprite rendering can be done in Mini Micro by creating a new sprite, loading an image for that sprite, and then displaying that sprite on the screen.

  • How would you create a new sprite?

A new sprite can be created by assigning a variable to the sprite class, like.

balloon = new Sprite

  • How would you load an image for that sprite?

Command – balloon.image = file.loadImage("/usr/balloon.png") – can be used to load an image for our balloon sprite

  • How would you display that sprite on the display?

The sprite can be displayed on display(4) by the

display(4).sprites.push balloon

  • How would you handle collisions for the sprite?

Collision for the sprite can be handled by creating new bounds for the sprite and giving them a length and breadth equal to the length and breadth of the image

  • And how would you do that?

balloon.localBounds = new Bounds can be used to create new bounds for our sprite, then balloon.localBounds.width and balloon.localBounds.height can be set equal to the balloon.image.width and balloon.image.height

User clicks on the balloon

  • What do you mean by clicking?

Clicking is when the user’s mouse enters the bounds of our balloon sprite, and then the user clicks on it.

  • How would you detect that the mouse has entered the bounds?

Method balloon.contains(mouse) returns true if the balloon sprite contains the mouse pointer. It can be used to detect that the mouse has entered the bounds

  • How would you detect that the mouse has clicked?

Method mouse.button() would be helpful as it returns true if the mouse button is pressed.

  • What happens on clicking?

The clicked balloon disappears from the screen & and a new balloon spawns

Now, here, instead of removing a balloon on click and spawning a new balloon, what we can do is just change the x and y position of the balloon randomly.

This method is better, why?

  • It’s easier to program.
  • It makes the game lighter and the code less bloated.

  • It creates an illusion of our old plan.

  • But then, on user click, how would you change the position of the balloon randomly?

Position of the balloon can be randomly changed with the help of rnd

_rnd keyword returns a random number between 0 to 1, except 1. To know more, check out LEARN BY CODE 1.2 _

So, as we already know how to detect mouse clicks, we can easily code that when the user clicks on the balloon x and y coordinates of the balloon randomly change using the rnd keyword multiplied by
width and height of our display (which is 960*640)

Score gets up.

  • What is the score?

A variable with an integer data type

  • How would it increment the score upon clicking?

Using += operator

And without even realising, we just finished our game.

Now I want you to try creating this program yourself, although I will provide the source code and other helpful links at the end, which you can take help from any time. Try coding this yourself.

Summary of the program.

  • Game starts
  • A balloon (sprite) appears at a random (rnd) position (x, y coordinates).
  • Player clicks on the balloon. (Detected using Bounds and mouse.button method)
  • On click:
    • The balloon’s position (balloon.x, balloon.y) is reset to a new random (rnd) location.
    • The score increases by 1. (score += 1)
  • The loop continues—click, score, repeat.
Feature Description
Sprite Creation A balloon sprite is created and an image is loaded into it.
Display Management The sprite is added to display(4) to be shown on the screen.
Collision Detection The game checks if the mouse pointer is inside the balloon’s bounds.
Mouse Input A click is detected using mouse.button().
Random Positioning On click, balloon’s x and y are randomized using rnd.
Score Tracking A variable tracks score and increments with each successful click.

Outro


This content originally appeared on DEV Community and was authored by Dat One Dev