FS 2026 Frontendentwicklung

Game: Drawing countries

Gameplay loop

This game can be played as one person or more.

1. You are given a blank canvas with an example country. In this case, Switzerland. You are also given the location of 2-3 major cities within that country (Bern, Zürich)

2. With those references, draw the outline of the country from memory. You have 60 seconds. (may be adjusted for balancing)

3. After the time is up, you will be given a score based on how accurate you were. The goal is to be the best in the configured amount of rounds.

Architecture

Stack

frontend
├── HTML
├── Vanilla CSS
└── Vanilla JavaScript
    └── Pixi.js (TBD)
backend
└── PHP (TBD)
    └── Postgres (TBD)

The backend is planned to be written in PHP, with a database using PostgreSQL. Language is pending.

The drawing part will likely be handled by WebGL and a canvas.

Coding environment

This project uses Biomejs for linting and formatting. Npm is used for library management.

Coding aspects

• Evaluating arbitrary shapes and determining their surface area
• Comparing two arbitrary shapes to calculate a score
• Storing and receiving data in the database
• Handling user events (drawing, clicks, navigation)

Setup

Frontend

Your browser must support WebGL. If you are uncertain, check this website.

Open the frontend/index.html file in a browser. That's it.

Backend

Setup for backend is WIP.