21 lines
4.1 KiB
Plaintext
21 lines
4.1 KiB
Plaintext
I want to create a puzzle game using html, css and javascript. The idea is a combination of a nonogram and tetris, where you have a 2D grid board of variable size and some pieces you place on the board. For each row and column, there's a number describing how many cells should be filled in that row/column. To win, all the given pieces should be used and all the row/column constraints should be satisfied. Cells can also be blocked off, stopping pieces from being placed there. Of course, pieces can't overlap.
|
|
|
|
My concrete idea is two have two separate parts to this: the puzzle designer page and the play page. For the designer page:
|
|
|
|
In the puzzle designer page the user should be able to specify the width and height of the board. After pressing a button (or updating automatically based on text field events if they exist), a board with the corresponding dimensions should be shown. Directly above the board should be one spinbox for each column, where the designer can specify how many cells in each column should be filled. On the left there should be one spinbox for each row for the same functionality. The user should also be able to click on each cell to toggle whether it is blocked or not. You don't have to bother doing any error checking here, so e.g. a column that wants more than its height in cells is fine.
|
|
|
|
Also in the puzzle designer page, the user should be able to create and add pieces to the "inventory" that the player then has access to. The user should be presented with a 3x3 grid that they can click to toggle cells, and some kind of "submit" button that adds the newly designed shape to the player's inventory. The user should obviously be able to delete shapes too.
|
|
|
|
Once the user is done designing the puzzle, they should be able to press a button that says "export" that generates some kind of string that the player can then import.
|
|
|
|
For the play page:
|
|
|
|
The player should be presented with a text box that they can paste any exported game string/code into, and then be presented with the designed board and the pieces. For each column and row, there should be both the number of cells that need to be filled as well as the number of cells that are currently filled. For example if a row is empty and there should be 4 filled cells, it should say "0/4" at that row to the left of the board. If there are two cells filled, it should say "2/4". If the number of cells filled are more than the number that should be filled, the number should also turn red.
|
|
|
|
The pieces should be coloured light green (I think there's a css colour called this?) and the inventory should be shown to the right of the board. The board should be dark grey and the cell borders should be light grey. The player should be able to "pick up" and drag the pieces to the board. While dragging, the piece should follow under the player's cursor as if they were actually dragging the piece, and (also while dragging) they should be able to press R on the keyboard to rotate the piece. Since each piece is defined by a 3x3 grid, the piece should rotate around the center of that 3x3 grid. The player should also be able to remove the piece from the board by dragging it away and placing it back into the inventory. This is where you may need to use external libraries/html canvas/whatever, as I don't think 100% vanilla html+javascript supports this?
|
|
|
|
If the player tries to place a piece illegally (i.e. overlapping another piece, a blocked cell or the outside of the board) the piece should be immediately placed back in the inventory. When all the constraints are met (all of the row and column filled cell numbers match) a simple javascript popup should appear that says "Puzzle complete" with an OK button.
|
|
|
|
Regarding coding style and libraries:
|
|
|
|
Split up the html, css and javascript into their own files. Try to use libraries that you can include simply by linking to them in the html (though I don't do webdev for a living so I'm not sure what's available). I can try to download more libraries in the form of javascript files for you if you need. Don't use any languages other than html, css and javascript though, I want to be able to test this project by simply opening the html file in a browser. |