TypeScript GameDev Tutorial – Create an Arkanoid Game



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: https://github.com/weibenfalk/typescript-arkanoid

✏️ Course developed by Thomas Weibenfalk. Check out his channel: https://www.youtube.com/channel/UCnnnWy4UTYN258FfVGeXBbg

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 29 Comments

  1. Yoh

    Niceeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

  2. Saeed Al-husny

    Is Software Develope equal Software engineer? Anyone who sees this please help me to get it

    You recommend someone to go as Software developer over Mechanics engineer?

  3. Cyril

    Pls more projects on js/ts stack!! Thx a lot

  4. Coding Nuggets

    Hey, hey! It's Thomas back again. Always love to see you around. See you soon!

  5. JDBackstory

    Nice tutorial! Subscribed to your channel. Thanks!

  6. weeb

    @22:30 I think it's better to call that method argument a sprite instead of a brick.

  7. 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 🤩

  8. Artem V

    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?

  9. alekmoth

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

  10. alekmoth

    Is this a tutorial or a "copy my code from top to bottom in the most inconvenient way possible" ?

  11. 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.

  12. Nancy Porter

    This is ahhhhmazing!!!! Now how can I add fire to my paddle and more levels?

  13. 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?

  14. Pavlo Grydzhuk

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

  15. Ramin

    I download all file from Github but it does not working what is the problem ?

  16. dawntay121

    Which extensions are you using for the fonts? The fonts are beautiful

  17. Luis Pato

    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?

  18. Sebastian Dix

    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?

  19. Sumit Wadhwa

    Could be much better. Not much explanation around different calculations. felt like copy-paste. but thanks for sharing.

Leave a Reply