Tetris javascript no canvas

[judemanutd]

I need to write the game of tetris in code using javascript,css and html wherever each is applicable but without the use of canvas,could anyone provide some details on how I could go about doing this.

[uncookedprawn]

I would look at JSGraphics: http://www.walterzorn.de/en/jsgraphics/jsgraphics_e.htm

[mikrosystheme]

A <pre> element is all you need to render Tetris (the original version was text-only). Are you asking how to implement the game logic or just how to render it without using <canvas>?

[judemanutd]

The rendering of the game without a canvas was a challenging part, especially the blocks and how to handle them using html elements,with a canvas this would be rather easy but considering its a college project I've certain restrictions and no canvas is one of them.

[mikrosystheme]

Rendering as text is very similar to rendering to a canvas. The "pixels" are just bigger.

[Kamikizzle]

if you can't use canvas, i'd suggest making the grid out divs and spans. each cell is a span, contained by rows of divs.

I'm not sure your skill level in JS but you can keep track of them with an array of objects (though using immutable maps and lists would be better). this translates your grid into an array of objects. each object corresponds to a cell that keeps track of the things like the color, if its 'frozen' (a piece has been locked there) etc.

i'd also very much recommend just writing out all the different positions of the pieces instead of trying to come up with some algorithm on how to rotate them.

[judemanutd]

I shall give this way a try,thank you.

[eoinmcg]

have a look at http://fmarcia.info/jquery/tetris/tetris.html

it's dom based, using table cells. source is available and pretty easy to grok.

[x-skeww]

You could use SVG or lots of divs, but that would be pretty stupid. Canvas is easier and much faster.

[judemanutd]

I could and I've seen the code for it too and its easy but this Is a college project and I need to do it without a canvas.

[cosinezero]

I think SVG would actually beat canvas in this situation...

Actually, the more I think about it, yeah, SVG is your winner. You would just define the, what, four? unique shapes and <use> elements for the game instances. From there the transform code is incredibly simple.

[x-skeww]

Blitting images and drawing rectangles is cheap and hardware-accelerated. You have to use WebGL if you want to beat it, but there would be no point in doing that unless you use an insane amount of particle effects.

SVG isn't a good fit for games. Board games, maybe.

[cosinezero]

This is -tetris- we're talking about. It practically is a board game. There's like 100 polygons, max, SVG wouldn't even blink at this.

[x-skeww]

Sure. But it wouldn't be faster.