Drop7 Clone

Drop7 Clone is a web clone of the smartphone puzzle game Drop7.

The game area is made of a 7-by-7 grid where each cell is either empty or occupied by a disc. Each turn the player gets a new disc to drop into one of the seven columns. The discs can be either numbered (from 1 to 7) or solid.

A numbered disc will explode when its number matches the number of consecutive discs (connected to himself) either on its column or its raw. When exploding, a numbered disc will crack every solid disc nearby. Solid discs reveal a numbered disc when cracked twice.

After 30 drops, a new level is reached, spawning a new row of solid discs from below, pushing the existing discs up. When either the discs overflow the top row or the grid is full of discs, the game is over.

At each disc explosion, the player gets a number of points that increase as the explosion chain (i.e. the explosions combo) gets higher. When a new level is reached, the player gets a bonus of 7'000 points and if the grid gets clearead 70'000 points.

Apart from the classic game mode, the game is available in:

  • blitz mode: a new level is reached after every 5 drops (and awards 17'000 points for each new level) but let the player is given only numbered discs to drop;
  • sequence mode: always spawns the same sequence of discs.

Controls

The game is controlled through keyboard.

To control the disc, use A/D (left/right arrow keys) to move it sideways and S (down arrow key) to drop it.

To move through menus, use W/S (up/down arrow keys) to move through the options and spacebar/enter to select.

Hitting the ESC key will prompt the pause menu, where music and sound effects can be toggled and, if in the middle of a game, the current game can be restarted or quit.

Technologies

Drop7 Clone has been developed using HTML5 and Javascript.

Credits

All the rights over the original Drop7 games belongs to Zynga Inc.

The music is the track Retroland Recital by TeknoAXE.

The ding sound is a modification of the Ding Ding Small Bell audio by JohnsonBrandEditing.

Everything else, including images and HTML5/CSS/Javascript code, is made entirely by myself.


Comments

Log in with itch.io to leave a comment.

Hi

I've written code for the same game in a different language. I'm impressed how you got the discs to all explode together. That is, there's no delay between one disc disappearing and the next one's after that. Just wondering if you'd be willing to let me know the logic you used to check which discs are going to disappear and how you get them to do that all together. Mine go one at a time with a small delay in between while it calculates the next disk to get rid of. Thanks for any feedback.

Hi bazzasherlock, that's cool!

Sure, I made the code for this game open source some time ago. You can find it on my Github repo.

In particular, have a look at the checkMatches function, line 91 of the drop7.es6 file (here). As you can see, I first iterate through the whole grid and push into a list all the discs that are supposed to explode. Then, I call explosionAnimStart (line 115) passing all the discs that should explode as an argument in one single call.

The other files contain the rest of the code, such as the specifics on the explosion animation.

Hope this helps, good luck with your game development!