Skip to content

Latest commit

 

History

History
96 lines (75 loc) · 5.92 KB

README.md

File metadata and controls

96 lines (75 loc) · 5.92 KB
Raw

🧩 Puzzel Game

Puzzle 

🧰 Languages & Tools

React.js  Bootstrap  Node.js  HEROKU 

  • React.js for Frontend
  • Node.js(Express.js) for Backend
  • HEROKU for deployment

Introduction

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:

⚙️ Requirements

  • 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.

🪙 UI Design

Design prototype: [https://balsamiq.cloud/s5vql3b/pwist2r/rB634]

🔖 Todoes

  • 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 ⏳

Additional Ideas

  • 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 ✅

Deployment

HEROKU 

⚙️ Run Locally

Node.js  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 start

Open your favorite browser and search for the below url(Frontend runs on port 3000, backend runs on port 5000)

http://localhost:3000

And Now Enjoy the Game :)