Embed Size (px)
DESCRIPTION
A few slides outlining the game "Blank out the squares", designed to use the element. A puzzle made of 5x5 squares, the aim to remove all the squares by continuous selecting a coloured group containing two or more adjacent squares. Once selected, if a column or more is becomes blank, the squares to the left of the empty column(s) shift to the right to fill the gap. A "find solutions" button is given to show how to solve a challenging puzzle. When a new puzzle is created by randomly populating the 5x5 field, it will try to solve it to ensure it is a solvable puzzle; if none can be found, it will repeat until the user has a solvable puzzle. Of course not all puzzles are of the same difficulty, so the user should find the game entertaining. NB. only tested on a PC running chrome.
Citation preview
Blank the Squares
A Game by Alex Beston for HTML 5
alexbestongmailcom
Aim of the Game
To remove all the colored squares
from the screen
Solving the game
The user picks squares with two or more
adjacent squares of the same colour
User selects these 4 grey squares
Solving the game
Grey squares are removed and
yellow drops down
Solving the game
Game continues as the number
of squares diminish
Solving the game
An empty column will cause the squares to
the left of the column to shunt to the right
User loses if
Back to the position
Black ldquoTrdquo selected
User loses if
Can go wrong here
Red group selected
User loses if
Game cannot complete
Another way to lose
Choose a yellow instead
Unsolvable
But it still cant be solved from here
Solving the game
Back to the start
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Aim of the Game
To remove all the colored squares
from the screen
Solving the game
The user picks squares with two or more
adjacent squares of the same colour
User selects these 4 grey squares
Solving the game
Grey squares are removed and
yellow drops down
Solving the game
Game continues as the number
of squares diminish
Solving the game
An empty column will cause the squares to
the left of the column to shunt to the right
User loses if
Back to the position
Black ldquoTrdquo selected
User loses if
Can go wrong here
Red group selected
User loses if
Game cannot complete
Another way to lose
Choose a yellow instead
Unsolvable
But it still cant be solved from here
Solving the game
Back to the start
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Solving the game
The user picks squares with two or more
adjacent squares of the same colour
User selects these 4 grey squares
Solving the game
Grey squares are removed and
yellow drops down
Solving the game
Game continues as the number
of squares diminish
Solving the game
An empty column will cause the squares to
the left of the column to shunt to the right
User loses if
Back to the position
Black ldquoTrdquo selected
User loses if
Can go wrong here
Red group selected
User loses if
Game cannot complete
Another way to lose
Choose a yellow instead
Unsolvable
But it still cant be solved from here
Solving the game
Back to the start
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Solving the game
Grey squares are removed and
yellow drops down
Solving the game
Game continues as the number
of squares diminish
Solving the game
An empty column will cause the squares to
the left of the column to shunt to the right
User loses if
Back to the position
Black ldquoTrdquo selected
User loses if
Can go wrong here
Red group selected
User loses if
Game cannot complete
Another way to lose
Choose a yellow instead
Unsolvable
But it still cant be solved from here
Solving the game
Back to the start
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Solving the game
Game continues as the number
of squares diminish
Solving the game
An empty column will cause the squares to
the left of the column to shunt to the right
User loses if
Back to the position
Black ldquoTrdquo selected
User loses if
Can go wrong here
Red group selected
User loses if
Game cannot complete
Another way to lose
Choose a yellow instead
Unsolvable
But it still cant be solved from here
Solving the game
Back to the start
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Solving the game
An empty column will cause the squares to
the left of the column to shunt to the right
User loses if
Back to the position
Black ldquoTrdquo selected
User loses if
Can go wrong here
Red group selected
User loses if
Game cannot complete
Another way to lose
Choose a yellow instead
Unsolvable
But it still cant be solved from here
Solving the game
Back to the start
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
User loses if
Back to the position
Black ldquoTrdquo selected
User loses if
Can go wrong here
Red group selected
User loses if
Game cannot complete
Another way to lose
Choose a yellow instead
Unsolvable
But it still cant be solved from here
Solving the game
Back to the start
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
User loses if
Can go wrong here
Red group selected
User loses if
Game cannot complete
Another way to lose
Choose a yellow instead
Unsolvable
But it still cant be solved from here
Solving the game
Back to the start
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
User loses if
Game cannot complete
Another way to lose
Choose a yellow instead
Unsolvable
But it still cant be solved from here
Solving the game
Back to the start
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Another way to lose
Choose a yellow instead
Unsolvable
But it still cant be solved from here
Solving the game
Back to the start
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Unsolvable
But it still cant be solved from here
Solving the game
Back to the start
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Solving the game
Back to the start
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Happy Conclusion
After a series of correct moveshellip
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Starting a game
The game attempts to generate a solvable
configuration ndash can take several iterations
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Starting a game
hellip until there is a solvable arrangement
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Ive given up Show me how to
do it
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
[demo game]
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Down sides
Finding a solution can take time hellip
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Downsides
Too many unsolvable games generated
ndash User has to wait to start a game amp
game play suffers
Better to have a text-file of solvable games
Bonus ndash can be sorted from easy to hard
Animation of the squares
Graphics
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Up sides
Good as a mental exercise
Some addictive quality ndash possibly
commercial
Perfect for handhelds
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Up sides
All client code so strain on the server is
negligible
Demonstrates ltcanvasgt element
Shows that Flash isnt always necessary
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Utilising the ltcanvasgt element
Some essential code
ltcanvas width=400 height=300gtltcanvasgt
var canvas = documentgetElementById(canvas)
if (canvasgetContext) hellip
var ctx = canvasgetContext(2d)
ctxfillRect(x y sqWidth sqWidth)
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Developing the game
Grab a copy of the game at
httpscodegooglecompblank-it
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
Thanks for listening
Play the game at
httpberginbyethost18comsquareshtml
