- React.js for Frontend
- Node.js(Express.js) for Backend
- HEROKU for deployment
Within the scope of the project, you are expected to design a puzzle solving game. You should prepare a user interface (GUI) for the game. You can develop your project as a desktop application or web-based. The method to be used for puzzle piece matching must be a Linked List Data Structure. The requirements in the project are listed below:
- The image to be created in the puzzle must consist of 16 pieces. You should divide the uploaded image into 16 parts, four rows and four columns.
- Any picture/photo file will be read from the file or URL and printed on the screen.
- You should shuffle the image that you have divided into sixteen parts with the Suffle button you placed in the GUI.
- With the shuffle button, the user will continue to shuffle until at least one puzzle piece is in the right place.
- It should consist of 16 pieces of buttons created. By clicking the two buttons in sequence, you must swap the buttons
- The user will first click on the piece that needs to go (which he/she thinks is correct), and then click on the piece at the location he will go to, so that the pieces will move.
- Buttons placed in the right place should be locked. Subsequent position changes should not be allowed for correctly placed parts
- The id or the coordinate information of the parts will not be used in any way in checking whether the parts are in the right place. Instead, you should create a linked list for puzzle piece numbers 0-15 and check position from left to right. Puzzle piece check will only be performed using linked list
- The interface will have the highest score information. After the puzzle is completed, the score information will be written to the 'highest score.txt' document.
- You should design the game so that every correct move is +5 points and every wrong move is -10 points.
- After each move, the user should be able to see the standings on the interface.
- The 'enyuksekskor.txt' document should contain three information: username, number of moves and score.
- You must record the number of moves of the user throughout the game.
- When the puzzle image is uploaded, you must ask the user for a name to record. This name should be recorded in the score text document.
- Each time the game opens, the highest level in a part of the interface you designed, scores should be displayed in descending order.
Design prototype: [https://balsamiq.cloud/s5vql3b/pwist2r/rB634]
- Design the game's UI/UX @Asli ✅
- Implement Asli's UI part1(Image selection, Cropping, Renderind ordered pzl on the screen) @Judy ✅
- Implement asli's UI part2(System default image selection screen) @Nazir20 and @Asli ✅
- Implement Game logic (Pzl blocks swapping, score incrementation or decreamentation, wining or losing) @Judy ✅
- Implement Game data (score, user info, best score..) reading and writing form .txt file @Nazir ✅
- Work on game scenarios @Nazir ✅
- Implement game levels @Judy ✅
- Prepare documentations @Asli ✅
- DevOps with Heroku @Asli ⏳
- Game Over: the game starts with YY point. The user has to keep it > 0. if it's become 0, the game overs @Judy ⏳
- Level implementation: the game start with puzzel 4x4 (level 1), continues to 6x6, 8x8 ... for higher level @Judy ✅
Make sure that you've already installed Nodejs on your machine
- Open your terminal & follow the steps as below
- Clone the project & change directory to the cloned repo
git clone https://github.com/nazir20/Puzzle-Game.git
cd Puzzle-Game- change directory to backend folder inside the Puzzle Game, then install the required modules and as last run the backend
cd backend
npm i
npm start- Open another terminal inside the Puzzle-Game Directory and then change directory to frontend. Then install the required modules and as last run the frontend
cd frontend
npm i
npm startOpen your favorite browser and search for the below url(Frontend runs on port 3000, backend runs on port 5000)
http://localhost:3000And Now Enjoy the Game :)