For this assignment you will use JavaScript to create a game of Concentration. The
figures below show the game progression. Your styling and images will be different, of course.
Figure 1: Instructions displayed when page loadsFigure 2: Start of Concentration GameFigure 3: After several turnsFigure 4: End of game
Be sure to read the specific requirements, as some are not
obvious just by looking at the figures.
Hints
Our main goal with this program is to get used to basic JS syntax and
to be comfortable dealing with JS events. The following hints may be helpful:
The layout has similarities to dashboard in Unit 2 (I reused
or slightly tweaked some of my styles)
I tested game logic with all cards showing, as it's much easier to
select/not select a match and test conditions like end of game.
See "Ease of grading" requirements, you will need to enable
the grader to run your program this way.
I also tested the layout first by hardcoding prize images etc. It
was much easier to get flex options and other formatting correct
this way.
I suggest you Google to find a shuffle algorithm. Be sure to cite
the url in your code source (always important to give credit!)
I considered using JavaScript Images, but concluded it was easier to
just create a string with
<img src=...> text that could be used for innerHTML. You may, of course,
do this any way you see fit.
Students who are already familiar with JS (e.g., if you took CSCI-445) may complete this
assignment fairly quickly. We'll be getting into material that should be new to everyone soon!
