This is about the project to learn dart in a group while developing games or other projects.
a) Memory game
This game is about finding matching identical images. You have 8 different images. In a 4x4 (16 fields) matrix every and each image will be doubled (8x2=16). The goal is to find the matching identical images which are hidden.
Not much of dart code but it's an easy starter und we will need canvas.
for the canvas beginners:
And here you can see some real dart + canvas code. It goes up to Spiral 13.
I am still reading about canvas, but
would this be a good approach to create the memory game?
Memorygame has 8 different images. Therefore we need a 4x4 grid (16 fields = 8 images each doubled)
Since there is no real implemented grid in cavas we create a 800px * 800px canvas.
We draw 5 horizontal and 5 vertical lines. We can now see 1 big box with 16 smaller "boxes" each 200px * 200px.
But canvas doesn't know anything about those boxes. There are no REAL boxes or rectangles yet.
Canvas knows only about onMouseDown (the position of mousecourser).
Therefore we create a class Box and create 16 Box objects. Every of those objects would be assigned
to draw a rectangle in one of the 16 grid boxes.
1-2-3-4
5-6-7-8
9-10-11-12
13-14-15-16
(origin X, origin Y, width, height)
The first object would draw its rectangle at 0,0,200,200
The second object would draw its rectangle at 200,0,200,200
The 16th object would draw its rectangle at 600,600,200,200
Hmm actually we do not need those 5 horizontal and vertical lines, now we have the real rectangles "boxes".
Every box object needs an imageElement and id. To find identical images we would check for identical ids of the box objects.
I think the images and ids should be assigned on the creation of the box objects. So how do we assign to each object an image
but track that the same image(also the same id of a box) can only be assigned to 2 boxes? How do we randomize the position/appearence of images within the canvas?
How to display an image for a clicked box?
There should always be a pair of clicks.
The first click on one of the boxes would display the first image that is assigned to to that area of canvas
x=300, y=100 would be the second box. So display image of box2, keep the image visible.
The second click should display the second image. Now we see both images displayed for 2 sec.
We check if the box ids are identical ( would mean identical images).
Where do we save lastClick(firstClick) and actualClick(secondClick)?
If images identical, keep them visible and flag both boxes to not react on any onMouseDown for them.
Clear the pair of clicks.
If images not identical show the original rectangles of the objects, clear the pair of clicks.
Keep on playing.
Those are just my first thoughts. It is meant to kick off the discussion. Everything is open to be changed if someone has a
better idea. Do not be shy :)