const vueApp = {
data() {
return {
disabledControls: false,
transitionDuration: 300,
highestId: 0,
width: 4,
startTiles: 2,
tiles: [],
score: 0,
bestScore: 0,
newHighscore: false,
gameOver: true,
won: false
};
},
methods: {
setItemRef(id, e) {
if (id && e) {
this.tiles.find((item) => item.id === id).item = e;
}
},
generateRandomNum() {
this.checkLose();
if (this.tiles.length <= 15) {
let randomPosX = Math.floor(Math.random() * this.width);
let randomPosY = Math.floor(Math.random() * this.width);
let randomNumber = Math.random() < 0.9 ? 2 : 4;
let exists = false;
for (let i = 0; i < this.tiles.length; i++) {
if (
this.tiles[i].position.x === randomPosX &&
this.tiles[i].position.y === randomPosY
) {
exists = true;
}
}
if (!exists) {
this.createTile(randomPosX, randomPosY, randomNumber)
} else {
this.generateRandomNum();
}
}
},
createTile(posX, posY, value) {
this.highestId++;
this.tiles.push({
id: this.highestId,
position: {
x: posX,
y: posY
},
value: value,
item: null,
classes: []
});
const newTile = this.tiles.find(tile => tile.id === this.highestId)
newTile.classes.push('z-10')
this.disabledControls = false;
setTimeout(() => {
newTile.classes.splice(0,1)
}, this.transitionDuration);
},
control(e) {
if (!this.disabledControls) {
if (e.key === "ArrowRight" || e.detail.dir === "right") {
this.disabledControls = true;
this.goRight();
} else if (e.key === "ArrowLeft" || e.detail.dir === "left") {
this.disabledControls = true;
this.goLeft();
} else if (e.key === "ArrowUp" || e.detail.dir === "up") {
this.disabledControls = true;
this.goUp();
} else if (e.key === "ArrowDown" || e.detail.dir === "down") {
this.disabledControls = true;
this.goDown();
}
}
},
goUp() {
for (let i = 0; i < this.width; i++) {
let column = this.tiles.filter((item, itemIndex) => {
return this.tiles[itemIndex].position.x === i;
});
if (column.length) {
column = column.sort((a, b) => {
return a.position.y > b.position.y ? 1 : a.position.y < b.position.y ? -1 : 0;
});
}
this.combineUp(column);
}
setTimeout(() => this.generateRandomNum(), this.transitionDuration);
},
combineUp(column) {
let filteredColumn = JSON.parse(JSON.stringify(column));
for (let i = 0; i < filteredColumn.length - 1; i++) {
let current = filteredColumn[i].value;
let prev = filteredColumn[i + 1]?.value;
if (prev === current) {
filteredColumn[i].value = current + prev;
filteredColumn[i].prevId = filteredColumn[i + 1].id;
filteredColumn[i + 1].value = 0
}
}
filteredColumn = filteredColumn.filter(e => e.value)
let missing = this.width - filteredColumn.length;
let zeros = Array(missing).fill({ value: 0 });
filteredColumn = filteredColumn.concat(zeros);
this.reposition(filteredColumn, 'column')
},
goDown() {
for (let i = 0; i < this.width; i++) {
let column = this.tiles.filter((item, itemIndex) => {
return this.tiles[itemIndex].position.x === i;
});
if (column.length) {
column = column.sort((a, b) => {
return a.position.y > b.position.y ? 1 : a.position.y < b.position.y ? -1 : 0;
});
}
this.combineDown(column);
}
setTimeout(() => this.generateRandomNum(), this.transitionDuration);
},
combineDown(column) {
let filteredColumn = JSON.parse(JSON.stringify(column));
for (let i = filteredColumn.length - 1; i >= 0; i--) {
let current = filteredColumn[i].value;
let prev = filteredColumn[i - 1]?.value;
if (prev === current) {
filteredColumn[i].value = current + prev;
filteredColumn[i].prevId = filteredColumn[i - 1].id;
filteredColumn[i - 1].value = 0
}
}
filteredColumn = filteredColumn.filter(e => e.value)
let missing = this.width - filteredColumn.length;
let zeros = Array(missing).fill({ value: 0 });
filteredColumn = zeros.concat(filteredColumn);
this.reposition(filteredColumn, 'column')
},
goRight() {
for (let i = 0; i < this.width; i++) {
let row = this.tiles.filter((item, itemIndex) => {
return this.tiles[itemIndex].position.y === i;
});
if (row.length) {
row = row.sort((a, b) => {
return a.position.x > b.position.x ? 1 : a.position.x < b.position.x ? -1 : 0;
});
}
this.combineRight(row);
}
setTimeout(() => this.generateRandomNum(), this.transitionDuration);
},
combineRight(row) {
let filteredRow = JSON.parse(JSON.stringify(row));
for (let i = filteredRow.length - 1; i >= 0; i--) {
let current = filteredRow[i].value;
let prev = filteredRow[i - 1]?.value;
if (prev === current) {
filteredRow[i].value = current + prev;
filteredRow[i].prevId = filteredRow[i - 1].id;
filteredRow[i - 1].value = 0
}
}
/*
let values = filteredRow.filter(e => e.value)
let empties = filteredRow.filter(e => e.value === 0)
let combined = empties.concat(values)
let missingFields = this.width - combined.length
let emptyFields = Array(missingFields).fill({ value: 0 });
combined = emptyFields.concat(combined)
console.log(values, empties, combined)
this.reposition(combined, 'row')
*/
filteredRow = filteredRow.filter(e => e.value)
let missing = this.width - filteredRow.length;
let zeros = Array(missing).fill({ value: 0 });
filteredRow = zeros.concat(filteredRow);
this.reposition(filteredRow, 'row')
},
goLeft() {
for (let i = 0; i < this.width; i++) {
let row = this.tiles.filter((item, itemIndex) => {
return this.tiles[itemIndex].position.y === i;
});
if (row.length) {
row = row.sort((a, b) => {
return a.position.x > b.position.x ? 1 : a.position.x < b.position.x ? -1 : 0;
});
}
this.combineLeft(row);
}
setTimeout(() => this.generateRandomNum(), this.transitionDuration);
},
combineLeft(row) {
let filteredRow = JSON.parse(JSON.stringify(row));
for (let i = 0; i < filteredRow.length - 1; i++) {
let current = filteredRow[i].value;
let prev = filteredRow[i + 1]?.value;
if (prev === current) {
filteredRow[i].value = current + prev;
filteredRow[i].prevId = filteredRow[i + 1].id;
filteredRow[i + 1].value = 0
}
}
filteredRow = filteredRow.filter(e => e.value)
let missing = this.width - filteredRow.length;
let zeros = Array(missing).fill({ value: 0 });
filteredRow = filteredRow.concat(zeros);
this.reposition(filteredRow, 'row')
},
reposition(array, position) {
const pos = position === 'row' ? 'x' : 'y';
for (let i = array.length - 1; i >= 0; i--) {
if (array[i].value > 0) {
const currentTile = this.tiles.find(tile => tile.id === array[i].id)
const tileIndex = this.tiles.findIndex(tile => tile.id === array[i].id)
const prevTile = array[i].prevId ? this.tiles.find(tile => tile.id === array[i].prevId) : null
currentTile.position[pos] = i;
currentTile.value = array[i].value;
if (prevTile) {
currentTile.classes.push('z-10')
prevTile.position[pos] = i;
this.score += array[i].value;
//console.log(array)
//console.log(JSON.parse(JSON.stringify(this.tiles)))
setTimeout(() => {
/*const tileSettings = {
position: {
x: currentTile.position.x,
y: currentTile.position.y
},
value: currentTile.value
}*/
//currentTile.classes.splice(0,1)
this.tiles.splice(tileIndex, 1);
const prevTileIndex = this.tiles.findIndex(tile => tile.id === array[i].prevId)
this.tiles.splice(prevTileIndex, 1);
this.createTile(currentTile.position.x, currentTile.position.y, currentTile.value);
}, this.transitionDuration);
}
}
}
},
easyTest(row) {
row = row.filter(e => e);
for (let i = row.length - 1; i >= 0; i--) {
let current = row[i];
let prev = row[i - 1];
if (prev === current) {
row[i] = current + prev;
row[i - 1] = 0;
}
}
row = row.filter(e => e);
var missing = 4 - row.length;
var zeros = Array(missing).fill(0);
row = zeros.concat(row);
return row;
},
checkWin() {
if (this.tiles.some((i) => i.value === 2048)) {
this.won = true;
}
},
checkLose() {
let noTilesAvaliable = (this.tiles.length >= 15);
if (noTilesAvaliable) {
setTimeout(() => (this.gameOver = true), this.transitionDuration);
document.removeEventListener("keyup", this.control);
document.removeEventListener("swiped", this.control);
}
},
bgColor(val) {
switch (val) {
case 2:
return "bg-gray-600 from-gray-500 text-gray-200";
case 4:
return "bg-indigo-200 from-indigo-100 text-indigo-700";
case 8:
return "bg-indigo-300 from-indigo-200 text-indigo-800";
case 16:
return "bg-purple-200 from-purple-100 text-purple-700";
case 32:
return "bg-purple-300 from-purple-200 text-purple-800";
case 64:
return "bg-purple-500 from-purple-400 text-purple-100";
case 128:
return "bg-orange-200 from-orange-100 text-orange-700";
case 256:
return "bg-orange-500 from-orange-400 text-orange-100";
case 512:
return "bg-orange-600 from-orange-500 text-orange-100";
case 1024:
return "bg-yellow-400 from-yellow-300 text-yellow-700";
case 2048:
return "bg-yellow-500 from-yellow-400 text-yellow-900";
default:
return "bg-gray-700 text-gray-100";
}
},
startGame() {
this.gameOver = false;
this.newHighscore = false;
this.won = false;
this.tiles = [];
this.score = 0;
this.highestId = 0;
for (var i = 0; i < this.startTiles; i++) {
this.generateRandomNum();
}
if (localStorage.agBestScore) {
this.bestScore = parseInt(localStorage.agBestScore);
}
document.addEventListener("keyup", this.control);
document.addEventListener("swiped", this.control);
},
setTilePosition(x, y) {
return {
top: 0.5 + y * 6 + "rem",
left: 0.5 + x * 6 + "rem"
};
}
},
computed: {
gridSize() {
return this.width * this.width;
}
},
watch: {
score(newVal) {
if (localStorage.agBestScore < newVal) {
this.newHighscore = true;
localStorage.agBestScore = newVal;
this.bestScore = newVal;
}
}
},
created() {
document.body.classList = "overflow-hidden";
},
mounted() {
if (typeof localStorage.agBestScore === "undefined") {
localStorage.agBestScore = 0;
}
this.startGame();
}
};
Vue.createApp(vueApp).mount("#app");
!
