2048 Game
Exploring JavaScript: My First 2048 Game Project
Hey there, fellow coders! 👋 I'm excited to share my journey into the world of JavaScript game development, and today, I'm thrilled to introduce you to my very first project – a 2048 game clone.
The Project
This project is not just another replication of the popular 2048 game; it's my personal take on the classic, featuring a unique twist. One of the standout aspects is the custom swipe detection function I crafted from scratch. Yup, you read it right – I brainstormed and implemented a function to seamlessly track swipes on the screen. It was a challenging yet rewarding experience that added a personal touch to the gameplay.
Swipe Detection Magic
Let me give you a sneak peek into the code. I took on the challenge of creating a swipe detection function that responds to the player's gestures. The function analyzes touch events and translates them into smooth movements on the game grid. It may look a bit like a "young coder's workaround," but hey, it gets the job done!
if (move) {
if (
(touchstartY > touchendY &&
touchendX <= touchstartX &&
touchstartY - touchendY > touchstartX - touchendX) ||
(touchstartY > touchendY &&
touchendX >= touchstartX &&
touchstartY - touchendY > touchendX - touchstartX)
) {
for (let i = playField.length - 1; i >= 1; i--) {
for (let k = 0; k < playField[i].length; k++) {
if (
(playField[i][k] !== 0 && playField[i - 1][k] == 0) ||
(playField[i][k] == playField[i - 1][k] && playField[i][k] !== 0)
) {
canCreate = true;
i = 1;
break;
}
}
}
moveUp();
uniteUp();
moveUp();
} else if (
(touchstartY < touchendY &&
touchendX <= touchstartX &&
touchendY - touchstartY > touchstartX - touchendX) ||
(touchstartY < touchendY &&
touchendX >= touchstartX &&
touchendY - touchstartY > touchendX - touchstartX)
) {
for (let i = 0; i < playField.length - 2; i++) {
for (let k = 0; k < playField[i].length; k++) {
if (
(playField[i][k] !== 0 && playField[i + 1][k] == 0) ||
(playField[i][k] == playField[i + 1][k] && playField[i][k] !== 0)
) {
canCreate = true;
i = 3;
break;
}
}
}
moveDown();
uniteDown();
moveDown();
} else if (
(touchstartX < touchendX &&
touchendY < touchstartY &&
touchendX - touchstartX >= touchstartY - touchendY) ||
(touchstartX < touchendX &&
touchendY >= touchstartY &&
touchendX - touchstartX > touchendY - touchstartY)
) {
for (let i = 0; i < playField.length; i++) {
for (let k = 0; k < playField[i].length - 1; k++) {
if (
(playField[i][k] !== 0 && playField[i][k + 1] == 0) ||
(playField[i][k] == playField[i][k + 1] && playField[i][k] !== 0)
) {
canCreate = true;
i = 3;
break;
}
}
}
moveRight();
uniteRight();
moveRight();
} else if (
(touchstartX > touchendX &&
touchendY <= touchstartY &&
touchstartX - touchendX > touchstartY - touchendY) ||
(touchstartX > touchendX &&
touchendY >= touchstartY &&
touchstartX - touchendX > touchendY - touchstartY)
) {
for (let i = 0; i < playField.length; i++) {
for (let k = playField[i].length - 1; k >= 1; k--) {
if (
(playField[i][k] !== 0 && playField[i][k - 1] == 0) ||
(playField[i][k] == playField[i][k - 1] && playField[i][k] !== 0)
) {
canCreate = true;
i = 3;
break;
}
}
}
moveLeft();
uniteLeft();
moveLeft();
}
}Learning and Growing
Sure, the code might seem a bit rough around the edges, but this project has been a tremendous learning experience for me. From handling touch events to implementing game logic, every line of code has contributed to my growth as a JavaScript developer.
What's Next?
As I reflect on this journey, I'm already thinking about what's next. I've got more ideas brewing, and I can't wait to dive into my next JavaScript project. Stay tuned for updates and more coding adventures!
I'd love to hear your thoughts and feedback. Have you tackled a similar project? Any tips or suggestions for improvement? Let's connect and geek out over coding – drop your comments below!
Happy coding! 💻✨