From 722d489926946fcbb204d19d0779c5d3ebee3505 Mon Sep 17 00:00:00 2001 From: Vlad Zahorovskyi Date: Wed, 13 Nov 2024 22:04:42 +0300 Subject: [PATCH] Description of project added --- README.md | 79 +++++++++------------------------------------ src/scripts/main.js | 9 +++--- 2 files changed, 20 insertions(+), 68 deletions(-) diff --git a/README.md b/README.md index 5aab92544..81f18a66c 100644 --- a/README.md +++ b/README.md @@ -1,69 +1,22 @@ -# 2048 game -Hey! Are you ready for a real hard check of your JavaScript skills, ninja? -If you are still here, let's do it. +Project: 2048 Game +Description +This project is a web-based implementation of the popular 2048 game. Users can slide tiles on a grid to combine numbers, aiming to reach the 2048 tile. -In this task, you need to implement the 2048 game like in [this reference](https://play2048.co/) -Don't play for too long! We need you to write the code! +Technologies Used +JavaScript: Core game logic and interactions +SCSS: Styling and responsive design -Okay, what do we have? -1) HTML and CSS are already written. You can use it, or implement your own design if you want. -2) Base `Game` class structure is already written too. Extend it with your own methods. Obligatory methods (used in tests): - - constructor with `initialState` parameter (value is optional, defaults to the empty board) - - `getState()` - - `getScore()` - - `getStatus()` - - `moveLeft()` - - `moveRight()` - - `moveUp()` - - `moveDown()` - - `start()` - - `restart()` +How to Run Locally +Clone the Repository +git clone (https://github.com/v-zagorovskii/js_2048_game.git) +cd 2048-game +Install Dependencies (if applicable) -3) Reference. +Although this project mainly uses JavaScript and SCSS, if additional dependencies are needed, they should be installed here. +Run the Project -That's it! - -Okay, okay. Also, we have some rules: -1) The game field is 4 x 4 -2) Each cell can be empty or contain one of the numbers: 2, 4, 8 ... 2^n -3) The player can move cells with keyboard arrows -4) All the numbers should be moved in the selected direction until all empty cells are filled in - - 2 equal cells should be merged into a doubled number - - The merged cell can’t be merged twice during one move -5) The move is possible if at least one cell is changed after the move -6) After move 2 or 4 appears in a random empty cell. 4 probability is 10% -7) When 2048 value is displayed in any cell, win message should be shown. -8) The `game over` message should be shown if there are no more available moves. -9) Hide start message when game starts. -10) Change the `Start` button to `Restart` after the first move. -11) `Restart` button should reset the game to the initial state. -12) Increase score with each move. The score should be increased by the sum of all merged cells. -13) The game consists of 2 main parts: - - game logic written in `src/modules/Game.class.js` module that exports `Game` class - - game UI written in `src/index.html` with `main.js` script that need to use `Game` class instance - -Hints: -- You have class `field-cell--%cell_value%`, for styling cell in the game. -- Use `hidden` class for hiding elements on page. -- Use `start`, `restart` classes for the main button for different styles. -- Use `field-cell--%cell_value%` class like additional class, don't replace the main class. -- Use `keydown` event and `event.key` property to handle arrow buttons presses - ```js - document.addEventListener('keydown', event => console.log(event.key)); - ``` -- Adding animation to the game is optional. It is a bit tricky, but you can try it if you want. Probably, you will need to extend the Game class with additional methods and create a separate board storage with Tile entities to operate their corresponding DOM elements' positions. - -You can change the HTML/CSS layout if you need it. - -![Preview](./src/images/reference.png) - -## Deploy and Pull Request - -1. Replace `` with your Github username in the link - - [DEMO LINK](https://.github.io/js_2048_game/) -2. Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/) - - Run `npm run test` command to test your code; - - Run `npm run test:only -- -n` to run fast test ignoring linter; - - Run `npm run test:only -- -l` to run fast test with additional info in console ignoring linter. +Open index.html in your browser to play the game locally. +Check out the live demo. +-----> https://v-zagorovskii.github.io/js_2048_game/ diff --git a/src/scripts/main.js b/src/scripts/main.js index f63b1c884..8a8708991 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,6 +1,5 @@ 'use strict'; -// Uncomment the next lines to use your game instance in the browser const Game = require('../modules/Game.class'); const game = new Game(); @@ -14,16 +13,16 @@ document.addEventListener('keydown', (e) => { e.preventDefault(); switch (e.code) { - case 'ArrowLeft': // Left arrow + case 'ArrowLeft': game.moveLeft(); break; - case 'ArrowUp': // Up arrow + case 'ArrowUp': game.moveUp(); break; - case 'ArrowRight': // Right arrow + case 'ArrowRight': game.moveRight(); break; - case 'ArrowDown': // Down arrow + case 'ArrowDown': game.moveDown(); break; default: