CI/CD is a set of practices and tools designed to automate and streamline the process of integrating code changes, testing them, and deploying them to production. By adopting CI/CD, your team can reduce manual errors, speed up release cycles, and ensure that your code is always in a deployable state.

In this tutorial, we’ll focus on a beginner-friendly approach to setting up a basic CI/CD pipeline using Bitbucket, a Linux server, and Python with Flask. Specifically, we’ll create an automated process that pulls the latest changes from a Bitbucket repository to your Linux server whenever there’s a push or merge to a specific branch.

This process will be powered by Bitbucket webhooks and a simple Flask-based Python server that listens for incoming webhook events and triggers the deployment.

It’s important to note that CI/CD is a vast and complex field, and this tutorial is designed to provide a foundational understanding rather than to be an exhaustive guide.

We’ll cover the basics of setting up a CI/CD pipeline using tools that are accessible to beginners. Just keep in mind that real-world CI/CD systems often involve more advanced tools and configurations, such as containerization, orchestration, and multi-stage testing environments.

By the end of this tutorial, you’ll have a working example of how to automate deployments using Bitbucket, Linux, and Python, which you can build upon as you grow more comfortable with CI/CD concepts.

Table of Contents:

1. Why is CI/CD Important?

2. Step 1: Set Up a Webhook in Bitbucket

3. Step 2: Set Up the Flask Listener on Your Linux Server

4. Step 3: Expose the Flask App (Optional)

5. Step 4: Test the Setup

6. Step 5: Security Considerations

7. Wrapping Up

Why is CI/CD Important?

CI/CD has become a cornerstone of modern software development for several reasons. First and foremost, it accelerates the development process. By automating repetitive tasks like testing and deployment, developers can focus more on writing code and less on manual processes. This leads to faster delivery of new features and bug fixes, which is especially important in competitive markets where speed can be a differentiator.

Another key benefit of CI/CD is reduced errors and improved reliability. Automated testing ensures that every code change is rigorously checked for issues before it’s integrated into the main codebase. This minimizes the risk of introducing bugs that could disrupt the application or require costly fixes later. Automated deployment pipelines also reduce the likelihood of human error during the release process, ensuring that deployments are consistent and predictable.

CI/CD also fosters better collaboration among team members. In traditional development workflows, integrating code changes from multiple developers can be a time-consuming and error-prone process. With CI/CD, code is integrated and tested frequently, often multiple times a day. This means that conflicts are detected and resolved early, and the codebase remains in a stable state. As a result, teams can work more efficiently and with greater confidence, even when multiple contributors are working on different parts of the project simultaneously.

Finally, CI/CD supports continuous improvement and innovation. By automating the deployment process, teams can release updates to production more frequently and with less risk. This enables them to gather feedback from users faster and iterate on their products more effectively.

What We’ll Cover in This Tutorial

In this tutorial, we’ll walk through the process of setting up a simple CI/CD pipeline that automates the deployment of code changes from a Bitbucket repository to a Linux server. Here’s what you’ll learn:

1. How to configure a Bitbucket repository to send webhook notifications whenever there’s a push or merge to a specific branch.

2. How to set up a Flask-based Python server on your Linux server to listen for incoming webhook events.

3. How to write a script that pulls the latest changes from the repository and deploys them to the server.

4. How to test and troubleshoot your automated deployment process.

By the end of this tutorial, you’ll have a working example of a basic CI/CD pipeline that you can customize and expand as needed. Let’s get started!

Step 1: Set Up a Webhook in Bitbucket

Before starting with the setup, let’s briefly explain what a webhook is and how it fits into our CI/CD process.

A webhook is a mechanism that allows one system to notify another system about an event in real-time. In the context of Bitbucket, a webhook can be configured to send an HTTP request (often a POST request with payload data) to a specified URL whenever a specific event occurs in your repository, such as a push to a branch or a pull request merge.

In our case, the webhook will notify our Flask-based Python server (running on your Linux server) whenever there’s a push or merge to a specific branch. This notification will trigger a script on the server to pull the latest changes from the repository and deploy them automatically. Essentially, the webhook acts as the bridge between Bitbucket and your server, enabling seamless automation of the deployment process.

Now that you understand the role of a webhook, let’s set one up in Bitbucket:

1. Log in to Bitbucket and navigate to your repository.

2. On the left-hand sidebar, click on Settings.

3. Under the Workflow section, find and click on Webhooks.

4. Click the Add webhook button.

5. Enter a name for your webhook (for example, "Automatic Pull").

6. In the URL field, provide the URL to your server where the webhook will send the request. If you’re running a Flask app locally, this would be something like http://your-server-ip/pull-repo. (For production environments, it’s highly recommended to use HTTPS to secure the communication between Bitbucket and your server.)

7. In the Triggers section, choose the events you want to listen to. For this example, we will select Push (and optionally, Pull Request Merged if you want to deploy after merges, too).

8. Save the webhook with a self-explanatory name so it’s easy to identify later.

Once the webhook is set up, Bitbucket will send a POST request to the specified URL every time the selected event occurs. In the next steps, we’ll set up a Flask server to handle these incoming requests and trigger the deployment process.

Here is what you should see when you setup up the Bitbucket webhook

Step 2: Set Up the Flask Listener on Your Linux Server

In the next step, you’ll set up a simple web server on your Linux machine that will listen for the webhook from Bitbucket. When it receives the notification, it will execute a git pull or a force pull (in case of local changes) to update the repository.

Install Flask:

To create the Flask application, first install Flask by running:

pip install flask

Create the Flask App:

Create a new Python script (for example, app_repo_pull.py) on your server and add the following code:

from flask import Flask
import subprocess

app = Flask(__name__)

@app.route('/pull-repo', methods=['POST'])
def pull_repo():
    try:
        # Fetch the latest changes from the remote repository
        subprocess.run(["git", "-C", "/path/to/your/repository", "fetch"], check=True)
        # Force reset the local branch to match the remote 'test' branch
        subprocess.run(["git", "-C", "/path/to/your/repository", "reset", "--hard", "origin/test"], check=True)  # Replace 'test' with your branch name
        return "Force pull successful", 200
    except subprocess.CalledProcessError:
        return "Failed to force pull the repository", 500

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

Here’s what this code does:

• subprocess.run(["git", "-C", "/path/to/your/repository", "fetch"]): This command fetches the latest changes from the remote repository without affecting the local working directory.

• subprocess.run(["git", "-C", "/path/to/your/repository", "reset", "--hard", "origin/test"]): This command performs a hard reset, forcing the local repository to match the remote test branch. Replace test with the name of your branch.

Make sure to replace /path/to/your/repository with the actual path to your local Git repository.

Step 3: Expose the Flask App (Optional)

If you want the Flask app to be accessible from outside your server, you need to expose it publicly. For this, you can set up a reverse proxy with NGINX. Here's how to do that:

First, install NGINX if you don't have it already by running this command:

sudo apt-get install nginx

Next, you’ll need to configure NGINX to proxy requests to your Flask app. Open the NGINX configuration file:

sudo nano /etc/nginx/sites-available/default

Modify the configuration to include this block:

server {
    listen 80;
    server_name your-server-ip;

    location /pull-repo {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Now just reload NGINX to apply the changes:

sudo systemctl reload nginx

Step 4: Test the Setup

Now that everything is set up, go ahead and start the Flask app by executing this Python script:

python3 app_repo_pull.py

Now to test if everything is working:

1. Make a commit: Push a commit to the test branch in your Bitbucket repository. This action will trigger the webhook.

1. Webhook trigger: The webhook will send a POST request to your server. The Flask app will receive this request, perform a force pull from the test branch, and update the local repository.

2. Verify the pull: Check the log output of your Flask app or inspect the local repository to verify that the changes have been pulled and applied successfully.

Step 5: Security Considerations

When exposing a Flask app to the internet, securing your server and application is crucial to protect it from unauthorized access, data breaches, and attacks. Here are the key areas to focus on:

1. Use a Secure Server with Proper Firewall Rules

A secure server is one that is configured to minimize exposure to external threats. This involves using firewall rules, minimizing unnecessary services, and ensuring that only required ports are open for communication.

Example of a secure server setup:

• Minimal software: Only install the software you need (for example, Python, Flask, NGINX) and remove unnecessary services.

• Operating system updates: Ensure your server's operating system is up-to-date with the latest security patches.

• Firewall configuration: Use a firewall to control incoming and outgoing traffic and limit access to your server.

For example, a basic UFW (Uncomplicated Firewall) configuration on Ubuntu might look like this:

# Allow SSH (port 22) for remote access
sudo ufw allow ssh

# Allow HTTP (port 80) and HTTPS (port 443) for web traffic
sudo ufw allow http
sudo ufw allow https

# Enable the firewall
sudo ufw enable

# Check the status of the firewall
sudo ufw status

In this case:

• The firewall allows incoming SSH connections on port 22, HTTP on port 80, and HTTPS on port 443.

• Any unnecessary ports or services should be blocked by default to limit exposure to attacks.

Additional Firewall Rules:

• Limit access to webhook endpoint: Ideally, only allow traffic to the webhook endpoint from Bitbucket's IP addresses to prevent external access. You can set this up in your firewall or using your web server (for example, NGINX) by only accepting requests from Bitbucket's IP range.

• Deny all other incoming traffic: For any service that does not need to be exposed to the internet (for example, database ports), ensure those ports are blocked.

2. Add Authentication to the Flask App

Since your Flask app will be publicly accessible via the webhook URL, you should consider adding authentication to ensure only authorized users (such as Bitbucket's servers) can trigger the pull.

Basic Authentication Example:

You can use a simple token-based authentication to secure your webhook endpoint. Here’s an example of how to modify your Flask app to require an authentication token:

from flask import Flask, request, abort
import subprocess

app = Flask(__name__)

# Define a secret token for webhook verification
SECRET_TOKEN = 'your-secret-token'

@app.route('/pull-repo', methods=['POST'])
def pull_repo():
    # Check if the request contains the correct token
    token = request.headers.get('X-Hub-Signature')
    if token != SECRET_TOKEN:
        abort(403)  # Forbidden if the token is incorrect

    try:
        subprocess.run(["git", "-C", "/path/to/your/repository", "fetch"], check=True)
        subprocess.run(["git", "-C", "/path/to/your/repository", "reset", "--hard", "origin/test"], check=True)
        return "Force pull successful", 200
    except subprocess.CalledProcessError:
        return "Failed to force pull the repository", 500

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

How it works:

• The X-Hub-Signature is a custom header that you add to the request when setting up the webhook in Bitbucket.

• Only requests with the correct token will be allowed to trigger the pull. If the token is missing or incorrect, the request is rejected with a 403 Forbidden response.

You can also use more complex forms of authentication, such as OAuth or HMAC (Hash-based Message Authentication Code), but this simple token approach works for many cases.

3. Use HTTPS for Secure Communication

It’s crucial to encrypt the data transmitted between your Flask app and the Bitbucket webhook, as well as any sensitive data (such as tokens or passwords) being transmitted over the network. This ensures that attackers cannot intercept or modify the data.

Why HTTPS?

• Data encryption: HTTPS encrypts the communication, ensuring that sensitive data like your authentication token is not exposed to man-in-the-middle attacks.

• Trust and integrity: HTTPS helps ensure that the data received by your server hasn’t been tampered with.

Using Let’s Encrypt to Secure Your Flask App with SSL:

1. Install Certbot (the tool for obtaining Let’s Encrypt certificates):

sudo apt-get update
sudo apt-get install certbot python3-certbot-nginx

Obtain a free SSL certificate for your domain:

sudo certbot --nginx -d your-domain.com

• This command will automatically configure Nginx to use HTTPS with a free SSL certificate from Let’s Encrypt.

• Ensure HTTPS is used: Make sure that your Flask app or Nginx configuration forces all traffic to use HTTPS. You can do this by setting up a redirection rule in Nginx:

server {
    listen 80;
    server_name your-domain.com;

    # Redirect HTTP to HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name your-domain.com;

    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;

    # Other Nginx configuration...
}

Automatic Renewal: Let’s Encrypt certificates are valid for 90 days, so it’s important to set up automatic renewal:

sudo certbot renew --dry-run

This command tests the renewal process to make sure everything is working.

4. Logging and Monitoring

Implement logging and monitoring for your Flask app to track any unauthorized attempts, errors, or unusual activity:

• Log requests: Log all incoming requests, including the IP address, request headers, and response status, so you can monitor for any suspicious activity.

• Use monitoring tools: Set up tools like Prometheus, Grafana, or New Relic to monitor server performance and app health.

Wrapping Up

In this tutorial, we explored how to set up a simple, beginner-friendly CI/CD pipeline that automates deployments using Bitbucket, a Linux server, and Python with Flask. Here’s a recap of what you’ve learned:

1. CI/CD Fundamentals: We discussed the basics of Continuous Integration (CI) and Continuous Delivery/Deployment (CD), which are essential practices for automating the integration, testing, and deployment of code. You learned how CI/CD helps speed up development, reduce errors, and improve collaboration among developers.

2. Setting Up Bitbucket Webhooks: You learned how to configure a Bitbucket webhook to notify your server whenever there’s a push or merge to a specific branch. This webhook serves as a trigger to initiate the deployment process automatically.

3. Creating a Flask-based Webhook Listener: We showed you how to set up a Flask app on your Linux server to listen for incoming webhook requests from Bitbucket. This Flask app receives the notifications and runs the necessary Git commands to pull and deploy the latest changes.

4. Automating the Deployment Process: Using Python and Flask, we automated the process of pulling changes from the Bitbucket repository and performing a force pull to ensure the latest code is deployed. You also learned how to configure the server to expose the Flask app and accept requests securely.

5. Security Considerations: We covered critical security steps to protect your deployment process:

   • Firewall Rules: We discussed configuring firewall rules to limit exposure and ensure only authorized traffic (from Bitbucket) can access your server.

   • Authentication: We added token-based authentication to ensure only authorized requests can trigger deployments.

   • HTTPS: We explained how to secure the communication between your server and Bitbucket using SSL certificates from Let's Encrypt.

   • Logging and Monitoring: Lastly, we recommended setting up logging and monitoring to keep track of any unusual activity or errors.

Next Steps

By the end of this tutorial, you now have a working example of an automated deployment pipeline. While this is a basic implementation, it serves as a foundation you can build on. As you grow more comfortable with CI/CD, you can explore advanced topics like:

• Multi-stage deployment pipelines

• Integration with containerization tools like Docker

• More complex testing and deployment strategies

• Use of orchestration tools like Kubernetes for scaling

CI/CD practices are continually evolving, and by mastering the basics, you’ve set yourself up for success as you expand your skills in this area. Happy automating and thank you for reading!

You can fork the code from here.

Whether you're a beginner seeking to grasp the fundamentals of game development or an enthusiast eager to explore PyGame's capabilities, this article is your guide to crafting a simple yet engaging game.

You just need to break down the steps, read the code, and enjoy the ride!

At the end of this tutorial, your game should look like this:

Table of Contents

1. How to set up the development environment

2. Defining the game concept

3. App initialization

4. How to create a PyGame instance

5. How to create the game screens

6. Main game loop

7. Conclusion

How to Set Up the Development Environment

Tools and Software

Before you get into the coding adventure, let's talk about the tools that will fuel your creativity.

Python

You'll be using Python, a versatile and beginner-friendly programming language. Its clean syntax and extensive library support make it an excellent choice for game development.

If you don't have Python installed, head over to python.org to download and install the latest version.

PyGame

Your secret weapon for this project. PyGame, a set of Python modules, simplifies game development by handling multimedia elements like images and sounds. It's the engine that will power your game.

To install PyGame, you can use the following command in your terminal or command prompt:

pip install pygame

Text Editor

Whether it's VSCode, PyCharm, or Thonny, these environments offer features like syntax highlighting and debugging tools. Choose the one you're most comfortable with, and let's get ready to write some code!

I will be using VSCode but feel free to use whichever you like. If you feel adventurous, you can try Thonny!

Now that you're armed with the right tools, let's jump into the code and bring your game to life.

This is Thonny

Defining the Game Concept

Game Concept and Mechanics

Let's break down the core concepts and mechanics you'll be implementing.

Platform Control:

• Objective: Use arrow keys to move the platform left or right.

• Implementation: Your platform moves horizontally based on key input.

• Limitations: Ensure the platform stays within the screen boundaries.

Bouncing Ball Dynamics:

• Objective: Guide the bouncing ball across the screen.

• Implementation: The ball moves independently, bouncing off walls and the platform.

• Interaction: Score points each time the ball successfully bounces off the platform.

Scoring System:

• Objective: Accumulate points based on successful bounces.

• Implementation: Your coding determines the scoring system.

• Challenge: Optimize the scoring mechanism for higher scores.

Level Progression:

• Objective: Advance through levels as your score reaches milestones.

• Implementation: With every 10 points, you progress to a new level.

• Challenge: Expect increased difficulty and complexity with each level.

Dynamic Platform Color:

• Objective: Platform color changes with each level, adding a visual dynamic.

• Implementation: Colors are randomly generated upon reaching a new level.

• Aesthetic Touch: Adds variety and excitement to the gaming experience.

Lives and Game Over:

• Objective: Avoid letting the ball fall off the screen to maintain lives.

• Implementation: Lives decrease with missed bounces. Game over occurs when lives run out (you have only 3 lives).

• Restart: After game over, restart with three lives and a fresh score.

How to Code the Game

App initialization

In this section, you'll define constants such as screen dimensions, ball and platform properties, and colors.

You'll also initialize PyGame, set up the display screen, and create a clock object to control the frame rate.

Then you'll initialize variables for the game, including ball position, speed, platform position, speed, score, lives, and current level.

Here's the code to do all that:

import pygame
import sys
import random

# Constants
WIDTH, HEIGHT = 800, 600
BALL_RADIUS = 20
PLATFORM_WIDTH, PLATFORM_HEIGHT = 100, 10
FPS = 60
BLACK = (0, 0, 0)
WHITE = (255, 255, 255)
RED = (255, 0, 0)
YELLOW = (255, 255, 0)
ORANGE = (255, 165, 0)
LIGHT_BLUE = (173, 216, 230)  # Light blue color for the level indicator

Let's break down the code step by step:

Importing Libraries:

• import pygame: Imports the Pygame library, which is used for developing games in Python.

• import sys: Imports the sys module, providing access to some variables used or maintained by the interpreter and functions that interact with the interpreter.

Constants:

• WIDTH, HEIGHT = 800, 600: Defines the dimensions of the game window.

• BALL_RADIUS = 20: Specifies the radius of the bouncing ball.

• PLATFORM_WIDTH, PLATFORM_HEIGHT = 100, 10: Sets the dimensions of the platform.

• FPS = 60: Defines the frames per second, controlling the speed of the game.

• Various color constants like BLACK, WHITE, RED, YELLOW, ORANGE, and LIGHT_BLUE represent RGB values for colors used in the game.

How to Create a PyGame Instance

Now you're going to create the PyGame window and define some global variables that you'll use for every level of the game:

# Initialize Pygame
pygame.init()

# Create the screen
screen = pygame.display.set_mode((WIDTH, HEIGHT))
pygame.display.set_caption("Bouncing Ball Game")
font = pygame.font.Font(None, 36)

# Clock to control the frame rate
clock = pygame.time.Clock()

# Initialize variables for the game
ball_pos = [WIDTH // 2, HEIGHT // 2]
ball_speed = [random.uniform(2, 4), random.uniform(2, 4)]  # Faster starting speed
platform_pos = [WIDTH // 2 - PLATFORM_WIDTH // 2, HEIGHT - PLATFORM_HEIGHT - 10]
platform_speed = 10
score = 0
lives = 3
current_level = 1
platform_color = ORANGE  # Initialize platform color

Pygame Initialization:

• pygame.init(): Initializes the Pygame library.

Create the Game Window:

• screen = pygame.display.set_mode((WIDTH, HEIGHT)): Creates the game window with the specified dimensions.

• pygame.display.set_caption("Bouncing Ball Game"): Sets the title of the game window.

• font = pygame.font.Font(None, 36): Initializes a font object for rendering text.

Clock for Frame Rate Control:

• clock = pygame.time.Clock(): Creates a clock object to control the frame rate.

Game Variables Initialization:

• ball_pos = [WIDTH // 2, HEIGHT // 2]: Initializes the starting position of the ball at the center of the screen.

• ball_speed = [random.uniform(2, 4), random.uniform(2, 4)]: Initializes the starting speed of the ball with random values.

• platform_pos = [WIDTH // 2 - PLATFORM_WIDTH // 2, HEIGHT - PLATFORM_HEIGHT - 10]: Initializes the starting position of the platform.

• platform_speed = 10: Sets the speed at which the platform moves.

• score = 0: Initializes the player's score.

• lives = 3: Initializes the number of lives the player has.

• current_level = 1: Initializes the current level of the game.

• platform_color = ORANGE: Initializes the color of the platform.

How to Create the Game Screens

You will create at least three screens, one for start the game, one for winning the game, and one for losing the game. You can use the following code to do all that:

# Functions for screens
def start_screen():
    screen.fill(BLACK)
    show_text_on_screen("Bouncing Ball Game", 50, HEIGHT // 4)
    show_text_on_screen("Press any key to start...", 30, HEIGHT // 3)
    show_text_on_screen("Move the platform with arrow keys...", 30, HEIGHT // 2)
    pygame.display.flip()
    wait_for_key()

def game_over_screen():
    screen.fill(BLACK)
    show_text_on_screen("Game Over", 50, HEIGHT // 3)
    show_text_on_screen(f"Your final score: {score}", 30, HEIGHT // 2)
    show_text_on_screen("Press any key to restart...", 20, HEIGHT * 2 // 3)
    pygame.display.flip()
    wait_for_key()

def victory_screen():
    screen.fill(BLACK)
    show_text_on_screen("Congratulations!", 50, HEIGHT // 3)
    show_text_on_screen(f"You've won with a score of {score}", 30, HEIGHT // 2)
    show_text_on_screen("Press any key to exit...", 20, HEIGHT * 2 // 3)
    pygame.display.flip()
    wait_for_key()

def wait_for_key():
    waiting = True
    while waiting:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                pygame.quit()
                sys.exit()
            elif event.type == pygame.KEYDOWN:
                waiting = False

def show_text_on_screen(text, font_size, y_position):
    font = pygame.font.Font(None, font_size)
    text_render = font.render(text, True, WHITE)
    text_rect = text_render.get_rect(center=(WIDTH // 2, y_position))
    screen.blit(text_render, text_rect)

def change_platform_color():
    return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))

Let's go through the functions:

start_screen() Function:

• Clears the screen with a black background using screen.fill(BLACK).

• Displays the game title and instructions using show_text_on_screen.

• Flips the display to make the changes visible with pygame.display.flip().

• Calls wait_for_key() to wait for a key press before proceeding.

game_over_screen() Function:

• Clears the screen with a black background.

• Displays the game over message, the final score, and instructions for restarting.

• Flips the display.

• Calls wait_for_key() to wait for a key press.

victory_screen() Function:

• Clears the screen with a black background.

• Displays a congratulatory message, the final score, and instructions for exiting.

• Flips the display.

• Calls wait_for_key() to wait for a key press.

wait_for_key() Function:

• Waits for either a quit event (closing the game window) or a key press event.

• If the event is quitting, it exits the game using pygame.quit() and sys.exit().

• If the event is a key press, it breaks out of the waiting loop.

show_text_on_screen(text, font_size, y_position) Function:

• Renders text on the screen with the specified font size and Y position.

• Uses the pygame.font.Font class to create a font object.

• Renders the text onto a surface with the specified color (white in this case).

• Positions the text in the center of the screen at the specified Y position.

• Blits (draws) the text onto the game screen.

change_platform_color() Function:

• Returns a random RGB color for changing the platform color.

These functions handle different aspects of the game screens, user interactions, and display of text. They contribute to the overall structure and user experience of the game.

Main Game Loop

And now, you'll code the main loop of the game with it's applied mechanics. Let's check out the code first and then the explanation.

This is the longest block of code in this tutorial, so be patient – it's worth it.

# Main game loop
start_screen()
game_running = True

while game_running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            game_running = False

    keys = pygame.key.get_pressed()

    # Move the platform
    platform_pos[0] += (keys[pygame.K_RIGHT] - keys[pygame.K_LEFT]) * platform_speed
    platform_pos[1] += (keys[pygame.K_DOWN] - keys[pygame.K_UP]) * platform_speed

    # Ensure the platform stays within the screen boundaries
    platform_pos[0] = max(0, min(platform_pos[0], WIDTH - PLATFORM_WIDTH))
    platform_pos[1] = max(0, min(platform_pos[1], HEIGHT - PLATFORM_HEIGHT))

    # Move the ball
    ball_pos[0] += ball_speed[0]
    ball_pos[1] += ball_speed[1]

    # Bounce off the walls
    if ball_pos[0] <= 0 or ball_pos[0] >= WIDTH:
        ball_speed[0] = -ball_speed[0]

    if ball_pos[1] <= 0:
        ball_speed[1] = -ball_speed[1]

    # Check if the ball hits the platform
    if (
        platform_pos[0] <= ball_pos[0] <= platform_pos[0] + PLATFORM_WIDTH
        and platform_pos[1] <= ball_pos[1] <= platform_pos[1] + PLATFORM_HEIGHT
    ):
        ball_speed[1] = -ball_speed[1]
        score += 1

    # Check if the player advances to the next level
    if score >= current_level * 10:
        current_level += 1
        ball_pos = [WIDTH // 2, HEIGHT // 2]
        ball_speed = [random.uniform(2, 4), random.uniform(2, 4)]  # Randomize the ball speed
        platform_color = change_platform_color()

    # Check if the ball falls off the screen
    if ball_pos[1] >= HEIGHT:
        # Decrease lives
        lives -= 1
        if lives == 0:
            game_over_screen()
            start_screen()  # Restart the game after game over
            score = 0
            lives = 3
            current_level = 1
        else:
            # Reset the ball position
            ball_pos = [WIDTH // 2, HEIGHT // 2]
            # Randomize the ball speed
            ball_speed = [random.uniform(2, 4), random.uniform(2, 4)]

    # Clear the screen
    screen.fill(BLACK)

    # Draw the ball
    pygame.draw.circle(screen, WHITE, (int(ball_pos[0]), int(ball_pos[1])), BALL_RADIUS)

    # Draw the platform
    pygame.draw.rect(screen, platform_color, (int(platform_pos[0]), int(platform_pos[1]), PLATFORM_WIDTH, PLATFORM_HEIGHT))

    # Display information
    info_line_y = 10  # Adjust the vertical position as needed
    info_spacing = 75  # Adjust the spacing as needed

    # Draw the score in an orange rectangle at the top left
    score_text = font.render(f"Score: {score}", True, WHITE)
    score_rect = score_text.get_rect(topleft=(10, info_line_y))
    pygame.draw.rect(screen, ORANGE, score_rect.inflate(10, 5))
    screen.blit(score_text, score_rect)

    # Draw the level indicator in a light-blue rectangle at the top left (next to the score)
    level_text = font.render(f"Level: {current_level}", True, WHITE)
    level_rect = level_text.get_rect(topleft=(score_rect.topright[0] + info_spacing, info_line_y))
    pygame.draw.rect(screen, LIGHT_BLUE, level_rect.inflate(10, 5))
    screen.blit(level_text, level_rect)

    # Draw the lives in a red rectangle at the top left (next to the level)
    lives_text = font.render(f"Lives: {lives}", True, WHITE)
    lives_rect = lives_text.get_rect(topleft=(level_rect.topright[0] + info_spacing, info_line_y))
    pygame.draw.rect(screen, RED, lives_rect.inflate(10, 5))
    screen.blit(lives_text, lives_rect)

    # Update the display
    pygame.display.flip()

    # Control the frame rate
    clock.tick(FPS)

# Quit Pygame
pygame.quit()

Alright, that was a lot – but here's what we did in the above code:

Initialization and Start Screen:

• Calls start_screen() to display the initial screen with instructions.

• Sets game_running to True to initiate the main game loop.

Main Game Loop:

• Continues until game_running becomes False (for example, when the user closes the game window).

Event Handling:

• Checks for events using pygame.event.get().

• If a quit event (closing the game window) is detected, sets game_running to False to exit the loop.

Platform Movement:

• Reads the state of the arrow keys using pygame.key.get_pressed().

• Adjusts the platform position based on arrow key inputs.

• Ensures the platform stays within the screen boundaries.

Ball Movement and Bouncing:

• Updates the ball's position based on its speed.

• Implements bouncing off the walls by reversing the speed when reaching the screen edges.

Collision Detection:

• Checks if the ball hits the platform by comparing positions.

• If a collision occurs, the ball's vertical speed is reversed, and the player scores a point.

Level Progression:

• Checks if the player has scored enough points to advance to the next level.

• If so, increments the level, resets the ball's position, randomizes its speed, and changes the platform color.

Checking for Game Over:

• Monitors if the ball falls off the screen.

• Decreases the number of lives if the ball is below the screen.

• If lives run out, displays the game over screen, restarts the game, and resets score, lives, and level.

Screen Rendering:

• Clears the screen with a black background.

• Draws the ball and platform on the screen.

• Displays score, level, and lives information in rectangles with specific colors.

Display Update and Frame Rate Control:

• Updates the display to show the changes.

• Controls the frame rate with clock.tick(FPS).

Game Termination:

• Exits PyGame and terminates the program when the main loop is exited.

This structure ensures continuous gameplay, handling user input, updating game state, and providing visual feedback to the player.

Conclusion

In this tutorial, you've navigated through the intricacies of several key functions that form the backbone of your bouncing ball game.

Let's recap their roles:

The start_screen() function clears the screen with a black background, displays the game title and instructions, flips the display for visibility, and waits for a key press using wait_for_key().

The game_over_screen() function clears the screen with a black background, displays the game over message, final score, and restart instructions, flips the display, and waits for a key press with wait_for_key().

The victory_screen() function clears the screen with a black background, displays a congratulatory message, final score, and exit instructions, flips the display, and waits for a key press with wait_for_key().

The wait_for_key() function waits for either a quit event (closing the game window) or a key press event. It exits the game if quitting, and breaks out of the waiting loop if a key is pressed.

The show_text_on_screen(text, font_size, y_position) function renders text on the screen with specified attributes, utilizes the pygame.font.Font class for creating a font object, and positions and draws the text in the center of the screen.

And the change_platform_color() function returns a random RGB color for changing the platform color.

Following these functions, you delved into the main game loop, the heart of our game. It orchestrates the game's mechanics, including event handling, platform and ball movement, collision detection, level progression, and game termination.

You witnessed how this loop ensures continuous gameplay, responsive user interactions, and dynamic visuals.

Now that you're equipped with the understanding of these functions and the main loop, you have the knowledge to experiment, tweak, and expand your game. Feel empowered to embark on your journey of game development, explore new features, and create unique gaming experiences. Happy coding!

If you want to download the code or play the game, you can find it here:

Fast forward through years of coding and here I am, still writing software and going into the world of game development.

With my sights set on becoming an indie game developer, I decided to explore PyGame, given my "fluency" in Python with teaching it and all.

After some brainstorming, I landed on a quirky concept: a game where you play as an alien cruising around in a UFO. Your mission? Hit a specific abduction quota each week to dodge sanctions from the Intergalactic Federation.

I won't lie, I was heavily inspired by the old "Luna lander" that I had in the same old IBM computer.

Black and White Luna Lander screen shot

Why I think making games is cooler than your average coding project

So, imagine you're coding, and suddenly it hits you – games! Yep, we're talking about the stuff that turns a screen into an interactive universe where you're not just a coder – you're a wizard creating spells (or lines of code) that make things move, shoot, and explode without legal repercussions.

Here's why diving into game development is like finding the secret level into software development:

1. It's coding with a purpose: Forget boring programs – you're creating a universe where aliens abduct cows because...why not?

2. No more lone wolf coding: Games need more than code. They also need stories, characters, and cool graphics. Suddenly, you're not just a coder – you're a one-person army conquering design, storytelling, and maybe a bit of sound engineering.

3. It's like LEGO for coders: You get to build stuff, break it, and then build it again! Game development is all about trial and error, making it the LEGO of coding projects. Who said debugging can't be fun?

4. Creativity party: Ever wanted to create a world where gravity works sideways, and cows wear spacesuits? In game development, your creativity runs wild.

5. Solving mysteries, coding edition: Games come with puzzles. Not just for players, but for you, the mastermind behind the scenes. Think of it as creating your own coding mystery novel where every bug is a plot twist waiting to be solved.

6. Learn by playing: Remember those boring textbooks? Well, forget them. With game development, you're not just reading – you're playing.

7. Show off your skills: Building games isn't just about fun. It's about flexing your coding muscles. Your game is your trophy, your badge of honor. Imagine showing up to a job interview with a game you built. Who's cool now?

So, why settle for coding when you can create a universe? Game development is where coding becomes an epic adventure, and you, my friend, are the hero. Ready to level up?

Alright, let's craft this game together, step by step, and make it a blast! Wondering what it'll look like when it's all done? Check out this snazzy preview:

Preview of what the game will look like, showing an alien spaceship descending to pick up some cows.

Table of Contents:

1. How to Set Up the Environment

2. How to Design the Game Concept

3. How to Code the Game

4. Conclusion

How to Set Up the Environment

Install PyGame

Let's kick off this journey by setting up the playground. First, you'll need to install PyGame. Here's a simple guide to get you started.

1. Create a new directory

Open your favorite terminal and navigate to the location where you want to keep your game. Create a new directory for your project. Let's call it "AlienAbductionGame."

mkdir AlienAbductionGame

2. Navigate to the project directory

Move into your newly created directory.

cd AlienAbductionGame

3. Install PyGame

pip install pygame

Great! Now you're armed with PyGame, and you're ready to get into the coding.

What else do you need to start?

You already have Python with PyGame installed on your computer. So, the last thing you need is your favorite code editor. I will use and recommend Visual Studio Code, but you can use any other editor that you like or feel comfortable with.

Once you have everything installed and your editor ready, let's start by understanding the game concept and its mechanics.

How to Design the Game Concept

Game idea: Alien abduction adventure

Picture this: You're an alien pilot cruising through the cosmos in your trusty UFO. Unfortunately, you're falling behind on your weekly quota of abductions, and the Intergalactic Federation isn't too pleased. To avoid a cosmic penalty, you must abduct various targets on Earth.

Mechanics

Abduction quota and levels:

At the start of each level, you're given a specific abduction quota. This represents the number of cows you must abduct to progress.

The game consists of ten levels, each with an increasing quota. Completing one level unlocks the next and restart the quota counter.

UFO Controls:

Use the arrow keys or your preferred controls to navigate the UFO across the game screen.

Precise movements are crucial for successful abductions. Mastering the controls ensures efficient target acquisition.

Targets – adorable cows:

Targets are charming, pixelated cows wandering on the Earth's surface. You'll approach a cow, activate your tractor beam (space bar), and watch the cow dissappear from your screen.

Tractor beam mechanics:

You'll press the space bar to activate the tractor beam, which extends from your UFO to the ground.

When the beam touches a cow, it triggers the abduction process, and the cow dissappears, increasing your score and abduction quota.

Timer and urgency:

Each level comes with a countdown timer, adding a sense of urgency to your abductions.

Successfully reaching the abduction quota before the timer hits zero ensures advancement to the next level.

How to decide on game elements (spaceship, targets, and so on)

When it comes to selecting your game elements, simplicity is key. The simpler, the better. So, let's take a look at what you'll need to make the game mechanics work.

1. Spaceship (UFO):

• Instead of intricate designs, focus on a distinctive UFO sprite, a cute one

• Prioritize smooth movements and responsiveness to player controls.

2. Targets (cows):

• Opt for a cute cow sprite that aligns with the game's humor.

• Consider changing the cow's color when it's abducted – you will code a red bubble signifying abduction.

3. Background and environment:

• Maintain a clean and straightforward background, adjusting the color scheme to match the game's progression.

• Gradually modify the star color with each level to signify advancement.

4. Tractor beam:

• Ensure the tractor beam is visually distinguishable. You can experiment with a basic, yet effective, plain yellow color.

5. Level indicators:

• Implement a simple level indicator displaying the current level. This can be a small section at the corner of the screen.

6. Game Over and victory screens:

• Design straightforward screens indicating success or failure. A simple "Game Over" and "You Win" with accompanying text will suffice, like the following one

Winning screen

How to Code the Game

Walkthrough of key sections of the code

Now that you have a clear concept and understanding of our game mechanics and it's elements, it's time to get into the code. We'll walk through the key sections of the code.

First, let's start by importing the stuff you need to code our game:

import pygame
import random
import sys

In this section, you are importing three modules: pygame, random, and sys.

• pygame: This is the main library you're using to create the game. It provides functions and tools for handling graphics, user input, and more.

• random: you'll use this module to generate random numbers. This comes in handy when you want things to happen unpredictably, like the initial position of targets.

• sys: This module provides access to some variables used or maintained by the Python interpreter and to functions that interact strongly with the interpreter. You'll use it for handling system events, such as quitting the game when the player closes the window.

So, you're basically gearing up with the tools you need to make the game visually appealing, dynamic, and responsive to player input.

How to code the start screen

def start_screen(screen):
    # Constants
    WIDTH, HEIGHT = 800, 600
    BLACK = (0, 0, 0)
    WHITE = (255, 255, 255)
    FONT_SIZE = 30

    # Font for displaying the text
    font = pygame.font.Font(None, FONT_SIZE)

    # Fill the screen with the background color
    screen.fill(BLACK)

    # Introduction text
    intro_text = [
        "Welcome, Alien Abductor!",
        "You're behind on your weekly quota of abductions.",
        "Help the alien catch up by abducting targets on Earth!",
        "",
        "----------------------------------------------------------------------------------------------",
        "Move the UFO with ARROWS and", 
        "press SPACE to abduct cows with the track bean.",
        "----------------------------------------------------------------------------------------------",
        "",
        "Press any key to start the game...",
        "",
    ]

    # Render and display the introduction text
    y_position = HEIGHT // 4
    for line in intro_text:
        text = font.render(line, True, WHITE)
        text_rect = text.get_rect(center=(WIDTH // 2, y_position))
        screen.blit(text, text_rect)
        y_position += FONT_SIZE

    pygame.display.flip()

    # Wait for a key press to start the game
    wait_for_key()

def wait_for_key():
    waiting = True
    while waiting:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                pygame.quit()
                sys.exit()
            elif event.type == pygame.KEYDOWN:
                waiting = False

Code explanation:

• The start_screen function takes a screen parameter, which is the Pygame window where you'll display our introduction. It sets up some constants for screen dimensions, colors, and font size.

• The screen is filled with a black background.

• An introduction text is defined in intro_text, providing a welcome message, instructions, and a prompt to start the game.

• Using Pygame's font functionality, the text is rendered and displayed on the screen.

• The function then waits for a key press to start the game by calling the wait_for_key function.

• The wait_for_key function loops until a key is pressed or the user closes the window. If a key is pressed, the loop exits, and the introduction screen disappears.

So, by now, you should have something like this:

Start screen

How to build text on the screen function

Now, let's look at the following block of code:

def show_text_on_screen(screen, text, font_size, y_position):
    font = pygame.font.Font(None, font_size)
    text_render = font.render(text, True, (255, 255, 255))
    text_rect = text_render.get_rect(center=(WIDTH // 2, y_position))
    screen.blit(text_render, text_rect)

This code defines a function show_text_on_screen that displays a text message on the Pygame window. Let's break it down:

• The function takes four parameters:

1. screen: The Pygame window where the text will be displayed

2. text: The message or text string to be displayed.

3. font_size: The size of the font for the text.

4. y_position: The vertical position on the screen where the text will be centered.

• It creates a Pygame font object with the specified size.

• Using the font object, it renders the text with white color ((255, 255, 255) represents RGB values for white).

• The get_rect method is used to get the rectangular area that encloses the rendered text. The center of this rectangle is set to be at the horizontal center and the specified vertical position.

• Finally, the rendered text is blitted (drawn) onto the screen at the specified position.

• This function provides a convenient way to display text messages on the screen with a specified font size and vertical position.

How to code the "Game Over" screen

Now, you will code a game over screen, so keep going and check the next block of code:

def game_over_screen(screen):
    screen.fill((0, 0, 0))  # Fill the screen with black
    show_text_on_screen(screen, "Game Over", 50, HEIGHT // 3)
    show_text_on_screen(screen, f"Your final score: {score}", 30, HEIGHT // 2)
    show_text_on_screen(screen, "Press any key to exit...", 20, HEIGHT * 2 // 3)
    pygame.display.flip()
    wait_for_key()

Picking apart the game over screen:

• screen.fill((0, 0, 0)): Fills the entire Pygame window with a black background.

• show_text_on_screen(screen, "Game Over", 50, HEIGHT // 3): Displays the text "Game Over" with a font size of 50, centered vertically at one-third of the screen height.

• show_text_on_screen(screen, f"Your final score: {score}", 30, HEIGHT // 2): Displays the player's final score with a font size of 30, centered vertically at half of the screen height.

• show_text_on_screen(screen, "Press any key to exit...", 20, HEIGHT * 2 // 3): Displays the instruction to press any key to exit with a font size of 20, centered vertically at two-thirds of the screen height.

• pygame.display.flip(): Updates the display to show the changes.

• wait_for_key(): Waits for a key press before proceeding, effectively making the screen stay until the player interacts.

This function is used to show a game over screen with relevant information such as the final score and an exit instruction, something that by now should look like this:

Game Over screen

You win! How to code the victory screen :)

And last but not least, you have the victory screen, so let's take a look at the screen code:

def victory_screen(screen):
    screen.fill((0, 0, 0))  # Fill the screen with black
    show_text_on_screen(screen, "Congratulations!", 50, HEIGHT // 3)
    show_text_on_screen(screen, f"You've completed all levels with a score of {score}", 30, HEIGHT // 2)
    show_text_on_screen(screen, "Press any key to exit...", 20, HEIGHT * 2 // 3)
    pygame.display.flip()
    wait_for_key()

Code explanation:

• screen.fill((0, 0, 0)): Fills the entire Pygame window with a black background.

• show_text_on_screen(screen, "Congratulations!", 50, HEIGHT // 3): Displays the text "Congratulations!" with a font size of 50, centered vertically at one-third of the screen height.

• show_text_on_screen(screen, f"You've completed all levels with a score of {score}", 30, HEIGHT // 2): Displays a congratulatory message with the player's final score and a font size of 30, centered vertically at half of the screen height.

• show_text_on_screen(screen, "Press any key to exit...", 20, HEIGHT * 2 // 3): Displays the instruction to press any key to exit with a font size of 20, centered vertically at two-thirds of the screen height.

• pygame.display.flip(): Updates the display to show the changes.

• wait_for_key(): Waits for a key press before proceeding, effectively making the screen stay until the player interacts.

This function is used to show a victory screen with a congratulatory message and the player's final score.

So now you have the start of the game, the screens you will use to communicate with the player.

Let's build some sprites

Next up, you will code the base parameters such as the window size, sprites (the UFO and cow), colors, stars, and so on.

Take a look to the following block of code:

# Load spaceship and cow images
ovni = pygame.image.load("ovni.png")
cow = pygame.image.load("cow.png")

# Resize images if needed
ovni = pygame.transform.scale(ovni, (50, 50))
cow = pygame.transform.scale(cow, (40, 40))

# Initialize Pygame
pygame.init()

# Constants
WIDTH, HEIGHT = 800, 600
FPS = 60
BLACK = (0, 0, 0)
WHITE = (255, 255, 255)
RED = (255, 0, 0)
YELLOW = (255, 255, 0)
GRAY = (169, 169, 169)
ORANGE = (255, 165, 0)
LIGHT_BLUE = (173, 216, 230)  # Light blue color for the level indicator
SHIP_GREEN = (0, 255, 0)  # Green color for the ship
GRASS_GREEN = (0, 100, 0)  # Darker green color for the grass
STAR_COUNT = int(WIDTH * HEIGHT * 0.001)

Code explanation:

• ovni = pygame.image.load("ovni.png") and cow = pygame.image.load("cow.png"): Load the spaceship (ovni) and cow images from files.

• ovni = pygame.transform.scale(ovni, (50, 50)) and cow = pygame.transform.scale(cow, (40, 40)): Resize the images if needed. In this case, the spaceship is resized to a width and height of 50 pixels, and the cow is resized to a width and height of 40 pixels.

• pygame.init(): Initializes Pygame.

Constants:

• WIDTH, HEIGHT = 800, 600: Sets the width and height of the game window.

• FPS = 60: Sets the frames per second for the game.

• Colors: BLACK, WHITE, RED, YELLOW, GRAY, ORANGE: Define color constants using RGB values. LIGHT_BLUE, SHIP_GREEN, GRASS_GREEN: Additional color constants for specific elements.

• STAR_COUNT: Calculates the number of stars based on the window size.

This section handles the setup of images for the spaceship and cow, adjusting their sizes as needed. It also establishes constants for various aspects of the game.

The subsequent steps involve creating the game window and implementing player controls, collision detection, and other essential elements of the gameplay.

How to code the game window and set up the FPS

# Create the game window
screen = pygame.display.set_mode((WIDTH, HEIGHT))
pygame.display.set_caption("Alien Abduction Game")

# Clock to control the frame rate
clock = pygame.time.Clock()

# Player (alien spaceship)
player_rect = pygame.Rect(WIDTH // 2 - 25, 10, 50, 50)
player_speed = 5

# List to store targets (animals)
targets = []

# Set initial score
score = 0

# Font for displaying the score, level, and timer
font = pygame.font.Font(None, 36)

# Flag to track if spacebar is pressed
space_pressed = False

# List to store stars
stars = [{'x': random.randint(0, WIDTH), 'y': random.randint(0, HEIGHT), 'size': random.randint(1, 3),
          'color': LIGHT_BLUE} for _ in range(STAR_COUNT)]

# Grassy area at the bottom
grass_rect = pygame.Rect(0, HEIGHT - 40, WIDTH, 40)

# Level and Countdown Variables
current_level = 1
abduction_target = 10  # Initial target
countdown_timer = 60  # Initial countdown timer in seconds
current_score = 0  # New counter to track the score for the current level

# Counter to control the pace of target appearances
target_spawn_counter = 0
TARGET_SPAWN_RATE = max(30, 120 - (current_level * 90))  # Adjust the rate based on the current level

# List of colors for each level
level_colors = [
    LIGHT_BLUE,
    ORANGE,
    RED,
    YELLOW,
    GRAY,
    (0, 255, 0),  # Green
    (255, 0, 255),  # Purple
    (0, 255, 255),  # Cyan
    (255, 165, 0),  # Orange
    (128, 0, 128),  # Indigo
]

Code explanation:

Creating the Game Window:

• screen = pygame.display.set_mode((WIDTH, HEIGHT)): This line creates the game window with the specified width and height.

• pygame.display.set_caption("Alien Abduction Game"): Sets the title or caption of the game window.

Clock for Frame Rate:

• clock = pygame.time.Clock(): Initializes a clock object to control the frame rate of the game.

Player (Alien Spaceship):

• player_rect = pygame.Rect(WIDTH // 2 - 25, 10, 50, 50): Defines a rectangular area for the player (alien spaceship) at the top center of the window.

• player_speed = 5: Sets the speed at which the player can move.

Targets (Animals):

• targets = []: Initializes an empty list to store targets (animals).

Score:

• score = 0: Initializes the score to zero.

Font for Displaying Text:

• font = pygame.font.Font(None, 36): Creates a font object for displaying score, level, and timer.

Spacebar Pressed Flag:

• space_pressed = False: Initializes a flag to track whether the spacebar is pressed.

Stars:

• stars = [...]: Creates a list of stars with random positions, sizes, and colors. This is used to create a starry background.

Grassy Area at the Bottom:

• grass_rect = pygame.Rect(0, HEIGHT - 40, WIDTH, 40): Defines a rectangular area at the bottom for a grassy background.

Level and Countdown Variables:

• current_level = 1: Initializes the game at level 1.

• abduction_target = 10: Sets the initial abduction target.

• countdown_timer = 60: Sets the initial countdown timer in seconds.

• current_score = 0: Initializes a counter to track the score for the current level.

Target Spawn Counter:

• target_spawn_counter = 0: Initializes a counter to control the pace of target appearances.

Target Spawn Rate:

• TARGET_SPAWN_RATE = max(30, 120 - (current_level * 90)): Adjusts the rate of target appearance based on the current level.

Colors for Each Level:

• level_colors = [...]: Defines a list of colors for each level, which will be used in the game.

These variables and settings establish the initial state of the game, defining the player, targets, scoring system, and visual elements. Your game will evolve and respond to player actions based on these initial conditions.

How to code the game mechanisms

Take a look at these functions that you will use to run the game. Try to code it yourself before you copy and paste the code. This will help you understand the thinking process between the mechanics and the actual code.

# Function to display the start screen
start_screen(screen)

# Main game loop
running = True
game_started = False  # Flag to track whether the game has started

while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        elif event.type == pygame.KEYDOWN:
            if game_started:
                game_started = True  # Set the flag to True to avoid calling start_screen repeatedly
                continue  # Skip the rest of the loop until the game has started
            elif event.key == pygame.K_SPACE:
                space_pressed = True
        elif event.type == pygame.KEYUP and event.key == pygame.K_SPACE:
            space_pressed = False

    keys = pygame.key.get_pressed()

    # Move the player
    player_rect.x += (keys[pygame.K_RIGHT] - keys[pygame.K_LEFT]) * player_speed
    player_rect.y += (keys[pygame.K_DOWN] - keys[pygame.K_UP]) * player_speed

    # Ensure the player stays within the screen boundaries
    player_rect.x = max(0, min(player_rect.x, WIDTH - player_rect.width))
    player_rect.y = max(0, min(player_rect.y, HEIGHT - player_rect.height))

    # Spawn a new target based on the counter
    target_spawn_counter += 1
    if target_spawn_counter >= TARGET_SPAWN_RATE:
        target_rect = pygame.Rect(random.randint(0, WIDTH - 20), HEIGHT - 50, 50, 50)
        targets.append(target_rect)
        target_spawn_counter = 0

    # Update star glow animation and color for the current level
    for star in stars:
        star['size'] += 0.05
        if star['size'] > 3:
            star['size'] = 1
        star['color'] = level_colors[current_level - 1]

Code explanation:

Display Start Screen:

• start_screen(screen): Calls the start_screen function to display the initial start screen.

Main Game Loop:

• running = True: Initializes a flag to control the main game loop.

• game_started = False: Initializes a flag to track whether the game has started.

Event Handling:

• The loop iterates through pygame events to check for user input and window events.

• pygame.QUIT: If the user closes the game window, the running flag is set to False, exiting the game.

• pygame.KEYDOWN: If a key is pressed:

• If the game has started (game_started is True), the loop is skipped, preventing repeated calls to the start screen.

• If the spacebar (pygame.K_SPACE) is pressed and the game hasn't started, space_pressed is set to True.

• pygame.KEYUP: If a key is released:

• If the released key is the spacebar, space_pressed is set to False.

Player Movement:

• The player's position (player_rect) is updated based on arrow key input.

• The player's x-coordinate is adjusted by the difference between the right and left arrow keys multiplied by the player's speed.

• The player's y-coordinate is adjusted by the difference between the down and up arrow keys multiplied by the player's speed.

• The player's position is constrained to stay within the screen boundaries.

Spawn Targets:

• A counter (target_spawn_counter) is incremented in each iteration.

• If the counter exceeds the target spawn rate (TARGET_SPAWN_RATE), a new target is created at a random x-coordinate within the screen width and a fixed y-coordinate above the screen's bottom edge.

• The target is represented by a rectangle (target_rect) added to the targets list.

• The counter is reset.

Update Star Animation:

• The animation of stars is updated by increasing their size. If the size exceeds 3, it is reset to 1.

• The color of each star is set based on the current level.

This part of the code handles user input, player movement, target spawning, and updates the star animation. It's a crucial component of the game loop, ensuring player interaction and progression in the game.

How to render the elements of the game (player, assets, and so on)

The next part of the code handles the rendering of game elements on the screen, including stars, the grassy area, the player's spaceship, and targets. It also manages the drawing of the tractor beam and handles collisions between the tractor beam and targets.

# Clear the screen
    screen.fill(BLACK)

    # Draw stars with level-based color
    for star in stars:
        pygame.draw.circle(screen, star['color'], (star['x'], star['y']), int(star['size']))

    # Draw the grassy area
    pygame.draw.rect(screen, GRASS_GREEN, grass_rect)

    # Draw the player and targets
    screen.blit(ovni, player_rect)

    for target in targets:
        screen.blit(cow, target)

    # Draw the tractor beam when spacebar is pressed
    if space_pressed:
        tractor_beam_rect = pygame.Rect(player_rect.centerx - 2, player_rect.centery, 4, HEIGHT - player_rect.centery)
        pygame.draw.line(screen, YELLOW, (player_rect.centerx, player_rect.centery),
                         (player_rect.centerx, HEIGHT), 2)

        # Check for collisions with targets
        for target in targets[:]:
            if tractor_beam_rect.colliderect(target):
                # Change the color of the tractor beam to yellow
                pygame.draw.line(screen, YELLOW, (player_rect.centerx, player_rect.centery),
                                 (player_rect.centerx, target.bottom), 2)
                # Change the color of the target to red
                pygame.draw.rect(screen, RED, target)
                targets.remove(target)
                current_score += 1
                score += 1

Code explanation:

Clear the Screen:

• screen.fill(BLACK): Fills the entire screen with a black color, effectively clearing the previous frame.

Draw Stars:

• Iterates through the list of stars (stars) and draws each star as a circle on the screen.

• The circle's color is determined by the star's color attribute, and its position and size are based on the star's x and y coordinates and size.

Draw Grassy Area:

• pygame.draw.rect(screen, GRASS_GREEN, grass_rect): Draws a rectangle representing the grassy area at the bottom of the screen. The color is set to GRASS_GREEN.

Draw Player and Targets:

• screen.blit(ovni, player_rect): Draws the player's spaceship (ovni) on the screen at the position specified by player_rect.

• for target in targets: screen.blit(cow, target): Draws each target (cow) from the targets list on the screen at their respective positions.

Draw Tractor Beam (When Spacebar is Pressed):

• Checks if the spacebar is pressed (space_pressed is True).

• If true, tractor_beam_rect: Creates a rectangle representing the tractor beam based on the player's position.

• pygame.draw.line: Draws a yellow line representing the tractor beam from the player's center to the bottom of the screen.

• Checks for collisions between the tractor beam and targets.

• If a collision is detected, the target is removed, the tractor beam color changes to yellow, and the target's color changes to red.

• The score is updated.

Game logic

Now you are almost done – but first you need to add some logic in the game like the countdown timer which gives you one minute per level. You also need to draw like a navbar, a simple one with four elements containing the general score, level indicator, timer and abductions.

Here's how we'll do all that:

info_line_y = 10  # Adjust the vertical position as needed
    info_spacing = 75  # Adjust the spacing as needed

    # Draw the score in an orange rectangle at the top left
    score_text = font.render(f"Score: {score}", True, WHITE)
    score_rect = score_text.get_rect(topleft=(10, info_line_y))
    pygame.draw.rect(screen, ORANGE, score_rect.inflate(10, 5))
    screen.blit(score_text, score_rect)

    # Draw the level indicator in a light-blue rectangle at the top left (next to the score)
    level_text = font.render(f"Level: {current_level}", True, WHITE)
    level_rect = level_text.get_rect(topleft=(score_rect.topright[0] + info_spacing, info_line_y))
    pygame.draw.rect(screen, LIGHT_BLUE, level_rect.inflate(10, 5))
    screen.blit(level_text, level_rect)

    # Draw the countdown timer in a red rectangle at the top left (next to the level)
    timer_text = font.render(f"Time: {int(countdown_timer)}", True, WHITE)
    timer_rect = timer_text.get_rect(topleft=(level_rect.topright[0] + info_spacing, info_line_y))
    pygame.draw.rect(screen, RED, timer_rect.inflate(10, 5))
    screen.blit(timer_text, timer_rect)

    # Draw the targets to acquire for the current level in a gray rectangle at the top left (next to the timer)
    targets_text = font.render(f"Abductions: {current_score}/{abduction_target}", True, WHITE)
    targets_rect = targets_text.get_rect(topleft=(timer_rect.topright[0] + info_spacing, info_line_y))
    pygame.draw.rect(screen, GRAY, targets_rect.inflate(10, 5))
    screen.blit(targets_text, targets_rect)

    # Update the display
    pygame.display.flip()

    # Cap the frame rate
    clock.tick(FPS)

Code explanation:

Info Line Positioning:

• info_line_y = 10: Specifies the vertical position for the information line at the top of the screen.

• info_spacing = 75: Sets the spacing between different pieces of information on the line.

Draw Score:

• score_text: Renders the score text using the game font.

• score_rect: Retrieves the rectangle that encloses the rendered score text.

• pygame.draw.rect: Draws an orange rectangle around the score text, creating a background.

• screen.blit(score_text, score_rect): Blits (renders) the score text onto the screen.

Draw Level Indicator:

• level_text: Renders the level indicator text.

• level_rect: Retrieves the rectangle for the level indicator text.

• pygame.draw.rect: Draws a light-blue rectangle around the level indicator text.

• screen.blit(level_text, level_rect): Blits the level indicator text onto the screen.

Draw Countdown Timer:

• timer_text: Renders the countdown timer text.

• timer_rect: Retrieves the rectangle for the countdown timer text.

• pygame.draw.rect: Draws a red rectangle around the countdown timer text.

• screen.blit(timer_text, timer_rect): Blits the countdown timer text onto the screen.

Draw Abduction Targets:

• targets_text: Renders the text indicating the number of abductions required for the current level.

• targets_rect: Retrieves the rectangle for the abduction targets text.

• pygame.draw.rect: Draws a gray rectangle around the abduction targets text.

• screen.blit(targets_text, targets_rect): Blits the abduction targets text onto the screen.

Update Display:

• pygame.display.flip(): Updates the display to reflect the changes made in this iteration.

Frame Rate Cap:

• clock.tick(FPS): Caps the frame rate to the specified frames per second (FPS). This ensures that the game runs at a consistent speed across different systems.

And now we're ready for the last code block. It contains the countdown timer logic that's related to the level progression logic and the abductions reset. This means that you need to restart the abductions made by the player to zero every time you level up, for example:

• Level 1: 0/10 abductions

• Level 2: 0/20 abductions

And so on – the maximum abductions quota is 100 abductions in level 10, adding 10 abductions to the required quota for every level.

Timer logic and quitting function

Check out the last block of code:

 # Countdown Timer Logic
    countdown_timer -= 1 / FPS  # Decrease the timer based on the frame rate
    if countdown_timer <= 0:
        # Check if the player reached the abduction target for the current level
        if current_score < abduction_target:
            # Player didn't reach the abduction target, end the game
            game_over_screen(screen)
            running = False
        else:
            # Move to the next level
            current_level += 1
            if current_level <= 10:
                current_score = 0
                abduction_target = 10 * current_level
                countdown_timer = 60  # Reset the countdown timer for the next level
                # Reset the targets text for the next level
                targets_text = font.render(f"Abductions: {current_score}/{abduction_target}", True, WHITE)
                targets_rect = targets_text.get_rect(topleft=(timer_rect.topright[0] + info_spacing, info_line_y))

    # Check if the player reached the abduction target for the current level
    if current_score >= abduction_target:
        # Move to the next level
        current_level += 1
        if current_level <= 10:
            current_score = 0
            abduction_target = 10 * current_level
            countdown_timer = 60  # Reset the countdown timer for the next level
            # Reset the targets text for the next level
            targets_text = font.render(f"Abductions: {current_score}/{abduction_target}", True, WHITE)
            targets_rect = targets_text.get_rect(topleft=(timer_rect.topright[0] + info_spacing, info_line_y))
        else:
            victory_screen(screen)
            running = False

# Quit Pygame
pygame.quit()

Countdown Timer Logic:

• countdown_timer -= 1 / FPS: Decreases the countdown timer by the fraction 1 / FPS. This adjustment ensures that the timer decreases uniformly based on the frame rate.

Check Timer Expiration:

• if countdown_timer <= 0:: Checks if the countdown timer has reached or fallen below zero.

Player Didn't Reach Abduction Target:

• if current_score < abduction_target:: Checks if the player's current score is less than the abduction target for the current level.

• game_over_screen(screen): Calls the function to display the game over screen.

• running = False: Sets the running flag to False, terminating the game loop.

Move to Next Level:

• else:: Executes when the player has reached the abduction target for the current level.

• current_level += 1: Increments the current level.

• if current_level <= 10:: Checks if there are more levels to proceed to.

• current_score = 0: Resets the current score for the next level.

• abduction_target = 10 * current_level: Sets the abduction target for the next level.

• countdown_timer = 60: Resets the countdown timer for the next level.

• Resets the targets text for the next level.

• targets_text = font.render(f"Abductions: {current_score}/{abduction_target}", True, WHITE)

• targets_rect = targets_text.get_rect(topleft=(timer_rect.topright[0] + info_spacing, info_line_y))

Player Reached Abduction Target for All Levels:

• else:: Executes when the player has successfully completed all levels (reached level 10).

• victory_screen(screen): Calls the function to display the victory screen.

• running = False: Sets the running flag to False, terminating the game loop.

Quit Pygame:

• pygame.quit(): Cleans up and quits Pygame after the game loop has ended.

Now, you're done and you can run the game by typing this in your shell:

python aliend_aductions_game.py

If everything it's ok, you should see the start screen that will let you play after you press any key.

Conclusion

We've covered a lot in this tutorial. You started out by setting up the development environment, installing PyGame, and designing the game concept with simple mechanics.

Then you followed the step-by-step process of coding the game, from initializing the environment to implementing player controls, collisions, and dynamic elements. You learned how to integrate images for the spaceship and cows, creating an engaging visual experience.

The game features various levels, each with its own challenge and a countdown timer, adding an element of urgency. You implemented a scoring system, level progression, and engaging graphics to enhance the player experience.

Encouragement for further learning:

Congratulations on reaching this point! Game development is a dynamic and rewarding learning path, and there's always more to learn. As you continue, consider delving into more advanced topics such as:

1. Advanced graphics: enhance your game with more detailed graphics, animations, and visual effects.

2. Sound and music: integrate sound effects and background music to elevate the gaming experience.

3. Game physics: explore realistic movements and interactions within the game world.

4. Multiplayer functionality: learn how to implement multiplayer features for a more interactive experience.

5. Optimization techniques: dive into optimizing your code and graphics for better performance.

If you reach this point, thanks for reading and I hope you enjoy this post as much as I enjoyed doing it, also you can check the original code of this game and download the assets from here:

Some months ago, I was teaching a Python course. I was struggling to convey certain concepts because it was an online course, and I couldn't use a whiteboard or even a traditional board. The built-in whiteboard feature in Google Meet was also quite complex to use and share.

So, I decided to search on Google to see if there were any GitHub repositories with whiteboard apps.

I found many such repositories. But after trying a lot of them, I found that the apps were often too complicated for my needs. I wanted something simpler, where I could choose colors and line sizes, and then I could do the drawing myself.

So, what did I do? I decided to code my own app. And for this process, I chose to use Python and Tkinter, the default GUI (Graphics User Interface) toolkit that comes with Python.

The end result?

The whiteboard app windows with a white canvas to start drawing and writing and the RGB color picker.

So in this tutorial, I'll walk you through the process so you can build it yourself. This will help you sharpen your Python skills and learn about Tkinter, too.

How to Build the app's functionality

Setup your development environment

Building this app is pretty straightforward. You will need the latest Python version installed, which you can download and install from here:

If you're a Linux user, you won't need to install it as it comes with your distro. Also, you need to have a basic understanding of Python and know how to create functions.

After verifying that you already have Python installed on your computer, open Visual Studio Code or your preferred code editor to start writing code.

How to build the drawing feature

Create a Python file and begin by importing the Tkinter and color chooser modules, like this:

import tkinter as tk
from tkinter.colorchooser import askcolor

After importing Tkinter and the colorchooser module, which will open a modal to select our RGB color combinations, you can begin writing the functions to make this whiteboard work.

First, create a function to start drawing, like this:

def start_drawing(event):
    global is_drawing, prev_x, prev_y
    is_drawing = True
    prev_x, prev_y = event.x, event.y

This code defines a function named start_drawing that is meant to handle the beginning of a drawing action in a graphical user interface (GUI) application.

Let's break down what this function does:

1. def start_drawing(event):: This line defines a function named start_drawing that takes an event as its parameter. In GUI programming, events are actions or occurrences (like mouse clicks, key presses and so on) that trigger specific functions when they happen.

2. global is_drawing, prev_x, prev_y: This line declares that the variables is_drawing, prev_x, and prev_y are global variables. In Python, global variables are accessible from anywhere in the code and can be modified within functions. This line ensures that these variables are accessible within the function.

3. is_drawing = True: This line sets the is_drawing variable to True. This variable is typically used to indicate whether a drawing action is in progress. By setting it to True, the function signals that a drawing action has started.

4. prev_x, prev_y = event.x, event.y: This line captures the current coordinates of the mouse cursor when the start_drawing function is called. It assigns the x and y coordinates of the mouse cursor at that moment to the prev_x and prev_y variables. These variables are used to track the starting point of the drawing action.

So when this function is called (usually in response to a mouse click event), it sets the is_drawing flag to True to indicate that a drawing action is in progress and records the initial position of the mouse cursor using the prev_x and prev_y variables. These variables are then used in the subsequent drawing actions to connect the starting point with the current cursor position to create a drawing on the canvas.

Now let's keep coding. Next up, we need to write a function to actually draw on the whiteboard, like this:

def draw(event):
    global is_drawing, prev_x, prev_y
    if is_drawing:
        current_x, current_y = event.x, event.y
        canvas.create_line(prev_x, prev_y, current_x, current_y, fill=drawing_color, width=line_width, capstyle=tk.ROUND, smooth=True)
        prev_x, prev_y = current_x, current_y

A drawing is essentially a combination of points filled with colors, functioning as a vector. To work as a vector, it needs to have a starting and ending point. So after creating a function to start drawing, you'll need a function to stop drawing, like this:

def stop_drawing(event):
    global is_drawing
    is_drawing = False

How to build the color changing feature

Now that you have the primary drawing functionality, the next step is to implement the color-changing function. This is a simple function that calls the askcolor module, which is already part of Tkinter, like this:

def change_pen_color():
    global drawing_color
    color = askcolor()[1]
    if color:
        drawing_color = color

For the last functionality, you'll create a function to adjust the line width, allowing you to choose the thickness of your lines. Here's how to implement it:

def change_line_width(value):
    global line_width
    line_width = int(value)

Now you've completed the functions. Next, you'll use Tkinter to create the window for your app and buttons for choosing colors, clearing the whiteboard, and selecting your line width.

How to Build the GUI

GUI stands for Graphical User Interface, representing the windows you interact with on your computer, smartphone, tablets, and so on.

When coding a desktop app using Python and Tkinter, you define the size, position, buttons, and any other elements you want for your program. In this case, you need to create the following assets:

• A title for your app.

• A white blank canvas for drawing.

• A frame to hold the controls of your app in the same line.

• A color button.

• A clear canvas button to erase all your work and start drawing again.

• A slider to select your line width.

How to create your window

Start by creating a window with a title and a white canvas:

root = tk.Tk()
root.title("Whiteboard App")

canvas = tk.Canvas(root, bg="white")
canvas.pack(fill="both", expand=True)

is_drawing = False
drawing_color = "black"
line_width = 2

root.geometry("800x600")

Let's break down what each part does:

1. root = tk.Tk(): This line creates the main application window. It initializes a Tkinter application and assigns it to the variable root. This window serves as the container for all the graphical elements of the whiteboard application.

2. root.title("Whiteboard App"): This sets the title of the application window to "Whiteboard App." The title appears in the title bar of the window and provides a name for the application.

3. canvas = tk.Canvas(root, bg="white"): This line creates a drawing canvas within the main application window. The canvas is a white rectangular area where users can draw. It is initialized with a white background color. The canvas is assigned to the variable canvas.

4. canvas.pack(fill="both", expand=True): This configures the canvas to fill both the horizontal and vertical space of the application window. It allows the canvas to expand and occupy the entire window.

5. is_drawing = False: This initializes a variable is_drawing to False. It's typically used to track whether the user is currently drawing or not. When the user starts drawing, this variable is set to True to indicate an ongoing drawing action.

6. drawing_color = "black": This initializes a variable drawing_color to "black." It specifies the color that will be used for drawing on the canvas. You can change this color as needed to draw with different colors with the functions you will add later on this tutorial

7. line_width = 2: This initializes a variable line_width to 2. It specifies the width of the lines or strokes used for drawing. You can adjust this value to change the thickness of the lines.

8. root.geometry("800x600"): This sets the initial size of the application window to 800 pixels in width and 600 pixels in height. It defines the dimensions of the window when it is first displayed but you can resize your window and with it, your canvas space.

How to build your navbar and controls

Next thing you need to do is create a frame to hold the buttons or controls in the same line. This is the most comfortable way to have buttons, and it's kind of a navbar.

controls_frame = tk.Frame(root)
controls_frame.pack(side="top", fill="x")

Then, create two buttons and give them default fixed positions in your screen, like this:

color_button = tk.Button(controls_frame, text="Change Color", command=change_pen_color)
clear_button = tk.Button(controls_frame, text="Clear Canvas", command=lambda: canvas.delete("all"))

color_button.pack(side="left", padx=5, pady=5)
clear_button.pack(side="left", padx=5, pady=5)

So, right now, if you run your app you will see something like this:

The window of the app with the blank canvas and two buttons, one for changing colors and one to clear the canvas.

You already have the two main buttons for your app, one to change colors and one to clear the canvas. The last control you need to create is a slider for the line width function. For that, you will write the following code:

line_width_label = tk.Label(controls_frame, text="Line Width:")
line_width_label.pack(side="left", padx=5, pady=5)

line_width_slider = tk.Scale(controls_frame, from_=1, to=10, orient="horizontal", command=lambda val: change_line_width(val))
line_width_slider.set(line_width)
line_width_slider.pack(side="left", padx=5, pady=5)

And again, let's recap what is going on here:

1. line_width_label = tk.Label(controls_frame, text="Line Width:"): This line creates a label widget with the text "Line Width." The label is intended to display text to describe the purpose of the following slider (which controls the line width). It is placed within the controls_frame widget.

2. line_width_label.pack(side="left", padx=5, pady=5): This line configures the label's placement within the controls_frame.

3. side="left": This sets the label to be placed on the left side of the controls_frame. It ensures that the label is aligned to the left.

4. padx=5: It adds horizontal padding of 5 pixels around the label, creating some spacing.

5. pady=5: It adds vertical padding of 5 pixels around the label, creating spacing.

6. line_width_slider = tk.Scale(controls_frame, from_=1, to=10, orient="horizontal", command=lambda val: change_line_width(val)): This line creates a horizontal slider widget (Scale widget) that allows the user to select a line width. The slider ranges from a minimum value of 1 (from_=1) to a maximum value of 10 (to=10). The command option is set to call the change_line_width function with the selected value whenever the slider position changes.

7. line_width_slider.set(line_width): This sets the initial position of the slider to the value stored in the line_width variable, which is initialized earlier in the code. This ensures that the slider starts at the default line width.

8. line_width_slider.pack(side="left", padx=5, pady=5): This line configures the slider's placement within the controls_frame. It is placed on the left side, and padding is added to create spacing around the slider.

So, if you reach this point, your app should look like this:

How to connect your features with your GUI

But if you press the buttons or move the slider for line width, it won't work because you still need to bind or "link" the functions you coded at the beginning of this tutorial with the buttons and controls you created.

For that, you're going to write this code:

canvas.bind("<Button-1>", start_drawing)
canvas.bind("<B1-Motion>", draw)
canvas.bind("<ButtonRelease-1>", stop_drawing)

root.mainloop()

So, a last recap to understand the end of your code:

• canvas.bind("<Button-1>", start_drawing): When the left mouse button is clicked on the canvas, it triggers the start_drawing function.

• canvas.bind("<B1-Motion>", draw): While the left mouse button is held down and the mouse is moved on the canvas, it triggers the draw function.

• canvas.bind("<ButtonRelease-1>", stop_drawing): When the left mouse button is released (button released event), it triggers the stop_drawing function.

• And finally, root.mainloop() starts the main loop of the application, allowing it to respond to user interactions and events.

Wrapping up

I hope you enjoyed reading through this tutorial as much as I did writing it, and that the whiteboard helps you in whatever you need to do.

If you want to download the app, you can check it out here:

Until next time! Happy coding and keep coding forward to create a cool portfolio =D