Game of Life: Canvas, HTML table or SVG for making the board/grid?

Game of Life: Canvas, HTML table or SVG for making the board/grid?
0

#1

Hi everyone,

I am doing my research for the Game of Life challenge and before I start coding everything I’m thinking about my React Components and how to draw the board/grid. I am having a hard time to decide whether I should use HTML canvas, tables or SVG for it. Doing a lot of reading on Stackoverflow but can’t figure out what the pros and cons of each method are. Obviously we need to make the grid cells clickable and it should return which cell so we can do something with it, and most on the Internet discusses how to draw the table but not how to make it clickable.

Anyone can suggest me what I should use in Game of Life and why?


#2

hi chemok78,

now, i gotta be honest, i skipped this one, but i did the roque, and i think for the grid, its the same. So what i used there is just a nested array. then you can render different components / cells in each array field. you add the evenlistener and it should work!


#3

Canvas is the best for performance, easily. However, consider that this is a React project and React is all about maintaining and changing DOM elements effectively. So if you want a more React-y solution, I’d go with creating several DOM elements (a bunch of floated divs, which is what I did or a HTML table). Then you keep updating their states in your animation loop, and attach any controls and listeners you want.

Of course, this isn’t very perfomant and won’t work very well outside of Chrome and Firefox, but it’s the way to go if your goal is to learn React. Otherwise Canvas is the best option.


#4

I had the same question but I eventually stuck with HTML tables since I’m looking to minimize the amount of work I need to put into the project (and with that extra work being the learning process of learning canvas)


#5

Hi! I used SVG. Here’s my implementation:

http://www.rlabuonora.com/game-of-life/

It is somehow slow but works fine. I didn’t do a lot of reading beforehand. It was probably the most fun project I did for FCC.


#6

Great answer! Yes my goal is to learn React so probably just work with div’s or table.

By the way: why is Canvas much better for perfomance?


#7

This article probably explains why better than I could.

In short, with canvas you directly manage the drawing of pixels whereas the Dom is an abstraction that makes it easier for developers to represent and modify data. The abstraction means that there’s a ton of stuff going on and redrawing is costly especially if you have a ton to redraw. So Canvas is generally better for projects like this one or web games.

And if you need some proof/contrast check out this game of life made in canvas that has a ridiculous amount of cells:

And here’s mine with DOM and React:

The difference in performance and number of cells is huge.


#8

makes sense! that canvas example looks pretty awesome btw


#9

hi guys, stilll need to apply styling, but here is the working game:

I used tables eventually, it’s actually not that slow. Only a slight delay when you hit run.


#10

Your neighbor-finding algorithm isn’t quite right.


#11

It doesn’t seem to work correctly. Try a pattern of just 3 squares in a row horizontally. That should shift back and forth from horizontal to 3-in-row vertical to 3-in-row horizontal, forever. But yours does not do that.

It IS fast, though.


#12

thanks for checking, let me have a look!


#13

Ok i see! let me check, thanks for the feedback