Glossary

An attribute sits in the opening tag and usually has a name and a value in quotes: alt="George on the sofa". More examples: lang, class, id.

<!DOCTYPE html> says “this is HTML”. <html> wraps everything. The <head> holds invisible things for the browser (title, character set, viewport), the <body> everything you see.

padding is the space between content and border, border the frame, margin the space to the neighbours. With box-sizing: border-box, padding and border count towards the given width, which makes calculations easier.

In CSS 101 they are 768 pixels (roughly tablet) and 1024 pixels (desktop). The numbers are rules of thumb, not laws; what matters is that the content looks good.

In HTML class="btn", in CSS .btn { … } with a dot. A class may appear as often as you like, and an element can have several classes. Usually better for styles than an ID.

In HTML: <!-- note -->. In CSS: /* note */. In JavaScript: // note for one line. Good comments explain why something is the way it is.

CSS rules consist of a selector (what it hits) and properties (what changes). CSS is best kept in its own file such as style.css that every page links to. In the house comparison, it is paint and furniture.

Set it in :root { --primary: #00b4d8; }, use it with color: var(--primary);. Change the value in one place and the colour changes everywhere the variable is used.

Changes in the developer tools only apply on your screen until you reload. Important areas: Elements (HTML and CSS), Console (JavaScript messages and errors) and the device view.

Press F12, then click the phone-and-tablet icon and choose a device. It does not replace a test on a real device, but it shows most problems.

An editor saves plain text, without hidden formatting like a word processor. Better editors colour the code (syntax highlighting) and help you type.

<p>Hello</p> is a paragraph element. Elements can contain other elements; this creates the structure of the page. JavaScript sees them as branches in the DOM tree.

Windows often hides extensions. A file can then secretly be called index.html.txt and will not open as a web page. In Explorer, switch on “File name extensions” under View.

With display: flex, the children of an element are placed side by side. justify-content spreads them along the main direction, align-items across it, gap sets the spacing. Good for navbars and rows of buttons.

In HTML with <footer>. Like the navbar, it belongs on every page and looks the same everywhere.

Building blocks: <input> (a field), <textarea> (several lines), <select> (choice), <button type="submit"> (send). A form on its own does not send emails; that needs a server or a service.

linear-gradient(135deg, #00b4d8, #f72585) runs in one direction, radial-gradient(…) from the centre outwards. Gradients are backgrounds; you set them with background.

With display: grid and grid-template-columns: 1fr 1fr 1fr you get three columns of equal width. Rule of thumb: one direction flexbox, two directions grid.

There is only one <h1> per page, the main heading. Below it, <h2>, <h3> and so on structure the page like chapters and sub-chapters. The order also helps screen readers.

HEX: red, green and blue as two characters each. RGB: the same three values from 0 to 255, rgba() with transparency from 0 to 1 as well. HSL: hue, saturation, lightness, handy for varying a colour.

HTML describes structure, not appearance. It is made of tags such as <h1> or <p>. The browser reads the file and builds the page from it. In the house comparison, it is the walls.

In HTML id="hero", in CSS #hero with a hash. An ID appears only once per page. Useful for jump targets (#hero in a link) and for JavaScript.

src says where the picture is, alt what is on it. The alt text appears when the picture is missing and is read out for people who cannot see it. If you see the alt text instead of the picture, the path is usually wrong.

Inline (style="…" in the tag) only applies to one element, fine for tests. Internal (<style> in the head) applies to one page. External (<link rel="stylesheet" href="css/style.css">) applies to every page that links it, and the browser can cache it.

First define them with @keyframes name { … }, then assign them to an element with animation: name 0.6s ease forwards;. Unlike transitions, keyframes run without a trigger and can repeat (infinite).

<label for="name"> belongs to the field with id="name"; both names must match. Then a click on the caption puts the cursor in the field, and screen readers know what the field is for.

href is the target. An internal link points to a file in your own folder, for example toys.html. An external one starts with https://. If the name does not match exactly, you get “file not found”.

Every item sits in <li>. Rule of thumb: if the order matters, use ol; if not, ul. Menus are usually lists too.

Right-click index.html, “Open with Live Server”. Behind it, a small server runs on your own computer. For HTML 101, a double-click on the file is enough too.

Example: @media (min-width: 768px) { … } applies from 768 pixels wide, roughly from tablet size. The width at which the layout changes is called a breakpoint.

The basic rules are for the phone (one column, large, easy to tap). Media queries with min-width add more columns from a certain width. This is the usual approach today.

In HTML it sits in <nav>, usually as a list of links. It has to be on every page, otherwise you cannot get away from there. Later, CSS takes care of how it looks, often with flexbox.

Every paragraph gets its own <p>. The browser ignores blank lines in the code. For a line break inside a paragraph there is <br>.

A relative path starts from the current file. A slash separates folder and file. Every letter must match: on many servers upper and lower case count too, on Windows they do not. That is why something can work at home but not online.

Pseudo-classes start with a colon: :hover (mouse over it), :focus (selected, also by keyboard). Together with transition they create smooth hover effects.

With two colons: ::before and ::after. They need content: '', otherwise they do not appear. In CSS 101 this is how the underline that slides in on hover is made.

1rem is the font size of the <html> element, usually 16 pixels in the browser. Anyone who chooses a larger font in their settings automatically gets everything bigger with rem, but not with fixed pixels.

With the attribute required, the browser checks it itself and shows a hint. With type="email" it also checks whether it looks like an email address.

Typical: * { margin: 0; padding: 0; box-sizing: border-box; }. Every browser has its own spacing; the reset sets it to zero so the page starts the same everywhere.

Responsive design needs three things: the viewport line, flexible layouts (flexbox, grid, percentages instead of fixed pixels) and media queries for different widths. Mobile first is recommended: phone first, then extend.

Same navbar everywhere? All links correct? Any content missing? Does it look good on a phone? In real teams a second person often checks, because it is easy to overlook your own mistakes.

p hits all paragraphs, .btn all elements with class="btn", #hero exactly the one element with id="hero". Selectors can be combined, for example .card p for paragraphs inside cards.

Semantic tags such as <nav>, <footer> or <h1> help screen readers, search engines and you yourself understand the page. A <div>, by contrast, says nothing about its content.

Roughly: an ID is more specific than a class, a class more specific than a tag name. With equal specificity, the rule further down wins. That is why it is better to work with classes and use IDs sparingly.

They all get the same animation, but each a slightly longer animation-delay, for example 0.1s, 0.2s, 0.3s. It feels lively and guides the eye.

Notepad cannot do it, Notepad++ and VS Code can. A typo such as a missing quote stands out immediately because the colours after it look wrong.

<table> is the whole table, <tr> a row, <th> a header cell, <td> a data cell. Tables are for data, not for page layout; that is what flexbox and grid are for.

Most tags come in pairs: <p> opens, </p> with a slash closes. Some have no end tag, for example <img> and <br>. Opening tag, content and closing tag together are called an element.

linear feels mechanical (loading bar), ease-out brakes gently (things arriving), ease-in speeds up (things leaving), steps(n) jumps (pixel art). cubic-bezier() allows your own curves.

translate moves, rotate turns, scale enlarges. Order matters. Transform is handled by the graphics card, which is why animations using it run especially smoothly.

transition: background 0.3s ease; means: property, duration, curve. The trigger is usually another state such as :hover. For sequences with several steps or without a trigger, use keyframes.

With font-family you choose the font plus a fallback, for example 'DM Sans', sans-serif. Google Fonts delivers fonts from someone else's server; without internet the fallback is used. For offline-first you put fonts in your own folder.

Without <meta name="viewport" content="width=device-width, initial-scale=1.0"> a phone pretends to be about 980 pixels wide and shrinks everything. With the line, the page adapts to the real width.

At validator.w3.org, paste the code or upload the file. No red errors means clean HTML. The W3C is the organisation that sets web standards.

A web API is usually an address that returns data on request, often as JSON, for example weather data. The browser itself also has APIs, such as localStorage or the DOM. Like a counter at a station: you ask in a fixed form and get an answer in a fixed form.

Every element has a number, the index. It starts at 0: list[0] is the first element. push adds to the end, length says how many there are. A loop goes through all elements.

If only one expression follows the arrow, it is returned automatically. Arrow functions are handy for short tasks, such as in map, filter or event listeners.

A function marked async may use await. await only pauses this function until a promise is fulfilled; the rest of the page keeps running. Errors are caught with try { … } catch (error) { … }.

Comparisons such as points > 10 produce a boolean. Conditions with if use it to decide which path runs. Named after the mathematician George Boole.

=== checks type and value: 5 === "5" is false. == converts types first and so produces surprises. A single = does not compare; it assigns a value.

if (points >= 10) { … } else { … }. With else if there are more branches. For many fixed cases, switch is clearer.

With console.log(value) you see what is inside a variable, like an X-ray. Red lines are errors, often with file and line number.

The main types in JavaScript: string (text in quotes), number, boolean (true or false), array, object, plus null and undefined for “no value”. You check the type with typeof.

<script src="script.js" defer> downloads the file straight away but only runs it once the page is fully built. That way the script finds all the elements it needs.

const { name, points } = user; creates two variables with the matching values. Saves typing when you need several properties.

The browser builds the DOM tree from the HTML. With document.querySelector(".card"), JavaScript finds an element; with textContent or classList it changes it. The page updates immediately without reloading.

Important events: click, input, submit, keydown, DOMContentLoaded. JavaScript reacts with an event listener. The function receives an event object, for example with e.target, the clicked element.

button.addEventListener("click", doSomething) means: when someone clicks the button, doSomething runs. Unlike onclick =, addEventListener does not overwrite other listeners.

It is usually called e: e.target is the element, e.key the pressed key, e.preventDefault() stops the default behaviour, such as reloading when a form is submitted.

const response = await fetch(url); requests the address, await response.json() turns the answer into an object. This needs internet. Without a connection there is an error, which you catch with try/catch.

A function takes values in (parameters), works with them and gives back a result with return. Example: function greet(name) { return "Hello " + name; }. Short form: arrow function (name) => ….

A <script type="importmap"> states, for example, that three lives in your own vendor/ folder. That way the page loads nothing from other servers, in line with offline-first.

In ["HTML", "CSS", "JS"], "HTML" has index 0 and "JS" index 2. The last element is always list[list.length - 1].

Each feature of the page gets its own init function; at the end they are all called one after another. If one cannot find the element it needs, it simply returns, so a missing piece does not disturb the others.

JavaScript runs directly in the browser, without installation. It reads the code line by line from top to bottom. It is best included with <script src="script.js" defer></script>. In the house comparison, it is the wiring.

JSON looks like a JavaScript object but is plain text. JSON.stringify(obj) turns an object into text, JSON.parse(text) turns it back into an object. This is how data travels to servers or into localStorage.

localStorage.setItem("name", "Mikey") stores, getItem reads, removeItem deletes. It only stores text, so convert objects with JSON first. The data stays only in this one browser on this device.

for (let i = 0; i < 5; i++) { … } counts, list.forEach(x => …) goes through a list, while runs as long as something is true. Beware of endless loops: if the condition never becomes false, the page hangs.

Arrays have methods such as push, pop, map, filter; strings have, for example, toUpperCase. Your own objects can have methods too.

Modules keep big projects tidy: every file has one job. They are included with <script type="module">. Modules usually need a server, even a local one; double-clicking the file is then not enough.

querySelector returns null when it finds nothing; carrying on with it causes an error. A well-known quirk: typeof null gives "object".

JavaScript does not distinguish between whole and decimal numbers. The decimal separator is a dot. toFixed(1) rounds to one decimal place for display.

An object sits in curly braces: { name: "Mikey", points: 350 }. The names are called keys or properties. You read them with user.name. Stored or sent as text, an object uses the JSON format.

Calculating: + - * /, % (remainder), ** (power), ++ (plus one). Comparing: === !== < >. Combining: && (and), || (or), ! (not).

In function greet(name), name is the parameter. When calling greet("Mikey"), "Mikey" is the argument. Several are separated by commas.

A promise is pending at first and is then fulfilled or rejected. fetch returns a promise. You wait for the result with await or .then().

Read with a dot: user.name. With square brackets when the name is stored in a variable: user[field]. New properties can simply be assigned.

return ends the function and gives back a value you can store or display. Without return, a function gives back undefined.

If the same value lives in two places, sooner or later they drift apart. With one source, a single change is enough and all displays are correct again.

const copy = { ...user, points: 400 }; copies all properties and overwrites one. With arrays: [...list, "new"].

Good practice: the state lives in one place (single source of truth) and the display is built from it. If it should survive a restart, you store it, for example in localStorage.

Strings sit in "…", '…' or backticks `…`. "5" is text, 5 a number, which makes a difference when calculating and comparing.

With setTimeout or fetch, JavaScript does not wait; it carries on and handles the answer later. That is why a later line can be printed earlier. async/await makes such code readable.

In ${ } you can put any expression, including calculations. Template strings may also span several lines.

The try block holds code that can go wrong, such as fetch without internet. If an error happens, JavaScript jumps to the catch block, where you show a friendly message.

let creates a variable that may change, const one that stays the same. Do not use the old var any more. The value always has a data type, for example number or text.

When you register, a confirmation email usually arrives. A good service only stores passwords in encrypted form; if you forget one, you reset it via a link by email.

Supabase hands the emails to Brevo via SMTP, and Brevo sends them from no-reply@mykeyz.ch. For this to work, there is a DKIM record in the domain's DNS.

The browser fetches the files of a page, reads HTML, CSS and JavaScript and builds the picture on the screen from them. In the letter comparison, it is the postman who finds the way to the house using the address.

The browser loads an external CSS file once and then takes it from the cache, which makes pages faster. Sometimes that is why you only see a change after reloading. A service worker has its own cache for offline use.

Data sits in tables with rows and columns. Rules decide who may read or write which rows. The community on mykeyz.ch uses Supabase for this.

The mail service signs every email digitally. The recipient finds the matching check key via a DNS record of the domain. Without it, emails are more likely to end up in spam.

Computers find each other by numbers (IP addresses), people remember names. At the domain provider you enter DNS records that say where the domain points and which service may send email for it.

You rent your own domain from a provider, usually per year. There are also free addresses that belong to the provider, for example yourname.provider.something. For the domain to lead to the right server, DNS is needed.

The front part is your name, the back part the provider's domain; this is called a subdomain. It is enough to start with. Your own domain costs something every year.

You need a GitHub account, and its conditions apply, including on minimum age. The address is a free GitHub address; your own domain can be connected to it.

A hosting service provides the server. To get started there are free offers such as Netlify or GitHub Pages: upload the folder, done. For mykeyz.ch, Vercel does this.

Hostpoint records where the domain points (to Vercel) and which services may send email for it (Brevo). The site itself is not hosted there.

The devices are then on the same small network, even without an internet router. That is enough for local games via WebRTC.

With HTTPS nobody on the way can read along or change anything. For this the server needs a certificate (SSL/TLS). Many hosting services such as Netlify set it up automatically. The padlock means “securely connected”, not “locked”.

The web with its pages is only one part of it; email, games and video calls also run over the internet. Data travels in small packets from computer to computer until it arrives.

The address is then, for example, http://localhost:8000. Some things (modules, service workers) only work with it. Live Server in VS Code is such a local server.

The file is usually called manifest.json and is linked in the head with <link rel="manifest">. It also states whether the app starts with or without the browser bar.

HTML 101 shows the “Deploy manually” route. Netlify sets up HTTPS automatically. You need an account, and the provider's conditions apply.

For this, fonts and libraries sit in your own folder instead of on other servers, and games are built as PWAs with a service worker. Advantage: it also works on the train, in the woods and if a service disappears.

For web apps this runs through the service worker and needs the person's explicit permission. Use it sparingly: too many notifications are annoying.

A PWA needs a manifest (name, icon, how it starts) and a service worker that stores files for offline use. Many games and tools on mykeyz.ch are PWAs, in line with offline-first.

A QR code holds far more characters than a barcode. It can be used, for example, to exchange connection details between two phones, entirely without internet.

Instead of giving each person permissions one by one, they get a role, such as member, moderator or admin. The database checks with every request whether the role is allowed to do it.

A mail service accepts the email via SMTP and delivers it. So it does not end up in spam, the domain must confirm that this service may send on its behalf (DKIM, via DNS).

When someone opens your address, their browser asks the server for the files and the server sends them. Servers usually sit in data centres at a service. In the house comparison, the server is the plot the house stands on.

Behind every service there are servers. Free plans have limits and conditions (for example a minimum age for an account); read them first, ideally with your parents. Using a service means trusting it with your data.

The service worker sits between the page and the internet. It can answer requests from its cache when there is no connection. Many PWAs use the rule “network first”: load fresh when there is internet, otherwise the stored version.

Supabase offers a database with rules about who may read and write what, plus sign-in with email and password. The region can be chosen, for example Zurich.

With Netlify you drag the folder into the window. With mykeyz.ch it is automatic: as soon as a change is on GitHub, Vercel rebuilds the site and puts it live.

A URL consists of protocol (https://), domain (mykeyz.ch) and path (/projects.html). After that there can be a jump target, such as #dom on this page.

Vercel is connected to the GitHub repository. When a change arrives there, Vercel rebuilds the site and puts it live.

Normally everything goes through a server. With WebRTC the devices talk to each other directly, for example for games on the same Wi-Fi. First they have to exchange connection details; without internet this can be done via QR code, for example.

The main branch is usually called main. If the experiment works, you merge the branch back. Small projects often write directly to main so changes are visible straight away.

A CCMS looks like a sheet on a drawing board, with tabs. It records what belongs and what does not, which questions are open and what has been decided. It contains no finished code.

The opposite is the GUI, the graphical interface with windows and buttons. CLI programs are fast, easy to automate and also run without a graphical interface. Examples: git, python, npm.

Every commit has an ID made of letters and numbers, for example 4f38655. With it you can find exactly this state again. Good commit messages say briefly what and why.

Pictures stick better than long texts. In the tutorials on mykeyz.ch the variant is called “assembly plan”, in the website's look. The little boxes in this glossary are small assembly plans.

Every saved change is called a commit and gets a short description. All commits together form a project's history. Git runs on your computer; GitHub is a service that keeps Git projects on the internet.

On GitHub, repos are public or private. You can view changes in the app or in the browser, and other services such as Vercel can react to them. GitHub Pages can also publish websites.

If you use someone else's work, you must follow the licence, for example by naming the author or not selling it. For your own work you decide what others may do. The licence usually comes as a LICENSE file.

Markdown files end in .md and stay readable even without a special program. GitHub and Obsidian display them nicely formatted.

MIT: use, change, sell allowed; keep the licence notice. GPL: anyone who passes it on must also release their own code under GPL; tricky for games you sell. CC BY-NC: share and adapt with attribution, but not commercially. Not legal advice.

It is a good step up from Notepad: light, fast and with syntax highlighting. As with any program, get updates only from the official site; for children, parents decide on them.

Notes can be linked with [[Name]]. The files are ordinary Markdown files on your own device, with no cloud required. With Git, the vault can be synced between PC and phone.

Exactly what is allowed is in the licence. Many well-known tools are open source, for example Blender, Godot, three.js and Git. This fits scavenger mode: use what exists instead of building anew.

A prototype does not have to look good. It answers a question, for example “Is this fun?” or “Does it run on a phone?”.

When several people or devices work on the same repo, you first pull the latest state and then push your own changes. For mykeyz.ch, a push to GitHub automatically triggers the new version at Vercel.

A repo contains the files and all commits. It can live only on your computer or also on GitHub.

Every stage has a goal and a test that shows it has been reached. That keeps a big project manageable. Game-Design 101 starts with a roadmap too.

Before building something new, you look for free tools, libraries or your own older parts. That saves time and mistakes. Important: check the licence.

Many people read on a phone or without a mouse wheel. Tabs make long content manageable, and a link can open a specific tab directly. When printing, they all appear one below the other.

On Windows it is called, for example, PowerShell or Command Prompt; on Mac and Linux, Terminal. In it you start programs with text, such as a local server or Git. Not to be confused with the console in the browser, where JavaScript runs.

A proven rule: never overwrite, always create a new version. That way you can always go back to the last good edition. For notes Git does this; for pages and code the number is in the file name.

VS Code is made by Microsoft and is free. VSCodium builds the same open source code without Microsoft's branding and telemetry. Extensions such as Live Server make work more comfortable.

An LLM predicts piece by piece which text fits best. It can explain, translate and write code, but it can also be wrong. So check results, especially facts and numbers. Examples: Claude, Gemma.

Whoever has the key can act on the owner's behalf and often run up costs. So: never put it in chats, screenshots or public code; keep it only where the service intends. If one is leaked, create a new one immediately.

A connector usually uses MCP. You sign in once and allow access; after that the AI can read or act in this app. What it may do is set when connecting, and you can disconnect at any time.

Gemma comes in different sizes; smaller ones also run on ordinary PCs. One example is Gemma 4 E4B. Google's terms apply to its use.

You choose a model, load it and chat. With “Serve on Local Network”, other devices on the home network can access it too, such as a phone. It is free but not open source; read the provider's terms.

Advantages: works offline, the data stays at home. Disadvantages: needs a strong graphics card with enough VRAM, and small models are less capable than large ones in a data centre. Programs for this include LM Studio and Ollama.

MCP is an open standard introduced by Anthropic in 2024. An MCP server offers tools, for example “read table” for a database, and the AI calls them. Like an interpreter who understands both sides. This is how an AI such as Claude can reach Supabase or Vercel, for example.

A model starts with one command; other programs talk to Ollama through an API. To let other devices on the network access it, set OLLAMA_HOST=0.0.0.0. Ollama is open source.

The clearer the prompt, the better the answer: what should be made, for whom, in what form, with which example. You can follow up and refine, as in a conversation.

A skill contains a SKILL.md file with rules, sometimes also templates or scripts. That way the AI works to the same standards every time without everything having to be explained again.

The system prompt sets tone, task and limits. It can say, for example, that building only starts after approval. It pays to store system prompts with version numbers.

A VPN connects devices with encryption. Tailscale sets this up without router settings. That way your phone can reach the AI model on your PC at home while you are out. There is a free plan for individuals.

Models read and write tokens instead of letters. How much a model can take in at once and what a service costs are often measured in tokens. Not to be confused with an access token, a kind of password.

A model runs fastest when it fits entirely into VRAM. With 8 GB of VRAM, smaller models run well; large ones only in reduced form or slowly. That is why the choice of model often depends on the graphics card.

Every action needs clear feedback, otherwise the player does not know whether it worked.

In HTML with <canvas>. In Game-Design 101 it is 320 × 180 points and is redrawn for every frame. Good for 2D games.

The game usually checks it via distances or overlapping rectangles (hitboxes). Then a rule decides what happens: collect, bounce, lose a life.

Example platformer: jump, land or fall, coin chimes. If the core loop is fun, it carries the whole game. That is why you test it first with a prototype.

Real decisions have pros and cons on both sides. If one choice is always right, it is not a decision, just one more click.

Speed, gravity, number of enemies, time limit: these are dials. Small changes have a big effect. That is why you test with real players, not just yourself.

Separating calculation (update) and drawing (draw) makes mistakes easier to find: if the game state is right but the picture is not, the problem is in drawing.

If you move characters with speed * dt, they run equally fast on fast and slow devices. Without dt, a game would run twice as fast on a 120 Hz screen as on a 60 Hz one.

Example: a half chance of 10 gold gives 5 gold on average. This lets you compare choices fairly before testing how they feel.

Things that feel unfair include invisible dangers, hitboxes that are too large or randomness that devalues skill. It feels fair when you can see what is coming and have time to react.

Good feedback is immediate, clear and matches the importance: a small hit sounds different from a win. Never use colour as the only signal; not everyone sees colours the same way.

Flow happens when challenge and skill match. Too easy becomes boring, too hard frustrates. That is why difficulty rises slowly in good games.

The number of frames per second is called the frame rate (FPS). If it drops, the game stutters. On weak phones it helps to draw less.

Each pass: read input, compute physics, check rules, draw the picture. Each pass produces one frame. In code this usually happens with requestAnimationFrame.

Mechanics are a game's verbs. A few good mechanics that work well together are usually better than many half-finished ones. The core loop grows out of them.

The genre is the first decision because it shapes almost everything else: controls, pace, rules. Genres can be mixed; serious topics have a place in games too.

If the player's hitbox is a little smaller than the character, near misses feel fair. For testing, hitboxes are often drawn visibly.

In Game-Design 101 they are called setup, input, physics, update and draw. That keeps it clear which code runs when.

A good HUD only shows what matters right now and does not cover the action. On a phone it must stay readable even with a thumb in front of it.

Information can often be traded for resources, such as paying a scout. What the player knows and does not know changes the whole feel of the game.

Juice changes nothing about the rules but a lot about the feel. Too much becomes tiring; best used in measured doses and with an off switch.

Level design means: introduce new ideas, let players practise, then combine them. Levels are often stored as data (for example JSON), not as code, so they are easy to change.

On the same device it is easiest. Across several devices they must exchange data, via a server or directly (WebRTC). Offline multiplayer can connect phones via QR code without internet, for example.

In Game-Design 101 you can change them live with sliders and see immediately what happens. That is how you find the values that feel right.

Each particle has position, speed and lifetime. Together they form an effect. Many particles cost computing time, so use them sparingly on phones.

A jump is often just: set an upward speed, subtract a little gravity every frame, stop at the ground. For real bouncing and pushing, you use a physics engine.

Randomness provides surprise and makes every round different. Too much of it makes skill worthless. In code, Math.random() provides random numbers.

Because resources are scarce, decisions arise: spend now or save? Good games offer several sensible ways to use a resource.

Two choices can bring the same on average and still feel completely different: a little for sure, or maybe a lot. Players like both, depending on the situation.

Known from racing games: those at the back get better power-ups, those in front are slowed down. It keeps games exciting but can feel unfair if it is too strong.

The setting determines pictures, sounds and language. It can explain a mechanic: on the ship the floor sways, in the forest it is dark.

For animations, several pictures sit side by side on a sprite sheet (atlas). The game shows them in turn. An atlas saves loading time because the browser fetches only one file.

Each phase has its own rules and transitions: “game” becomes “end” at zero lives, “end” becomes “menu” again with a button. Characters often have states too, such as stand, run, jump.

Many games have hardly any story, and that is fine. Where there is one, the surroundings often tell it too: a broken window, a note. A good ending may be short.

Strategy needs information and real decisions. If there is only one best way, strategy turns into memorisation.

For example HTML canvas and JavaScript for small browser games, three.js for 3D in the browser, Godot for bigger games. The choice depends on the target device and on what the team knows.

In one frame the ball is in front of the wall, in the next already behind it; there never was a touch. Fixes: compute smaller steps, thicker walls or check the path between two frames.

For this a 3D model is cut into layers (slicer) and saved as a print job. Unlike in games, the model must be closed and thick enough. This way a drawing can become a printed object, for example.

Niantic's platform was shut down; since 2026 the framework has been open source (MIT). Room recognition is only available as an unmodifiable binary file with its own licence: do not modify, credit Niantic Spatial, no competing product, revocable. Not legal advice.

You set key poses on a timeline and the program fills in between, much like CSS keyframes. In Blender, saved movements are called actions; in the GLB they travel into the game.

For this the phone must understand where floor and table are and how it is moving (SLAM). In the browser this works with WebXR or libraries such as 8th Wall. An AR murder mystery can, for example, turn your own table into a crime scene.

ARCore detects surfaces and motion very well but requires Google services on the phone. Unity AR Foundation, Godot AR and WebXR on Android build on it.

Blender is open source (GPL). What you create with it belongs to you. For web games you often export GLB files from it; add-ons such as Rigify help with the skeleton.

The camera has position, viewing direction and field of view. When it moves, the world feels alive. In AR, the real phone camera takes on this role.

Geometries, materials and textures take up memory on the graphics card. Removing them from the scene leaves them there. dispose() cleans up; otherwise the game gets slower over time.

three.js comes with simple shapes; complex characters are modelled in Blender and loaded as GLB.

GIMP is open source (GPL). You use it to edit photos, paint textures or build interfaces for games. A tutorial can be an asset pack too, for example for game interfaces with GIMP.

glTF is an open standard. GLB is the same thing in a single file, with shapes, materials, textures and animations. Blender exports it; three.js and Godot load it.

Godot is open source under MIT, with no licence fees. It is usually programmed in GDScript, a Python-like language. Games can be exported for PC, phone and web.

3DoF means three degrees of freedom: only rotating, not moving. A 3D scene can turn along with the phone, but things do not stay fixed on the table. A simple fallback when SLAM does not work.

TripoSG is an open model for this (code and weights under MIT), Modly an interface for using such models on your own PC. The result usually needs touching up in Blender. Expect to need about 8 GB of VRAM. Check the licence of each tool.

When the camera recognises the marker, it knows exactly where and how big the 3D object should appear. It is simple and works almost everywhere but needs the printout. Libraries: MindAR, AR.js.

A material can carry a texture and decides how light is reflected. Some materials need no light and glow by themselves, which is cheap to compute.

A mesh is made of many small triangles. More triangles means a finer shape but more computing work. That is why there are low-poly models for phones.

Instead of programming every movement yourself, you give bodies mass and shape, and the engine does the maths. In the toolkit concept this is cannon-es. More bodies means more computing time.

In CSS a pixel is a unit of measurement, not a real light-emitting dot: phones with many real dots combine several into one CSS pixel. Pixel art uses visible, large pixels as a style.

PNG suits photos with transparency and pixel graphics; enlarged, it becomes blurry. SVG describes lines and areas and stays sharp at any size, ideal for icons such as the pictograms here. JPG is for photos without transparency.

Fewer polygons run faster, especially on phones and in AR. Low-poly is also a style in its own right. Asset packs often come in low and HD versions.

That way a model quickly gets a paint job matching the original picture. Tools for this are Blender itself or add-ons such as StableProjectorz. Hidden areas need further views or manual work.

In the browser it usually uses WebGL and therefore the graphics card. The more objects, light and effects, the more work per frame.

Higher resolution shows more detail but needs more memory and loading time. For the web it pays to save pictures no larger than necessary. An itch cover is 630 × 500 pixels.

The skeleton (rig) consists of bones, and every part of the mesh is attached to certain bones. Rigify is a Blender add-on that generates a finished human skeleton from a template.

Objects are added to the scene and can be nested: a wheel hangs on the car and moves with it. Without light, most materials cannot be seen.

Shaders run for every point or pixel at the same time and are therefore very fast. They create water, glow or a comic look. They are written in their own language (GLSL).

SLAM tracks distinctive points from frame to frame and builds a map from them. It is computationally heavy and jerky on older phones. Without ARCore, SLAM in the browser is available, for example, from 8th Wall or AlvaAR.

How the picture fits onto the shape is set by the UV unwrap, like a flattened cardboard box. Large textures cost memory, so often 1024 or 2048 pixels rather than more.

three.js takes a lot of work off your hands: scene, camera, light, loading models. It is open source under MIT. Kept in its own folder, for example vendor/, games run offline too.

WebXR uses whatever the device provides. On Android it needs ARCore, meaning Google services. On iPhones support is limited. That is why it is worth looking at ways without ARCore.

With the Arduino environment you write programs (sketches) in C++ and upload them to the board via USB. Many other boards, including the ESP32, can be programmed this way.

Both sides must use the same baud rate, otherwise you get gibberish. Higher is faster, but not every cable manages every rate. Common values are 115200 or higher for flashing.

With the Mesh Kit, the Meshtastic app connects to the node via Bluetooth; the first time, you enter a PIN shown on the screen. The range is a few metres.

On the ESP32 you usually hold a button (G0 or BOOT) while plugging in the cable. For the Mesh Kit, the guide says: cap off, switch off, hold G0, plug in USB.

In Meshtastic every channel has a name and a key. The default channel is public; for private conversations you create your own and share the key only with the right people, never publicly.

The limit keeps a band free for everyone. In the sub-band used by Meshtastic it is 10 %. Anyone who sends too much is slowed down by the node.

There are many variants. The M5Stack Cardputer contains an ESP32-S3. It is programmed, for example, with Arduino or PlatformIO in C++.

Firmware is not installed like an app but written onto the chip (flashed). New firmware replaces the old one completely. So know beforehand how to get back to the old one.

Often the device has to be in a boot mode for this; on the Cardputer, hold the G0 key while plugging in. Tools: M5Burner, Arduino, PlatformIO or a project's web flasher. Do not pull the cable while flashing.

In Meshtastic the region is called EU_868; the device sets the frequency itself (869.4 to 869.65 MHz). The region must be right, otherwise you transmit on a frequency that is not allowed.

An output switches an LED, for example; an input reads a button. The pins only tolerate small currents and voltages; motors need their own circuit.

In Meshtastic, 3 hops are the default, at most 7. More hops reach further but load the network because every relay costs airtime.

Several devices hang on the same two lines, each with its own address. Slower than SPI but economical with pins. Typical for temperature or orientation sensors.

LoRa is slow, but depending on the terrain a signal can reach kilometres. Just right for text messages without a mobile network. In Europe it transmits in the band around 868 MHz.

Choose the firmware, select device and port, set the baud rate, “Burn”. For the Mesh Kit, 1500000 is given as the baud rate. It needs an internet connection to download firmware.

The Cardputer runs custom firmware projects, for example loading animations. With a LoRa module it can become a Meshtastic device. M5Stack is the company that makes such modules.

Each device (node) passes messages on until they arrive. It is controlled with an app via Bluetooth or directly on the device. Messages are short, about 200 bytes.

A microcontroller has no big operating system. It runs exactly one program, the firmware, and starts in an instant. It needs little power and runs well on a battery. Examples: ESP32, Arduino boards.

In the Meshtastic network every radio is a node. The more nodes are spread out, the further the network reaches.

With a battery, LoRa and local software, devices stay usable when the network is gone. It is the hardware side of offline-first.

Unlike a microcontroller it has an operating system and can run many programs at once, such as a server. In return it needs more power and takes longer to start.

SPI needs more wires than I2C but is much faster. Each device gets its own select line.

In the 869.4 to 869.65 MHz sub-band up to 27 dBm is allowed, which is half a watt. Meshtastic's default setting fits; do not raise it by hand. More range often comes from a better location or a better antenna.

Assets are separate from code. That way you can swap graphics or sound without changing the program. Every third-party asset comes with its licence.

A pack typically contains: a ZIP with the files, a cover, a description and a licence file. Examples from the LolZ brand: Halloween props, Escape Lab props, game UIs, the effect pack “Magic and Sparks”.

For example the low and HD versions of a pack, or two matching packs. Buyers save, and sellers sell more at once.

On itch.io the cover is the small preview image (630 × 500 pixels), the hero image the large picture at the top of the page (1920 × 1080). Both should show at a glance what is inside.

VFX stands for visual effects. They usually consist of particles or sprite animations. The pack “Magic and Sparks”, for example, contains 10 child-friendly effects.

Good icons are still clearly recognisable when small. As SVG they stay sharp; for small screens like the Cardputer they are often converted to pixel graphics.

There you can offer games and packs for free, at a fixed price or as “pay what you want”. The packs on mykeyz.ch appear under the LolZ brand. itch.io's terms apply to sales.

The name comes from “buy someone a coffee”. Besides donations there is also a shop. A possible place alongside itch.io and mykeyz.ch.

It is usually called LICENSE.txt or LIZENZ.txt and belongs in every pack. If the package contains third-party parts, their licences are added, for example in a folder of third-party licences.

It is reassuring while you wait and shows that the device has not frozen. They can also be rendered as GIFs for previews.

Low has fewer polygons and smaller textures and runs smoothly on phones. HD looks finer but needs more power. Both together are often cheaper as a bundle.

Props add a lot to the mood without changing the rules. 3D props often come in low and HD versions.

PWYW lowers the barrier to trying something, and those who want to give more can. Some packs have a minimum, for example CHF 5.

Whoever creates something is usually the rights holder. That is why licence files and code carry a copyright notice with name and year. Not legal advice.

Short sounds give instant feedback. You can record them, edit them with programs such as Audacity or generate them in code. Do not forget volume and a mute switch.

A first check is a web search; more thorough are the trademark registers (swissreg in Switzerland, EUIPO in the EU, WIPO worldwide). If unsure, ask an expert. Not legal advice.

UI stands for user interface, the surface people operate. With a template you do not start from scratch. Templates exist, for example, for the Cardputer and for games (GIMP).

ZIP files can be opened on any computer without extra software. Ideal for downloads: one file instead of a hundred. The folder structure inside is preserved.