Upload 4 files

Browse files

Files changed (4) hide show

contact.html +18 -0
index.html +23 -0
script.js +143 -0
style.css +99 -0

contact.html ADDED Viewed

	@@ -0,0 +1,18 @@

+<!DOCTYPE html>
+<html>
+<head>
+  <title>Contact</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Contact</h1>
+    <p>You can contact me at:</p>
+    <ul>
+      <li>Email: example@example.com</li>
+      <li>Phone: 123-456-7890</li>
+    </ul>
+    <a href="index.html">Back to Game</a>
+  </div>
+</body>
+</html>

index.html ADDED Viewed

	@@ -0,0 +1,23 @@

+<!DOCTYPE html>
+<html>
+<head>
+  <title>2048 Game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <h1>2048</h1>
+    <h2>Created By M kazi</h2>
+    <div class="score-container">
+      Score: <span id="score">0</span>
+    </div>
+    <div class="game-board">
+      </div>
+    <div class="instructions">
+      How to play: Use arrow keys to move the tiles. Tiles with the same number merge when they touch. Add them up to reach 2048!
+    </div>
+    <a href="contact.html">Contact</a>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,143 @@

+const gameBoard = document.querySelector(".game-board");
+const scoreDisplay = document.querySelector("#score");
+let board = [];
+let score = 0;
+function initBoard() {
+  board = [
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 0, 0],
+  ];
+  addTile();
+  addTile();
+  renderBoard();
+}
+function addTile() {
+  let emptyTiles = [];
+  for (let i = 0; i < 4; i++) {
+    for (let j = 0; j < 4; j++) {
+      if (board[i][j] === 0) {
+        emptyTiles.push({ row: i, col: j });
+      }
+    }
+  }
+  if (emptyTiles.length > 0) {
+    let randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
+    board[randomTile.row][randomTile.col] = Math.random() < 0.9 ? 2 : 4;
+  }
+}
+function renderBoard() {
+  gameBoard.innerHTML = "";
+  for (let i = 0; i < 4; i++) {
+    for (let j = 0; j < 4; j++) {
+      const tileValue = board[i][j];
+      const tile = document.createElement("div");
+      tile.classList.add("tile");
+      if (tileValue > 0) {
+        tile.classList.add(`tile-${tileValue}`);
+        tile.textContent = tileValue;
+      }
+      gameBoard.appendChild(tile);
+    }
+  }
+  scoreDisplay.textContent = score;
+}
+function moveTiles(direction) {
+  let moved = false;
+  if (direction === "ArrowUp") {
+    for (let j = 0; j < 4; j++) {
+      for (let i = 1; i < 4; i++) {
+        if (board[i][j] !== 0) {
+          let k = i;
+          while (k > 0 && board[k - 1][j] === 0) {
+            board[k - 1][j] = board[k][j];
+            board[k][j] = 0;
+            k--;
+            moved = true;
+          }
+          if (k > 0 && board[k - 1][j] === board[k][j]) {
+            board[k - 1][j] *= 2;
+            score += board[k - 1][j];
+            board[k][j] = 0;
+            moved = true;
+          }
+        }
+      }
+    }
+  } else if (direction === "ArrowDown") {
+    for (let j = 0; j < 4; j++) {
+      for (let i = 2; i >= 0; i--) {
+        if (board[i][j] !== 0) {
+          let k = i;
+          while (k < 3 && board[k + 1][j] === 0) {
+            board[k + 1][j] = board[k][j];
+            board[k][j] = 0;
+            k++;
+            moved = true;
+          }
+          if (k < 3 && board[k + 1][j] === board[k][j]) {
+            board[k + 1][j] *= 2;
+            score += board[k + 1][j];
+            board[k][j] = 0;
+            moved = true;
+          }
+        }
+      }
+    }
+  } else if (direction === "ArrowLeft") {
+    for (let i = 0; i < 4; i++) {
+      for (let j = 1; j < 4; j++) {
+        if (board[i][j] !== 0) {
+          let k = j;
+          while (k > 0 && board[i][k - 1] === 0) {
+            board[i][k - 1] = board[i][k];
+            board[i][k] = 0;
+            k--;
+            moved = true;
+          }
+          if (k > 0 && board[i][k - 1] === board[i][k]) {
+            board[i][k - 1] *= 2;
+            score += board[i][k - 1];
+            board[i][k] = 0;
+            moved = true;
+          }
+        }
+      }
+    }
+  } else if (direction === "ArrowRight") {
+    for (let i = 0; i < 4; i++) {
+      for (let j = 2; j >= 0; j--) {
+        if (board[i][j] !== 0) {
+          let k = j;
+          while (k < 3 && board[i][k + 1] === 0) {
+            board[i][k + 1] = board[i][k];
+            board[i][k] = 0;
+            k++;
+            moved = true;
+          }
+          if (k < 3 && board[i][k + 1] === board[i][k]) {
+            board[i][k + 1] *= 2;
+            score += board[i][k + 1];
+            board[i][k] = 0;
+            moved = true;
+          }
+        }
+      }
+    }
+  }
+  if (moved) {
+    addTile();
+    renderBoard();
+  }
+}
+document.addEventListener("keydown", (event) => {
+  moveTiles(event.key);
+});
+initBoard();

style.css ADDED Viewed

	@@ -0,0 +1,99 @@

+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #faf8ef;
+}
+.container {
+  text-align: center;
+}
+.score-container {
+  font-size: 1.5em;
+  margin-bottom: 20px;
+}
+.game-board {
+  display: grid;
+  grid-template-columns: repeat(4, 100px);
+  grid-gap: 10px;
+  background-color: #bbada0;
+  padding: 10px;
+  border-radius: 5px;
+}
+.tile {
+  width: 100px;
+  height: 100px;
+  background-color: #eee4da;
+  color: #776e65;
+  font-size: 2.5em;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+}
+.tile.tile-2 {
+  background-color: #eee4da;
+}
+.tile.tile-4 {
+  background-color: #ede0c8;
+}
+.tile.tile-8 {
+  background-color: #f2b179;
+  color: white;
+}
+.tile.tile-16 {
+  background-color: #f59563;
+  color: white;
+}
+.tile.tile-32 {
+  background-color: #f67c5f;
+  color: white;
+}
+.tile.tile-64 {
+  background-color: #f65e3b;
+  color: white;
+}
+.tile.tile-128 {
+  background-color: #edcf72;
+  color: white;
+}
+.tile.tile-256 {
+  background-color: #edcc61;
+  color: white;
+}
+.tile.tile-512 {
+  background-color: #edc850;
+  color: white;
+}
+.tile.tile-1024 {
+  background-color: #edc53f;
+  color: white;
+}
+.tile.tile-2048 {
+  background-color: #edc22e;
+  color: white;
+}
+.instructions {
+  margin-top: 20px;
+  font-size: 1em;
+  color: #776e65;
+}