Homework answers / question archive / CSC106 Assignment Overview In this assignment, you will modify a memory game using Khan Academy Part I: Programming a Memory Game In this part of the assignment, you will use the advanced Javascript programming concepts and skills you learned to modify the memory game to: * have more tiles to match, * change the tile color when the user hovers over it, * use a timer, * have a splash screen with instructions, your bitmoji, and a start button

CSC106 Assignment Overview In this assignment, you will modify a memory game using Khan Academy Part I: Programming a Memory Game In this part of the assignment, you will use the advanced Javascript programming concepts and skills you learned to modify the memory game to: * have more tiles to match, * change the tile color when the user hovers over it, * use a timer, * have a splash screen with instructions, your bitmoji, and a start button

Computer Science

Share With

---

CSC106 Assignment

Overview

In this assignment, you will modify a memory game using Khan Academy

Part I: Programming a Memory Game

In this part of the assignment, you will use the advanced Javascript programming concepts and skills you learned to modify the memory game to:

* have more tiles to match,

* change the tile color when the user hovers over it,

* use a timer,

* have a splash screen with instructions, your bitmoji, and a start button.

Important Note: For the remainder of the semester, all original programs, including the one listed below, will award you points for use of style that consist of:

• Comments
• Indenting and white space
• Camel case names for variables, functions and parameters
• Descriptive names for variables, functions and parameters
• Use of functions to break code up
• Minimal use of global variables (i.e., instead using function parameters and local variables)

A. Programming A Memory Game

• Create a Khan Academy Javascript program by clicking here and copy/paste ALL of the completed code from the Memory Game code (i.e., scroll down to the end of the article to get all the code in the text box on the left side of the scroller game). Make sure you are logged into your Khan Academy account and regularly save your work!
• Write a program that modifies the memory game to have more tiles to match, change the tile color when the user hovers over it, use a timer, and have a splash screen with instructions, your bitmoji, and a start button. You should modify the

Memory Game code to do the following:

 

• Have 24 tiles and sets of four images that the player must match. The image below shows a match of four as an example.
• When the user's mouse is over a tile, the tile will change color. Note that this does not require a click from the user. Rather, it will change color simply by the user hovering over a tile.

 

• Show a timer that gives the number of seconds since the game was started. The timer must stop when all matches have been made.

 

• Change the images from those provided in the Memory Game code tutorial to other Khan Academy images

 

• Your game must have a splash screen with the following:

 

•  A title of the program: “JP’s Matching Game”

 

• Your name: “John Panizza’”

 

• Instructions on how to play the game: to be determined by writer

 

• Your bitmoji: Code provided on Khan account already

 

• A Start button that is an instance of the Khan button class, and starts your timer when it switches to the game screen.

• GradingRubric:

Assignment 9: Javascript Memory Game
	Earned Points	Possible Points
Part II: Programming A Memory Game
Memory Game program has 24 total tiles.	0	5
Images are changed from the original game.	0	5
Matches are made of 4 tiles.	0	5
Tiles change background color when hovering over them.	0	5
Timer shows number of seconds since game was started.	0	5
Timer stops when all matches have been made.	0	5
Fully playable to the standard of the example.	0	10
Splash scene has all required components (title, author, instructions, bitmoji and start button).	0	5
Game scene has all required components (timer, tiles with images).	0	5
Part II: Coding Style
Code has sufficient in-line documentation that aids a 3rd-party reader, and code is highly maintainable.	0		5
Program is fully intended in all nested code blocks, and whitespace is used where it is appropriate to improve Pods code readability.	0		5
Good naming of variables and functions, and camelCase is used for all identifers.	0		5
Used function(s) to break up logically reusable code.	0		5
Global variables are used only when data Is needed in the global scope; otherwise parameters and/or local Pods scope variables are utilized.	0		5
Part III: Reflection - Code Explanation
sufficiently added comments in code