Creating a 3D Tetris Game for Dummies Like Me — I

5 min readJun 25, 2023

--

TL;DR: live demo or the advanced game + some shameless advertising wrapper.
Level: for beginners.
See detailed links and table of contents at the bottom of the article.

A series of articles on how to create Web-GL based Tetris with gradual improvement in functionality, from zero to gameplay. For beginners who have no experience with ThreeJS but want to get started.

Once after a long day at work filled with corporate frontend, I felt something very strange. It was a burnout.

Of course, I tried to install the latest version of burnout from NPM, but it looks like the author abandoned the project. The latest comment were “try an alcohol”, “dating helps” and even “switch to a healthy life” which sounds like nonsense.

What the, emmm, hell, I’ve thought but with a different wording. I’m a professional, I’ve been in business for decades, I know that I just need to play some computer game full of violence, rude jokes and naked beauties.

But it’s so boring… I rarely play any games other than CS:GO (when sober) and Kingdom Rush (when not). I have dozens of titles on Steam that are marked “last game 3 years ago, played 2 minutes”.

So I decided to fight fire with fire and try my hand at GameDev. I heard burnouts are very common there and that guys know how to deal with them.

Let’s create a game. Let’s do it with Javascript (Typescript) and make it work in the browser because I want to take a rest, not experience new stress. There are more than enough new technologies and frameworks in my work.

Let’s do it in 3D because I’ve been wanting to try 3D in the browser for years but in fintech you rarely have a chance to do any other 3D than a 3D secure.

Let’s do something simple, because I don’t want to spend more than a couple of days (ok, this was very naïve, even with all my experience of planning and then multiplying timings by Pi).

Let’s go back to the good old days with drive and fire.

It doesn’t leave too many choices. AAA titles only: Arkanoid, Tetris, Pacman, Mario… and using science-based random number generator, you probably know it by the acronym DICE, we have a winner: Tetris.

Credits: https://en.wikipedia.org/wiki/Tetris

And to add a little more meaning to this journey, let’s write an article(s) for Medium. Of course, given that this will be my very first game, and even more than first 3D game, the value of the articles will be a more than a little questionable, but who cares? I want to have fun.

To feel free and dangerous, let’s use wild JS. No boring Webpack (sorry pal), no solid Angular (no apologies), no CSS frameworks, no CI/CD (well, almost) and no unit tests. Especially no unit tests. What a guilty pleasure. Of course, I must write unit tests, but c’mon, it’s a crunch — I found this term on the internet and I think it means “a normal situation at the end of a sprint”, or “FUBAR” in the army. Anyway, I like the way it sounds. Crunch, huh.

I will use:

Svelte. Technically any reactive framework will be good enough because we will have very little logic to handle on “wrapping” , but Svelte has the best balance of overhead and simplicity. But we just need components and modularity so feel free to use React or Vanilla or whatever.
Vite. It fast and balanced. I would use esbuild but Vite + Svelte have a good relationship and I don’t want to ruin it. And both end in -te.
Typescript. Just add a little professionalism because otherwise it will be too lamerish, and I’m an architect, in the end.

And the first question: what will I use for 3D? Pure WebGL? No, because the fun will die before the burnout starts, and I already have enough burnout without fun at work.

I’ll save your time and just answer: ThreeJS. It’s simple, impressive, has a long, long history and a community with tons of stupid questions answered. Very useful option.

Let’s start. We will follow this useful article.

Create new project. Let it be ‘tetris-3d’ — use npm create vite@latest:

Select corresponding options during scaffolding the project

2. Check it. Follow the instructions:

cd tetris-3d
npm install
npm run dev

3. Open browser with the address displayed, and voilá:

4. Let’s remove all unnecessary crap. Delete folders assets , libs and change the content of App.svelte:

<script lang="ts">
  // nothing yet here
</script>

<main>Hello World!</main>

<style>
    /* nothing yet here */
</style>

5. Change app.css:

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  justify-content: center;
  min-width: 320px;
  min-height: 100vh;
  background-color: #183f3e;
  color: #eee;
}

An empty project ready to be filled with something useful

So, the result of the first article: a Svelte + Vite + Typescript empty project that runs and displays the page in the browser powered by Svetle.

Here is the GitHub repository with a snapshot of the stage.

To be continued… This is the shortest part, get ready for long reads.

All the parts on Medium:

Relevant parts on GitHub:

Creating a 3D Tetris Game for Dummies Like Me — I

Written by Oleksii Koshkin