Wednesday, October 31, 2012

Resizing the HTML5 Canvas for different screen sizes

I've been doing some testing with the html5 canvas to fit it to different screen sizes. My idea is to apply responsive design techniques to the canvas,  so that  for game design, for instance, it looks good on any device screen size.

I thought I'd post some demos here. If anyone wants to grab the code, just right-click and view source: Remember to adjust your window size and see what happens.

www.flashbynight.com/demos/resizeme.html   -   resizes canvas to fit 80% of the screen width and height, displays height and width of canvas

www.flashbynight.com/demos/resizeme2.html   -   detects and displays whether canvas is square, portrait or landscape shaped

www.flashbynight.com/demos/resizeme3.html   -   removes and resizes three elements on the canvas according to screen size

Friday, October 12, 2012

Codebreaker

Announcing a great new word game on FlashByNight.com.

In the game Codebreaker, your task is to solve a phrase by decoding the letters. You start with three clues and you get three extra clues. In later rounds, the number of clues given decreases.

You'll need to think carefully and use your clues strategically to solve the puzzle - especially in the later rounds.

You can play Codebreaker here:

www.flashbynight.com/codebreaker

Screenshots: