TypeScript GameDev Tutorial – Create an Arkanoid Game

Wordpress sites

Learn how to build a game with vanilla Typescript. Build the classic Arkanoid game with types, classes, modules and modern code in Typescript. Use modules thanks to Parcel that bundles and builds the code.

💻 Starter files and finished project:

✏️ Course developed by Thomas Weibenfalk. Check out his channel:

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

24 thoughts on “TypeScript GameDev Tutorial – Create an Arkanoid Game”

  1. Nathan Franck

    Don’t sleep on Typescript’s advanced typing! If you ever start painting yourself into corners with a really constrictive OOP design you can start just feeding advanced types through functions and code more procedurally while still keeping your code reusable. Typescripts class system is a gateway but advanced types are where all the Typescript magic happens 🤩

  2. Thank you for a good tutorial. As far as I can say the ball speed and paddle speed will be heavily dependent on your PC specs, as the gameLoop is not taking in consideration amount of time passed between frames. Is there a way to fix that?

    1. i think on the game loop you could calculate a time delta. Then you could use that value to move the ball and paddle by the correct amount

  3. I think maybe that font was a bad choice .. maybe you are used to read cursive, but for sure less readable for others.

  4. Jorge Liévano

    I enjoyed the tutorial but I had a TON of issues trying to serve the application. Parcel kept throwing me errors constantly. I even had to look into the issue it was throwing at me and had to install another dependency called flow-typed which got rid of my initial errors but in the end just got other ones.

  5. Melle de Vries

    I got an error in the browser’s console when running index.html.
    I tried downloading the finished version off GitHub and running that, but I got the same error still:
    _Refused to execute script from ‘http://localhost:63342/arkanoid-ts-finished/src/index.ts’ because its MIME type (‘video/mp2t’) is not executable, and strict MIME type checking is enabled._

    Does anybody know why it won’t work for me?

    1. Paola Zuthiel

      I did 2 things:

      1) at index.html :

      2) inside your project run it with node like:
      npm run start

      What i understood is that this game is using parcel, which is used in the package.json.
      After those 2 steps i could see the bricks, i hope this will help someone in the future as well.

  6. Importing staff manually looks so weird to me. TS can do it automatically, that is one of the reasons why I prefer using it.

  7. this was really nice. But i think there is a problem with the collision detection. When we hit a brick from the sides shouldn’t we change the xDirection, not the yDirection?

  8. 50:44 … Why are we using a reduce function if the whole point is just to filter out the zeroes? Coulnd’t we just filter out the zeroes and then use map on the zero-less LEVEL variable?

  9. I tried but way too many problems when setting up the project, thank you anyway for your time hopefully i will come back to this

Comments are closed.