DEV Community

Cover image for React: Programming Language Tower Defense Game
SeongKuk Han
SeongKuk Han

Posted on • Updated on

React: Programming Language Tower Defense Game

Preview

preview

PLAY!


There is only one page. The game will be starting immediately when you open the page. there are level 30 and there is no game over message, so if you reach level 31, it means you clear all stages.

There are not many languages yet. As a frontend engineer, I made towers more that related to frontend. Like there are towers that come from frontend frameworks such as React, Vue, Angular and Svelte.

Ultimate towers in the game are Rust, Go and Svelte.

Rust shoots the strongest bullet.
Go shoots the most number of bullets among all the towers in the same amount of time.
Svelte shoots the fastest bullet.

It can be changed in the future by maintaining the game.
Enjoy the game and leave a comment below letting me know how it was!

Pick a random tower and upgrade it! Survive until the last stage.


A few days ago, while I was watching random videos on Youtube and I came across game development videos. The videos reminded me of when I first started to code. I learned coding by making simple games what I wanted, not from books. I still remember when I learned how to execute code infinitely using while. I couldn't wait making my own game using it. After that I made a text-based game with variables, if and while. The game was super simple. I was happy about that I could play the game. I was only a player though.

Since I started to code as a job, I think I didn't have much time to code just for fun. I may have been pressured by thoughts I had to learn new skills and should not make nonsense project.

Watching the game development videos made me missing the moment and I decided to make a tower defense game using React.


I chose the canvas library Konva.js to render objects. I started to develop without much concerns, as a result I encountered a lot of problems. The followings were the problems I found.

Problems

  • When the tab is not active, some timers are stopped. I used setInterval to manipulate data. So, Stopping main logic is critical issues, and also, setInterval causes performance issues as well.
  • Project file structure, naming and variables look puzzled.
  • All main logic is in one place.
  • Responsive Design. On my MacBook Air, it looks fine but I'm not sure how it would look like on a bigger screen.

Besides these, there are more problems. But it was enough for me that I could play the game and could enjoy it. There were more things I wanted to develop like bullet patterns, skills and screens(game over, intro, rank). However, during the development, I realized that I started in a wrong way like using a lot of setInterval.

If I wanted to make it better, I needed to restart and learn some game development knowledge. Being able to play th game in my free time was why I started this project I wanted to finish it as soon as possible and wanted to play it. I think I achieved the goal. I'm enjoying playing the game.

I will keep maintaining the project from time to time. If you are interested in the project, you can contribute in the repository. Just play with the code, you don't need to make good code. Always welcome!

Thank you, happy coding!

Top comments (0)