DEV Community: Arelvox

I Built a One-Tap Stacking Game in Vanilla JS: The Tiny Details That Make It Addictive

Arelvox — Sun, 25 Oct 2026 02:21:52 +0000

One-tap games look trivial. You tap, a block drops, done. But when I built Sky Stack, a small stacking game in plain JavaScript and canvas, the fun turned out to depend on a few tiny decisions. Here is how it works and what made it feel good to play.

👉 Play it first (30 seconds): arelvox.com/sky-stack

The whole game in one idea

The tower is an array of blocks, and each block is only an x position and a width:

s.stack = [{ x: 90, w: 300 }];     // the base
s.cur   = { x: -300, w: 300 };     // the block sliding across the screen

Every frame the current block moves left or right and bounces at the edges. When you tap, you compare it with the top of the tower.

The core: intersecting two ranges

Dropping a block is just the overlap of two 1D ranges:

function drop() {
  var t = topBlock(), c = s.cur;
  var left = Math.max(t.x, c.x);
  var right = Math.min(t.x + t.w, c.x + c.w);
  var overlap = right - left;

  if (overlap <= 0) return gameOver();   // missed the tower completely

  // the part that hangs over the edge becomes a falling piece
  var cutX = c.x < t.x ? c.x : right;
  s.falls.push({ x: cutX, w: c.w - overlap, y: yOf(s.stack.length), vy: 0 });

  s.stack.push({ x: left, w: overlap });
  nextBlock();
}

That is the entire game logic. Everything else is about feel.

1. A "perfect" zone that forgives you

Pixel-perfect drops are almost impossible on a phone, so anything within 5 pixels counts as perfect. A perfect drop cuts nothing off:

if (Math.abs(c.x - t.x) <= 5) {
  s.combo++;
  var grow = s.combo >= 3 ? Math.min(12, 300 - t.w) : 0;   // reward streaks
  s.stack.push({ x: t.x - grow / 2, w: t.w + grow });
}

The grow line matters most. In most stacking games your tower only shrinks, so every run feels like a slow loss. Here, from the third perfect drop in a row, the block grows back a little. Suddenly a bad drop is something you can recover from, and that is what makes people tap "play again".

2. Sound that climbs with your combo

No audio files, just the Web Audio API. Each perfect drop plays a note one step higher than the last:

function tone(freq, dur) {
  var o = ac.createOscillator(), g = ac.createGain();
  o.type = 'triangle';
  o.frequency.value = freq;
  g.gain.setValueAtTime(0.22, ac.currentTime);
  g.gain.exponentialRampToValueAtTime(0.0001, ac.currentTime + dur);
  o.connect(g); g.connect(ac.destination);
  o.start(); o.stop(ac.currentTime + dur);
}

tone(440 * Math.pow(1.122, Math.min(combo, 14)), 0.18);   // roughly one whole tone per step

You hear your streak building before you look at the score. On a miss, a dull low note plays and the pitch resets. It costs about ten lines and changes the game a lot.

3. Juice: falling pieces, particles, a little shake

The piece you cut off keeps falling and rotating instead of disappearing.
A perfect drop throws white particles from the edges.
navigator.vibrate(15) gives a tiny buzz on phones that support it.
The camera eases upward as the tower grows, so you never see a hard jump.

None of this changes the rules, but without it the game felt dead in testing.

4. A restart bug I almost shipped

The first version had a nasty bug: the tap that ended the game also counted as a tap on the "play again" overlay, so a new run started instantly and players never saw their score. The fix was to keep the two states strictly apart:

function onTap() {
  if (!playing) { start(); return; }
  if (s.over) return;          // ignore taps while the game-over screen is up
  drop();
}

The overlay has its own handler that only restarts once the game is really over. Keyboard Space and Enter only restart when the overlay is visible.

5. It has to fit anywhere

The game is a single self-contained block of HTML, CSS and JS. No framework, no build step, no external requests. It runs inside a WordPress "Custom HTML" block. One tip if you ever do the same: WordPress can mangle && inside inline scripts, so the code uses ternaries instead. Annoying, but it works.

Try it and beat my score

Drop your best score in the comments. Anything over 50 is already good, and 100+ means your timing is seriously sharp.

Play Sky Stack →

If you like small browser games, there are a few more on the same site: a daily number puzzle with a Time Attack mode and a typing game with boss bugs.

How to Calculate Subnets by Hand: A Step-by-Step Guide

Arelvox — Sat, 24 Oct 2026 19:40:57 +0000

Originally published on Arelvox.

Knowing how to calculate subnets is one of the most useful networking skills you can learn. It comes up in certification exams, in home labs and whenever you plan a network for an office. The good news is that you do not need complex binary math. With one simple trick, you can find the network address, broadcast address and host range of any IPv4 address in under a minute.

In this guide you will learn how to calculate subnets by hand, step by step, with real examples. When you finish, you can check every answer with our free subnet calculator.

What You Need to Know First

Before you learn how to calculate subnets, you only need a few basic ideas. Every IPv4 address has 32 bits, split into four groups of 8 bits called octets. A subnet mask, or a prefix like /24, tells you how many of those bits belong to the network. The remaining bits identify individual devices, called hosts.

For example, in 192.168.1.10/24 the first 24 bits are the network part and the last 8 bits are the host part. If these ideas are new to you, first read our guide to IP addresses, routers and DNS, and then come back here.

Prefix	Subnet mask	Block size	Usable hosts
/24	255.255.255.0	256	254
/25	255.255.255.128	128	126
/26	255.255.255.192	64	62
/27	255.255.255.224	32	30
/28	255.255.255.240	16	14
/29	255.255.255.248	8	6
/30	255.255.255.252	4	2

The Magic Number Method

The fastest way to calculate subnets by hand is the magic number, also called the block size. Subnets always start at multiples of this number, so once you know it, everything else falls into place.

Find the interesting octet: the first octet of the mask that is not 255.
Calculate the magic number: 256 minus the mask value in that octet.
List the multiples of the magic number. The network address is the multiple that is equal to or just below your IP.
The broadcast address is the next multiple minus one.
The usable hosts are everything between the network and broadcast addresses.

Example 1: 192.168.10.75/26

Let us see how to calculate subnets with a common exam question. First, convert /26 into a mask: 255.255.255.192. The interesting octet is the fourth one, because it is the first that is not 255.

Magic number: 256 − 192 = 64.
Multiples of 64: 0, 64, 128, 192. Our IP ends in 75, so it sits between 64 and 128.
Network address: 192.168.10.64.
Broadcast address: 128 − 1 = 192.168.10.127.
Usable host range: 192.168.10.65 to 192.168.10.126, which is 62 hosts.

That is the whole calculation. As a result, you can solve most subnetting questions without writing a single binary number.

Example 2: 172.16.45.200/20

This second example shows how to calculate subnets when the interesting octet is not the last one. A /20 prefix gives the mask 255.255.240.0, so this time the interesting octet is the third.

Magic number: 256 − 240 = 16, applied to the third octet.
Multiples of 16: 0, 16, 32, 48. The third octet is 45, so it falls between 32 and 48.
Network address: 172.16.32.0.
Broadcast address: 172.16.47.255, because the fourth octet is all ones.
Usable hosts: 172.16.32.1 to 172.16.47.254, or 4,094 addresses.

Notice that the fourth octet is 0 for the network and 255 for the broadcast. This happens whenever the interesting octet is not the last one.

How to Split a Network into Subnets

Knowing how to calculate subnets also lets you do the opposite: take one network and divide it into smaller ones. To do that, you borrow host bits. Each borrowed bit doubles the number of subnets and halves their size.

For example, to split 192.168.1.0/24 into four subnets, you borrow 2 bits, because 2² = 4. The new prefix is /26, with a magic number of 64:

192.168.1.0/26     hosts .1   to .62
192.168.1.64/26    hosts .65  to .126
192.168.1.128/26   hosts .129 to .190
192.168.1.192/26   hosts .193 to .254

Similarly, if you start from the number of hosts you need, choose the smallest subnet that fits. Remember that you lose two addresses in every subnet, one for the network and one for the broadcast. For 50 devices you need a /26 (62 usable hosts), and for 500 devices you need a /23 (510 usable hosts).

Common Mistakes When You Calculate Subnets

Forgetting the two reserved addresses. A /26 has 64 addresses but only 62 usable hosts.
Using the wrong octet. Always apply the magic number to the first octet of the mask that is not 255.
Mixing up the broadcast address. It is the next network address minus one, not the next network itself.
Ignoring the special cases. A /31 is used for point-to-point links and has two usable addresses, as described in RFC 3021, while a /32 is a single host.

The best way to avoid these mistakes is practice. Pick random addresses, calculate the subnets by hand and then confirm your results with the subnet calculator. After ten or twenty examples, the method becomes automatic.

Practice Questions

Try these on your own before checking the answers with the calculator:

10.0.5.130/25: what is the network address?
192.168.50.17/28: what is the broadcast address?
172.20.100.9/22: how many usable hosts are there?

Answers: 10.0.5.128, 192.168.50.31 and 1,022 hosts. If you got all three right, you now know how to calculate subnets by hand. For the full background on CIDR prefixes, the Wikipedia article on subnetworks is a good next read.

FAQ: How to Calculate Subnets

What is the easiest way to calculate subnets?

The easiest way is the magic number method: subtract the interesting mask octet from 256 and list its multiples. The network address is the multiple at or below your IP, and the broadcast is the next multiple minus one.

How many hosts are in a /26 subnet?

A /26 subnet has 64 addresses and 62 usable hosts, because the network address and the broadcast address cannot be assigned to devices.

Do I need to know binary to calculate subnets?

No. Binary helps you understand why the method works, but for day-to-day subnetting and most exam questions the magic number method is faster and less error-prone.

Want to check your answers? Try the free IP subnet calculator on Arelvox.