JIT
Acid Drop Game Mechanics Explained
Make a game: Left/Right: Move the columns left/right. Down: Make the column go down faster. Up: Tilt the column horizontally or vertically. Spacebar: Change the order of coloured pieces. Similarly to Tetris, you'll see columns falling down and it shows at the top what the next column will be like. You can push down to make the columns go down faster and right and left to move the column in that direction. The columns are vertical and contain three differently coloured pieces (sometimes two or three pieces will have the same colour). Pressing fire will have these three pieces move to an "upper" position so you could later arrange three pieces with the same colour next to each other, either vertically, or horizontally. Once you do that, these three pieces will disappear and you continue arranging pieces. There are a few things to note about Acid Drop. First, you can't do combos due laziness in programming. For example, look at the following screen. ________ | | Now if the column keeps falling down as it is, then three "%" | | pieces will be next to each other and will disappear. When | * | they do, the pieces above them will go down in their places | % | and there will result three "*" pieces next to each other. | # | This should result in another three pieces disappearing but | | it doesn't happen for some reason. | &* &% | | %% *@ | When two three piece lines happen similtaneously though, | #* &% | the two lines that result disappear so thank god for that. | %*#*@ | |_#@&&#__| Another annoying thing is that you can't arrange three pieces in a diagonal manner, thus making the game extremely simple and with no strategy. This, along with the previous annoyance, makes it very important to always plan way way ahead and organizing columns very carefully. Pushing up will make the columns tilt horizontally. Use this when you're with a column containing two or three pieces of the same colour and another one or two similar pieces are at the bottom of the screen lying horizontally. Other than this, its use is very limited due to the short width of the screen. After a number of points, a four piece column will come down. What you have to do is make this column touch as many pieces as possible because it makes the pieces it comes in contact with disappear. This column is white and is already tilted horizontally so quickly choose the path with the most number of pieces in it and make it go down there. After this happens, you will have finished the "level" and a new level starts that has faster moving columns. That is all. Q.How does scoring work? A.For every piece that disappears you get 100 points multiplied by the number of level you are in. Q.What are the different colours of the pieces? A.Blue Pink Purple Yellow Gold White (end level column). Q.How many levels are there? A.There are 30 levels. Q.Is there any way around the no combo problem? A.Well if the resultant three similar pieces are on the surface, you can put a fourth piece with them and make them all disappear, so it's not all bad Q.What is the game screen's width/height? A.7 by 18 pieces. Q.When will I jump to the next level? A.I'd say after a hundred disappeared pieces, give or take a couple.

Okay, let's set up the structure for the Acid Drop game.

We'll create the HTML file, CSS for basic styling, and the initial JavaScript files for constants, the main entry point, and the game logic core.

This sets up the core files:

  1. index.html: The main page with canvases and UI elements.
  2. style.css: Basic layout and styling.
  3. constants.js: Defines game parameters like grid size, colors, speeds, etc.
  4. main.js: Initializes Three.js, the game, renderer, UI, and starts the game loop.
  5. game.js: Contains the main Game class orchestrating the logic. Includes placeholders for core functions.
  6. grid.js: Manages the game board state.
  7. column.js: Represents the falling columns (normal and special).
  8. renderer3d.js: Handles drawing the game state using Three.js.
  9. ui.js: Manages updating the score, level, and rendering the next piece preview.

Next steps would involve filling in the logic within game.js, grid.js, column.js, and renderer3d.js based on the detailed plan.

Updated files
v1
Rewrite the code fully.

Okay, here is the complete, rewritten code for the Acid Drop game, incorporating the logic based on the rules provided.

This version implements the core logic described in the rules:

  • Correct grid dimensions and handling of hidden rows.
  • Proper column generation (random 3-piece, special 4-piece white horizontal).
  • Movement, rotation (with basic wall checks), and color cycling.
  • Accurate collision detection.
  • Landing logic, including special column clearing behavior.
  • Match detection (horizontal/vertical 3+) and clearing.
  • Gravity implementation.
  • Score calculation based on level.
  • Level progression triggered by clearing ~100 pieces, queuing the special column.
  • Level up occurs after the special column lands.
  • Fall speed increases with level.
  • Game over condition when pieces land above the visible grid.
  • Next piece preview rendering.
  • UI updates for score, level, and game over.
  • No combo logic is enforced by only checking matches immediately after a piece lands or after the special column clears, not after gravity.*
Updated files
v2
The down quick drop is too snappy. Also, use C or mouse wheel to add mouse controls, which is scroll to rotate, right quick to quick drop, click to change color. Add a control sheet somewhere and R to reset.

Okay, let's refine the controls, add mouse support, implement reset, and display a control sheet.

Summary of Changes:

  1. Soft Drop: Removed the immediate step down on KEY_DOWN press. The update loop now handles the faster falling speed based on the softDropActive flag and SOFT_DROP_MULTIPLIER (slightly reduced for a less snappy feel).
  2. Mouse Controls:
    • Added event listeners to gameCanvas for wheel (rotate), click (cycle colors), and contextmenu (start soft drop).
    • Added global mouseup and mouseout listeners to reliably detect right-click release and stop soft drop.
    • Prevented default actions for contextmenu and wheel.
  3. Reset: Added 'KeyR' listener and a Reset button in the UI panel, both triggering game.init().
  4. Control Sheet:
    • Added a div#controls-sheet to index.html with the control list.
    • Added CSS to style it as a centered popup.
    • Added 'KeyC' listener and a Controls button in the UI panel to toggle the sheet's visibility.
    • Added a Close button within the sheet.
    • Keyboard input (except for Reset and Controls toggle) is now ignored when the sheet is visible.
  5. Input Handling: Refactored input handling in main.js to manage soft drop state based on both keyboard and mouse inputs (softDropKeyDown, softDropMouseDown) and communicate the final state (softDropActive) to the game object via game.setSoftDrop().
  6. Game Logic: Added setSoftDrop method to Game class. handleInput no longer directly manages soft drop start/stop. Game over logic slightly adjusted to ensure pieces landing exactly at the top visible row trigger game over correctly.
  7. Minor Fixes: Ensured meshes are cleared correctly on reset. Adjusted special piece clearing logic slightly._
Updated files
v3