Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

solution #542

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

solution #542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d287f17
solution
Oct 23, 2023
45903cf
fixed mistake
Oct 23, 2023
1ecc95e
I hope fixed
Oct 25, 2023
1da9040
add arrow & remove coments
Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
1. Replace `<your_account>` with your Github username in the link
- [DEMO LINK](https://<your_account>.github.io/js_2048_game/)
- [DEMO LINK](https://NataliMax.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;
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"@linthtml/linthtml": "^0.3.2",
"@mate-academy/eslint-config": "*",
"@mate-academy/linthtml-config": "0.0.1",
"@mate-academy/scripts": "^0.7.12",
"@mate-academy/scripts": "^1.2.8",
"@mate-academy/stylelint-config": "0.0.9",
"colors": "^1.3.3",
"cypress": "^5.6.0",
Expand Down
Binary file added src/images/favicon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048</title>
<link rel="stylesheet" href="./styles/main.scss">
<link rel="icon" href="./images/favicon.png">
<link rel="stylesheet"
href="./styles/main.scss"
defer
>
</head>
<body>
<div class="container">
Expand Down
362 changes: 361 additions & 1 deletion src/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,363 @@
'use strict';

// write your code here
const score = document.querySelector('.game-score');
const button = document.querySelector('.button');
const fields = document.querySelectorAll('.field-cell');

const table = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
];

function gameStart() {
button.classList.remove('start');
button.classList.add('restart');
button.textContent = 'restart';
}

let scoreValue = 0;

function up(numsArr, index) {
const arr = numsArr.filter(item => item !== 0);

for (let i = 0; i < arr.length - 1; i++) {
const tile = arr[i];
const nextTile = arr[i + 1];

if (tile === nextTile) {
arr[i] = tile * 2;
scoreValue += arr[i];
updateScore();
arr[i + 1] = 0;
}
}

const mergedArr = arr.filter(item => item !== 0);

for (let i = 0; i < table.length; i++) {
table[i][index] = mergedArr[i] || 0;
}
}

function down(numsArr, index) {
const arr = numsArr.filter(item => item !== 0);

for (let i = arr.length - 1; i >= 0; i--) {
const tile = arr[i];
const nextTile = arr[i - 1];

if (tile === nextTile) {
arr[i] = tile * 2;
scoreValue += arr[i];
updateScore();
arr[i - 1] = 0;
}
}

const mergedArr = arr.filter(item => item !== 0);

while (mergedArr.length < 4) {
mergedArr.unshift(0);
}

for (let i = 0; i < table.length; i++) {
table[i][index] = mergedArr[i] || 0;
}
}

function left(numsArr) {
const arr = numsArr.filter(item => item !== 0);

for (let i = 0; i < arr.length - 1; i++) {
const tile = arr[i];
const nextTile = arr[i + 1];

if (tile === nextTile) {
arr[i] = tile * 2;
scoreValue += arr[i];
updateScore();
arr[i + 1] = 0;
}
}

const mergedArr = arr.filter(item => item !== 0);

for (let i = 0; i < table.length; i++) {
numsArr[i] = mergedArr[i] || 0;
}
}

function right(numsArr) {
const arr = numsArr.filter(item => item !== 0);

for (let i = arr.length - 1; i >= 0; i--) {
const tile = arr[i];
const nextTile = arr[i - 1];

if (tile === nextTile) {
arr[i] = tile * 2;
scoreValue += arr[i];
updateScore();
arr[i - 1] = 0;
}
}

const mergedArr = arr.filter(item => item !== 0);

while (mergedArr.length < 4) {
mergedArr.unshift(0);
}

for (let i = 0; i < table.length; i++) {
numsArr[i] = mergedArr[i] || 0;
}
}

function showMessage(TypeOfMessage) {
const winMessage = document.querySelector('.message-win');
const loseMessage = document.querySelector('.message-lose');
const startMessage = document.querySelector('.message-start');

switch (TypeOfMessage) {
case 'win':
winMessage.classList.remove('hidden');
loseMessage.classList.add('hidden');
startMessage.classList.add('hidden');
break;
case 'lose':
winMessage.classList.add('hidden');
loseMessage.classList.remove('hidden');
startMessage.classList.add('hidden');
break;
case 'start':
winMessage.classList.add('hidden');
loseMessage.classList.add('hidden');
startMessage.classList.remove('hidden');
break;
case 'nothing':
winMessage.classList.add('hidden');
loseMessage.classList.add('hidden');
startMessage.classList.add('hidden');
break;
default:
return 0;
}
}

function notEmptyTile() {
for (const row of table) {
for (const tile of row) {
if (tile === 0) {
return false;
}
}
}

return true;
}

function notMergeTile() {
for (const row of table) {
for (let i = 0; i < row.length; i++) {
const tile = row[i];
const nextTile = row[i + 1];

if (tile === nextTile) {
return false;
}
}
}

for (let j = 0; j < 4; j++) {
for (let k = 0; k < 3; k++) {
const tile = table[k][j];
const nextRowTile = table[k + 1][j];

if (tile === nextRowTile) {
return false;
}
}
}

return true;
}

function moveHorizontally(direction) {
const json = JSON.stringify(table);
const copyTable = JSON.parse(json);

for (const row of table) {
direction(row);
}

for (let i = 0; i < 16; i++) {
const rowIndex = Math.floor(i / 4);
const colIndex = i - (rowIndex * 4);
const tableValue = table[rowIndex][colIndex];
const copyTableValue = copyTable[rowIndex][colIndex];

if (tableValue !== copyTableValue) {
generateRandomTile();
updateGameFields();
break;
}
}
}

function moveVertically(direction) {
const json = JSON.stringify(table);
const copyTable = JSON.parse(json);

for (let j = 0; j < 4; j++) {
direction(
[table[0][j], table[1][j], table[2][j], table[3][j]], j
);
}

for (let i = 0; i < 16; i++) {
const rowIndex = Math.floor(i / 4);
const colIndex = i - (rowIndex * 4);
const tableValue = table[rowIndex][colIndex];
const copyTableValue = copyTable[rowIndex][colIndex];

if (tableValue !== copyTableValue) {
generateRandomTile();
updateGameFields();
break;
}
}
}

document.addEventListener('keydown', e => {
switch (e.key) {
case 'a': {
moveHorizontally(left);
break;
}

case 'ArrowLeft': {
moveHorizontally(left);
break;
}
Comment on lines +235 to +243
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can combine these cases

Suggested change
case 'a': {
moveHorizontally(left);
break;
}
case 'ArrowLeft': {
moveHorizontally(left);
break;
}
case 'a':
case 'ArrowLeft': {
moveHorizontally(left);
break;
}

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately, the linter requires a 'break' after each 'case'. I asked this question in the chat, In this case it is impossible


case 'd': {
moveHorizontally(right);
break;
}

case 'ArrowRight': {
moveHorizontally(right);
break;
}

case 'w': {
moveVertically(up);
break;
}

case 'ArrowUp': {
moveVertically(up);
break;
}

case 's': {
moveVertically(down);
break;
}

case 'ArrowDown': {
moveVertically(down);
break;
}
}
loseCheck();
});

function loseCheck() {
if (notEmptyTile()) {
if (notMergeTile()) {
showMessage('lose');
}
}
}

function updateGameFields() {
for (let i = 0; i < fields.length; i++) {
const indexRow = Math.floor(i / 4);
const indexCol = i - (indexRow * 4);
const tableValue = table[indexRow][indexCol];

fields[i].textContent = tableValue;
fields[i].classList = ['field-cell'];

if (tableValue !== 0) {
fields[i].classList.add(`field-cell--${tableValue}`);
}
}
}

function updateScore() {
score.textContent = scoreValue;

for (const row of table) {
for (const item of row) {
if (item === 2048) {
showMessage('win');
}
}
}
}

function generateRandomTile() {
const fieldIndex = getRandonCell();
const rowIndex = Math.floor(fieldIndex / 4);
const colIndex = fieldIndex - (rowIndex * 4);
const firstRandomNum = Math.floor(Math.random() * 10);

if (firstRandomNum === 4) {
table[rowIndex][colIndex] = 4;
} else {
table[rowIndex][colIndex] = 2;
}
}

function restart() {
for (let i = 0; i < table.length; i++) {
table[i] = [0, 0, 0, 0];
}

scoreValue = 0;
updateScore();
}

button.addEventListener('click', () => {
if (button.classList.contains('start')) {
gameStart();
}
restart();
updateGameFields();
generateRandomTile();
updateGameFields();
generateRandomTile();
updateGameFields();
showMessage('nothing');
});

function getRandonCell() {
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

for (let i = 15; i >= 0; i--) {
const randomIndex = Math.floor(Math.random() * i);
const value = arr[randomIndex];
const indexRow = Math.floor(value / 4);
const indexCol = value - (indexRow * 4);

if (table[indexRow][indexCol] === 0) {
return value;
} else {
arr.splice(randomIndex, 1);
}
}
}
Loading
Loading