Learn By Code 1.4 – DEV Community




Introduction

In today’s blog, we’re going to explore the basic concepts behind how a Pong game works. On top of that, This tutorial will also guide you to create you own pong in Mini Micro A dead simple game engine which is perfect for beginners(Although the conceptual part of this blog can be applied to any engine)

āš ļø Note: This tutorial is not a step-by-step walkthrough of building Pong. Instead, it’s meant to help you understand the core mechanics so you can implement them yourself. At the end of the blog, I’ve included some hints to guide you if you get stuck.

Game Engine Used: Mini Micro,

So, let’s dive in!



What is a Pong Game



By a perspective of human being

Pong is one of the earliest video games ever made, and honestly, it’s super simple but really fun. Think of it as digital table tennis. There are two paddles—one for each player—on opposite sides of the screen, and a ball bouncing back and forth. The goal is straightforward: don’t let the ball get past your paddle, and try to get it past your opponent’s.



By a perspective of a game developer

Pong might seem simple, but when it first came out, it introduced some fundamental gaming concepts: moving objects, detecting collisions, keeping score, and responding to player input. That’s why building your own Pong game is a fantastic way to learn the basics of game development—it touches on key principles used in almost every game, all in a simple and approachable way.



The Divide and Understand rule

In many of my previous blogs, I use a method called ā€œDivide and Understand.ā€ The idea is to break down a topic into smaller pieces until it can be explained with simple concepts.

Let’s do the same for Pong.

We can divide the game into three basic components:

Let’s start with the ball.



Ball

The ball is a simple round object that keeps moving on the screen and reacts to collisions.

Which Collisions?

Let’s break it down:



Collision with a boundaries

In most games, boundaries are divided into sections. In Pong, we have two main types:

  • Y-axis boundaries: The ball bounces off the top and bottom edges of the screen.

  • X-axis boundaries: These are the left and right edges of the screen.
    Now this boundary can also be further divided into Left_X Boundary and Right_X Boundary

If the ball touches the Left X boundary, the player on the right scores a point.

If the ball touches the Right X boundary, the player on the left scores a point.



Collision with Players

The players, which we’ll call strikers, also affect the ball:

  • Left striker
  • Right striker

When the ball hits a striker, its direction changes. For example, if the ball hits the left striker moving in one direction, it will bounce back in the opposite direction. The same happens with the right striker.



Stricker

As mentioned earlier, there are two strikers in our game: Left and Right. You can think of them as objects that move along the Y-axis whenever certain keys are pressed.

Here’s an example of how it works in code:

    //Flipper 1
    if key.pressed("w") and Flipper1.y < 624 then Flipper1.y += Flipper_Speed
    if key.pressed("s") and Flipper1.y > 16 then Flipper1.y -= Flipper_Speed
    //Flipper 2
    if key.pressed("i") and Flipper2.y < 624 then Flipper2.y += Flipper_Speed
    if key.pressed("k") and Flipper2.y > 16 then Flipper2.y -= Flipper_Speed
Enter fullscreen mode

Exit fullscreen mode

Just a note: Flipper and Striker are the same thing. You can call it whatever you like—player, paddle, snail, Albert… whatever makes your game fun.

In the example above, you might notice the and operator with two conditions in each if statement. The first condition checks if the key is pressed, which is obvious. The second condition, like Flipper1.y > 16, might seem a little mysterious at first.

Actually, it’s simple: this second condition just prevents the striker from going off the screen. Without it, your paddle could move outside the visible area, which would break the game. So it’s basically a safety check to keep the striker within the display.



The Scoring Mechanism

One of the most important parts of any game, including Pong, is the scoring system.

In a simple Pong game, you can implement this by creating two global variables to store the score for each striker. Whenever a player scores, you can update the score using the += operator. For example:

Striker1_Score += 1
Striker2_Score += 1
Enter fullscreen mode

Exit fullscreen mode

Mini Micro Tip: Preserving Scores

To safely store the score and other important variables, I usually define them in a separate file called startup.ms.

Why? In Mini Micro, the startup.ms file runs automatically when the game boots up. This means it can initialize and preserve important variables across different game sessions.

For example:

  • Suppose your game code is in game.ms.
  • If your score variables are defined inside game.ms, rerunning the game will reset all scores back to zero.
  • But if you define the score variables in startup.ms, resetting the game with run "game" will keep the current scores intact while restarting the game logic.

This approach ensures your game can track ongoing scores without losing progress whenever you restart or test your game. It’s a small trick that makes your game feel much more professional and polished!



Hints

Now that we’ve covered the core concepts behind a Pong game, here are some hints to help you get started building your own. If you love a challenge, feel free to skip them and figure it out yourself!

These hints were created by keeping Mini Micro in Mind

  • Sprites Are Your Game Objects

In Mini Micro, everything that moves on the screen—paddles, balls, boundaries—is a sprite.

Paddles move along the Y-axis with key inputs. Make sure to limit their movement so they don’t go off-screen.

The ball moves along both X and Y axes, and its speed can be stored in properties like Ball.xSpeed and Ball.ySpeed.

Check if the ball hits the top or bottom of the screen to reverse its Y-direction.

Check if the ball hits a paddle to reverse both X and Y directions. The Ball.contains(Flipper1) condition is an example of collision detection.

Use variables like score.Player1 and score.Player2 to track points.

When the ball passes a paddle, increase the opponent’s score and optionally reset the ball or the game state.

  • Resetting the Game Without Losing Scores

Declare your score variables in a startup file (like startup.ms) to keep scores across game resets.

Inside the while loop, you can control the ball’s movement using its X and Y speed variables.

To increase the ball’s speed, simply use the += operator:

Ball.xSpeed += 1
Ball.ySpeed += 1
Enter fullscreen mode

Exit fullscreen mode

To change the ball’s direction, multiply the speed by -1:

Ball.xSpeed = Ball.xSpeed * -1
Ball.ySpeed = Ball.ySpeed * -1
Enter fullscreen mode

Exit fullscreen mode

Example:

If the ball is moving 10 pixels/sec along the X-axis (Ball.xSpeed = 10) and you multiply it by -1, it will start moving in the opposite direction at -10 pixels/sec. The same applies for the Y-axis. This is how collisions with paddles or walls make the ball bounce!

Make sure to add yield keyword at the end of your while loop



Outro

That’s all for today till then stay awesome and bye

šŸ‘‰Discord

šŸ‘‰YouTube
šŸ‘‰Miniscript



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *