js & php

2048.js

@@ -2,25 +2,25 @@ var board;
 var score = 0;
 var rows = 4;
 var columns = 4;
+var gameOver = false;
 
-window.onload = function() {
+window.onload = function () {
   setGame();
-}
+  document.getElementById("replayBtn").addEventListener("click", restartGame);
+};
 
 function setGame() {
-    // board = [
-    //     [2, 2, 2, 2],
-    //     [2, 2, 2, 2],
-    //     [4, 4, 8, 8],
-    //     [4, 4, 8, 8]
-    // ];
-
   board = [
     [0, 0, 0, 0],
     [0, 0, 0, 0],
     [0, 0, 0, 0],
-        [0, 0, 0, 0]
+    [0, 0, 0, 0],
-    ]
+  ];
+
+  score = 0;
+  gameOver = false;
+  document.getElementById("score").innerText = score;
+  document.getElementById("board").innerHTML = "";
 
   for (let r = 0; r < rows; r++) {
     for (let c = 0; c < columns; c++) {
@@ -31,139 +31,170 @@ function setGame() {
       document.getElementById("board").append(tile);
     }
   }
-    //create 2 to begin the game
-    setTwo();
-    setTwo();
 
+  setTwo();
+  setTwo();
+}
+
+function restartGame() {
+  document.getElementById("gameOverOverlay").style.display = "none";
+  setGame();
 }
 
 function updateTile(tile, num) {
   tile.innerText = "";
-    tile.classList.value = ""; //clear the classList
+  tile.classList.value = "";
   tile.classList.add("tile");
   if (num > 0) {
     tile.innerText = num.toString();
     if (num <= 4096) {
-            tile.classList.add("x"+num.toString());
+      tile.classList.add("x" + num.toString());
     } else {
       tile.classList.add("x8192");
     }
   }
 }
 
-document.addEventListener('keyup', (e) => {
+document.addEventListener("keyup", (e) => {
+  if (gameOver) return;
+
+  let moved = false;
+
   if (e.code == "ArrowLeft") {
-        slideLeft();
+    moved = slideLeft();
-        setTwo();
+  } else if (e.code == "ArrowRight") {
+    moved = slideRight();
+  } else if (e.code == "ArrowUp") {
+    moved = slideUp();
+  } else if (e.code == "ArrowDown") {
+    moved = slideDown();
   }
-    else if (e.code == "ArrowRight") {
-        slideRight();
-        setTwo();
-    }
-    else if (e.code == "ArrowUp") {
-        slideUp();
-        setTwo();
 
-    }
+  // Only add new tile if board actually moved
-    else if (e.code == "ArrowDown") {
+  if (moved) {
-        slideDown();
     setTwo();
-    }
     document.getElementById("score").innerText = score;
-})
+  }
+});
 
-function filterZero(row){
+function filterZero(row) {
-    return row.filter(num => num != 0); //create new array of all nums != 0
+  return row.filter((num) => num != 0);
 }
 
 function slide(row) {
-    //[0, 2, 2, 2] 
+  row = filterZero(row);
-    row = filterZero(row); //[2, 2, 2]
+  for (let i = 0; i < row.length - 1; i++) {
-    for (let i = 0; i < row.length-1; i++){
+    if (row[i] == row[i + 1]) {
-        if (row[i] == row[i+1]) {
       row[i] *= 2;
-            row[i+1] = 0;
+      row[i + 1] = 0;
       score += row[i];
     }
-    } //[4, 0, 2]
+  }
-    row = filterZero(row); //[4, 2]
+  row = filterZero(row);
-    //add zeroes
   while (row.length < columns) {
     row.push(0);
-    } //[4, 2, 0, 0]
+  }
   return row;
 }
 
 function slideLeft() {
+  let moved = false;
   for (let r = 0; r < rows; r++) {
     let row = board[r];
+    let original = [...row];
     row = slide(row);
     board[r] = row;
-        for (let c = 0; c < columns; c++){
+
+    // Check if board changed
+    if (JSON.stringify(original) !== JSON.stringify(row)) {
+      moved = true;
+    }
+
+    for (let c = 0; c < columns; c++) {
       let tile = document.getElementById(r.toString() + "-" + c.toString());
       let num = board[r][c];
       updateTile(tile, num);
     }
   }
+  return moved;
 }
 
 function slideRight() {
+  let moved = false;
   for (let r = 0; r < rows; r++) {
-        let row = board[r];         //[0, 2, 2, 2]
+    let row = board[r];
-        row.reverse();              //[2, 2, 2, 0]
+    let original = [...row];
-        row = slide(row)            //[4, 2, 0, 0]
+    row.reverse();
-        board[r] = row.reverse();   //[0, 0, 2, 4];
+    row = slide(row);
-        for (let c = 0; c < columns; c++){
+    board[r] = row.reverse();
+
+    // Check if board changed
+    if (JSON.stringify(original) !== JSON.stringify(board[r])) {
+      moved = true;
+    }
+
+    for (let c = 0; c < columns; c++) {
       let tile = document.getElementById(r.toString() + "-" + c.toString());
       let num = board[r][c];
       updateTile(tile, num);
     }
   }
+  return moved;
 }
 
 function slideUp() {
+  let moved = false;
   for (let c = 0; c < columns; c++) {
     let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
+    let original = [...row];
     row = slide(row);
-        // board[0][c] = row[0];
+
-        // board[1][c] = row[1];
+    // Check if board changed
-        // board[2][c] = row[2];
+    if (JSON.stringify(original) !== JSON.stringify(row)) {
-        // board[3][c] = row[3];
+      moved = true;
-        for (let r = 0; r < rows; r++){
+    }
+
+    for (let r = 0; r < rows; r++) {
       board[r][c] = row[r];
       let tile = document.getElementById(r.toString() + "-" + c.toString());
       let num = board[r][c];
       updateTile(tile, num);
     }
   }
+  return moved;
 }
 
 function slideDown() {
+  let moved = false;
   for (let c = 0; c < columns; c++) {
     let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
+    let original = [...row];
     row.reverse();
     row = slide(row);
     row.reverse();
-        // board[0][c] = row[0];
+
-        // board[1][c] = row[1];
+    // Check if board changed
-        // board[2][c] = row[2];
+    if (JSON.stringify(original) !== JSON.stringify(row)) {
-        // board[3][c] = row[3];
+      moved = true;
-        for (let r = 0; r < rows; r++){
+    }
+
+    for (let r = 0; r < rows; r++) {
       board[r][c] = row[r];
       let tile = document.getElementById(r.toString() + "-" + c.toString());
       let num = board[r][c];
       updateTile(tile, num);
     }
   }
+  return moved;
 }
 
 function setTwo() {
   if (!hasEmptyTile()) {
+    checkGameOver();
     return;
   }
   let found = false;
   while (!found) {
-        //find random row and column to place a 2 in
     let r = Math.floor(Math.random() * rows);
     let c = Math.floor(Math.random() * columns);
     if (board[r][c] == 0) {
@@ -177,13 +208,37 @@ function setTwo() {
 }
 
 function hasEmptyTile() {
-    let count = 0;
   for (let r = 0; r < rows; r++) {
     for (let c = 0; c < columns; c++) {
-            if (board[r][c] == 0) { //at least one zero in the board
+      if (board[r][c] == 0) {
         return true;
       }
     }
   }
   return false;
 }
+
+function checkGameOver() {
+  // Check if any moves are possible
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < columns; c++) {
+      // Check right
+      if (c < columns - 1 && board[r][c] == board[r][c + 1]) {
+        return;
+      }
+      // Check down
+      if (r < rows - 1 && board[r][c] == board[r + 1][c]) {
+        return;
+      }
+    }
+  }
+
+  // No moves available - game over
+  gameOver = true;
+  showGameOver();
+}
+
+function showGameOver() {
+  document.getElementById("finalScore").innerText = score;
+  document.getElementById("gameOverOverlay").style.display = "flex";
+}

Database.php

@@ -0,0 +1,11 @@
+<?php
+$host = "localhost";
+$user = "root";
+$pass = "";
+$db   = "game2048";
+
+$conn = new mysqli($host, $user, $pass, $db);
+if ($conn->connect_error) {
+    die("Koneksi gagal: " . $conn->connect_error);
+}
+?>