Array Match is an educational puzzle game utilizing arrays and Javascript array methods. Players will manipulate a given board (2D Array) in order to solve puzzles by combining cards that include numbers and array methods. There are two types of cards which a player may use:
- Method Cards (ie. push, unshift, etc.)
- Argument Cards (ie. 1, 2, 3, etc.)
By combining method and argument cards, a player will be able to manipulate the board and their hand. Combining a method and argument card will cause the method to execute with the argument card passed in. Cards like pop and shift will allow players to keep the card that was removed from the board, creating a more unique and complicated layer to later levels.
In Array Match, players will be able to:
- Combine method and argument cards to manipulate the board and solve puzzles.
By adding an event listener to the canvas object, the user can select cards based on mouse position upon click by checking whether the mouse position is within a card's coordinates.
canvas.addEventListener('click', function (event) {
let pos = grabMousePosition(canvas, event);
cards.paramCards.forEach((card) => {
if (isInCard(pos, card)) {
selectCard(card);
}
});
cards.funcCards.forEach((card) => {
if (isInCard(pos, card)) {
selectCard(card);
}
});
}, false);
-
Restart any level in which the player made a mistake.
-
Select any level.
-
View instructions for cards.
-
Keep their current level upon closing the browser, or refreshing the page.
By utilizing Window.localStorage, progress is saved as a key in the browser so the user may pick back up at any level they left off upon leaving the page or refreshing the browser.
function getCurrentLevel() {
switch (localStorage['currentLevel']) {
case 'tutorial':
return levels.tutorial;
}
}
In addition, this project will include:
- An instructions guide on how to play the game.
- A production README.
- Nav Links will link to Github repo and LinkedIn.
- Players will be able click cards to select them
- Players will be able to navigate through levels with Level Select.
- A player may restart a level at any time.
- Canvas API to render the game board and hand.
- Webpack and Babel to bundle and transpile code.
- npm to manage project dependancies.
- Labor Day Weekend: Code out HTML and CSS elements.
- Monday: Create board and card logic.
- Tuesday: Implement and design levels.
- Wednesday: Complete implementation of user controls, and interface design. Squash bugs.
- Thursday: Deploy to Github pages, and rewrite proposal as production README.
- Additional bonus levels.
- Additional animations and sound effects.