alexandria/match-three-game

This is a match three game made with javascript, css, and html. The goal of this project is to provide a low pressure / low stress environment for anyone who is wanting to get into open source code for the first time.

Match Three Game 🍭

This is a candy crush clone game created with the purpose of me sharpening my javascript and css skills.

The base of this repo stimmed from this youtube tutorial!

Change Log

---

HOW TO PLAY

• Start the game by pushing the play button.
• You have 60 seconds to complete the game.
• Drag and drop the candies to match them.
• Can only drag and drop to right, left, top and bottom.
• Match at least 3 candies in a row or column to score.
• Create combos by matching more than 3 candies.
• Click the timer box to stop it from bouncing.

Play it here!

---

Run it locally

• Clone this repository
• Open index.html file in your prefered browser - either by double-click the file in explorer or by drag & drop the file into the browser's search field.

---

Run ESlint

• Install Node.js

• Install dependencies

npm install

• Run eslint on scripts folder

npm run eslint

Some rules will be auto-fixed, others will be logged so developer can fix them manually.

---

Where I am at now 🍬

• Basic drag and drop functionality
• Rows are being replaced when matched
• Score keeping
• 5+ row and column matching
• Styled background
• Simple animation when candy disappears
• Github pages
• Implement a time limit
• Have a "Start" and Restart Button
• Fix bug that crashes game at the bottom right candy

Future Features 🧁

• Update background image
• More cohesive color pallet

Art and Assets Credit

• Halloween Theme candy silverwavetidaldragon

This project is licensed under the terms of the MIT license.

match-three-game's Issues

Make game window responsive

This game is not responsive at all. Ideally I would like to see the game resize based on the window size

.

No cursor pointer when hovering over the play button or hovering over the candies

Describe the bug
Whenever I'm hovering over the play button and hovering over the candies, I don't feel like the button is clickable or the candies are draggable.

Expected behavior
There should be cursor pointer on the play button and the cursor pointer should also be there when hovering over the candy to get the feel that the button is clickable and that the candies are draggable.

Bug: Candy can move without outcome of three of a kind

Move item validation logic is wrong.

Matching bug/ exploit

When dropping a candy to a section that is not adjacent but in a spot on the board that would be a match, the match is scored before the candy is sent back to its original spot.

Linter

We need some basic javascript linter rules set up.

Feature request: Change title of game

Is your feature request related to a problem? Please describe.
When running the game, the title "Candy Crush" displays as the name of the game in the browser. This feature request is to address the issue that our version is not the same as the game it stemmed from.

Describe the solution you'd like
Rename the page in the markup with a title approved by the owner of the repo.

Additional context
Issue referenced in PR #54

Update the README with instructions how to run this game locally

Update the README with instructions how to run this game locally

candy pieces are sticky when they should be movable

Describe the bug

This happens more in the lower right area of the board: When playing the game with the timer running, etc., I can only slide a candy in the direction that creates a match of three. The user should be able to make a wrong move.

To Reproduce
Steps to reproduce the behavior:

1. Click on the start button.
2. When playing the game, try to click, hold and drag a candy to where is does not align three matching candies in a row.
3. Notice how it feels like your mouse is stuck, or the candy doesn't move.
4. This occurs more often on the right side of the board.

Expected behavior
The user can make a disadvantageous move by dragging a candy to a space where it does not add to the score.

Users starts off with points

When the game first loads points are award even if the user has not matched anything.

Use Husky to run eslint script when commiting

Is your feature request related to a problem? Please describe.

We are configuring ESlint as a code linter for this project in #41.

But currently, developers need to remember to run manually the eslint package.json command to apply the rules.

Describe the solution you'd like

After changes from the mentioned issue are merged, it would be useful to use husky or similar to create a pre-commit hook in order to automatically run the script when a maintainer is committing.

That way, formatting rules will be automatically fixed and if there's any lint error that needs to be corrected, the commit will be not accepted and the developer will see a log explaining what needs to be fixed.

Accessibility

There really is no accessibility considerations on this project. It would be nice to hover over each candy and have a screen reader read the color and shape. Im not sure if this is possible but at the very least it would be worth looking into.

Link from CONTRIBUTING.md goes to incorrect page

The Bug:

On CONTRIBUTING.md, in the Final notes section, the link named issue takes the user to the actual game, not the Issues page.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'CONTRIBUTING.md'
2. Scroll down to 'Final notes'
3. Click on 'issue' link
4. The user goes to the page where they can play the game.

Expected behavior
The user goes to the Issues list.

Would love to have an update in the README with instructions on how to play.

Show a replay prompt when the game ended.

Right now the game just ends when the timer runs out.
Lets get a prompt that pops up when the game is over so that the player can just click "replay" ( or something similar ) and the game will start over.

README needs to be updated.

We need an updated gif in the readme that represents where the game is currently at.

Complete community profile checklist

Add the following items to community profile:

1. Code of conduct
2. Issue template
3. PR template

Update CONTRIBUTOR file to give resources on how to create a PR

With this project being beginner friendly I want to make sure there are more resources in CONTRIBUTOR file to remove as much barriers as possible.

Not looking for a full step by step guide here, but a link to a good source that will walk people through it would be great.

Halloween theme, candy corn (Can close issue?- See issue #28)

The game seriously lacks Halloween UX. The challenge is to create your own assets for the candies and add incorporate them in the game.

Save Highscore in local storage on browser

I think it would be pretty cool to have the player's highest score saved in local storage in browser and then have that high score display on the scoreboard. This way the player would have a goal to beat!

Stop the timer box from bouncing when you click start

Currently, when the timer runs out, the green timer box will start bouncing. Clicking the green timer box will reset it, but clicking on the start button doesn't. I can work on a fix for this if you want.

Timer is inconsistent if start button is clicked while game is playing.

Describe the bug
The timer is inconsistent if the start button is clicked while the game is playing.

To Reproduce
Steps to reproduce the behavior:

1. Start a game
2. Wait a few second
3. Try to click the start button

Actual Result
two-timer is displayed together.

Expected behavior
The only new timer is displayed.

Tests!

So this repo has an extreme lack of tests. Simple unit tests would be great for starters.

Update CONTRIBUTING.md with documentation on Git best practices

It would be helpful to have a few essential Git commands and examples for beginners.

Need improvement improvement in PR guide

What doc(s) needs to be updated or corrected?

• README
• CONTRIBUTING
• CODE_OF_CONDUCT
• Other, please specify

Give a description of your update or correction

PR guide improvement: There should be proper PR request guide, as this repository is also for beginner friendly contributors, so to make successful PR, PR request guide should be improved with proper steps explanation like how to start and how to create successful PR.

Feature request : pause on page blur

Is your feature request related to a problem? Please describe.
There is currently no way to pause the game if the user needs to switch tab to work on something else mid game. When the user comes back to the game tab, the game is usually over.

Describe the solution you'd like
Game should pause on page blur and automatically resume on focus, allowing the user to switch tabs and not lose their progress.

Feature request: Color palette, fonts, and icons theming considerations

title: Update CONTRIBUTING.md with theming considerations
about: Please add more cohesive theming through seasonal colors, fonts and icons. Colors and fonts should be completed before icons due to accessibility.
title: 'Halloween Zombie Candy Crush' game
labels: hacktoberfest, css, experience design

The feature request is related to a desire for novelty, not a solution for the function of the game.
The modification would add charm.

Description
Find a Halloween color palette and provide hex codes as well as a screen shot;
Where appropriate select a thematic font;
Size candy icons to the correct dimensions to function in the game, as per accessibility.

Handle sonarLint issues