Erstellen Sie ein 2048 Webspiel mit jQuery

Einführung

2048 ist ein äußerst beliebtes und einfach zu lernendes Spiel, das die Welt erobert hat. Wenn Sie es noch nicht gespielt haben, können Sie es auf Ihrem Mobiltelefon herunterladen und es ausprobieren. In diesem Projekt werden Sie lernen, wie Sie mit HTML, CSS, JavaScript und jQuery eine Webversion des 2048-Spiels erstellen.

Entdecken Sie den Entwicklungsprozess einer Webanwendung.
Erfahren Sie, wie Sie die Anwendung für Mobilgeräte responsiv gestalten, um Bildschirme verschiedener Größen zu unterstützen und Layout und Initialisierung zu handhaben.
Nutzen Sie JavaScript und jQuery, um die Spiel Logik zu schreiben, die Bewegung der Blöcke zu implementieren und das Spielende zu bestimmen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt werden Sie lernen:

Wie Sie das Seitenlayout eines 2048-Webspiels mit HTML und CSS erstellen
Wie Sie die Spiel Logik in JavaScript und jQuery implementieren
Wie Sie die Bewegung und das Zusammenführen von Blöcken handhaben
Wie Sie das Webspiel in einem Webbrowser testen und ausführen

🏆 Errungenschaften

Nach Abschluss dieses Projekts können Sie:

Eine responsive Webanwendung für das 2048-Spiel entwickeln
JavaScript und jQuery nutzen, um die Spiel Logik und -Funktionen zu schreiben
Die Bewegung und das Zusammenführen von Blöcken im Spiel implementieren
Ein Webspiel in einem Webbrowser testen und ausführen

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/switch_stmts("Switch Statements") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/cond_stmts -.-> lab-445688{{"2048 Webspiel mit jQuery"}} javascript/switch_stmts -.-> lab-445688{{"2048 Webspiel mit jQuery"}} javascript/loops -.-> lab-445688{{"2048 Webspiel mit jQuery"}} javascript/array_methods -.-> lab-445688{{"2048 Webspiel mit jQuery"}} javascript/obj_manip -.-> lab-445688{{"2048 Webspiel mit jQuery"}} javascript/dom_select -.-> lab-445688{{"2048 Webspiel mit jQuery"}} javascript/dom_manip -.-> lab-445688{{"2048 Webspiel mit jQuery"}} javascript/event_handle -.-> lab-445688{{"2048 Webspiel mit jQuery"}} javascript/dom_traverse -.-> lab-445688{{"2048 Webspiel mit jQuery"}} end

Entwicklungsvorbereitung

Abgesehen vom Seitenstil kann das 2048-Spiel als zweidimensionales Array abstrahiert werden. Im Anfangszustand müssen zwei Zahlen zufällig generiert werden. Die zufällig generierten Zahlen können nur 2 oder 4 sein. In der folgenden Implementierung werden wir die Auftretenswahrscheinlichkeit von 2 und 4 gleich setzen. Natürlich können Sie auch die Wahrscheinlichkeit, dass 4 erscheint, kleiner machen.

0 0 0 0
2 0 0 0
0 0 2 0

Als nächstes, wenn ich eine Pfeiltaste drücke, bewegen sich die Zahlen in diese Richtung und benachbarte Zellen mit der gleichen Zahl werden zusammengeführt. Dann wird eine weitere Zahl zufällig generiert. Wenn wir beispielsweise auf "Nach oben" → "Nach links" → "Nach oben" drücken, kann die Schnittstelle wie folgt aussehen:

8 0 2 0
0 0 0 0
0 4 0 0

Auf diese Weise bewegen und vereinigen wir kontinuierlich Zahlen, bis Zahlen nicht mehr zusammengeführt werden können oder bis die Zahl 2048 erscheint, wodurch das Spiel endet. Wie Sie sehen können, liegt der Kern des Spiels in der Manipulation dieses zweidimensionalen Arrays.

Projekt-Dateistruktur

Zunächst müssen wir die folgende Dateistruktur unter dem Pfad ~/project erstellen:

~/project
 |__ index.html
 |__ main.js
 |__ support.js
 |__ showanimation.js
 |__ style.css

jquery.min.js befindet sich bereits unter dem Pfad ~/project, sodass Sie es direkt verwenden können.

Jetzt starten wir offiziell mit unseren Codierungsaufgaben! Wir beginnen mit dem Seitenlayout und vervollständigen schrittweise Module wie die Initialisierung des Schachbretts und die Bewegung der Zahlblöcke.

Seitenlayout

Wie Sie vielleicht bemerkt haben, besteht das 2048-Spiel aus 16 Quadraten. Im Folgenden werden wir mit div + CSS diese 4x4 Zellen zeichnen. Fügen Sie den folgenden Code zur Datei index.html hinzu:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>2048 Game</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="showanimation.js"></script>
    <script type="text/javascript" src="support.js"></script>
  </head>
  <body>
    <header>
      <h1>2048 Game</h1>
      <a href="javascript:new_game();" id="new_game_button">New Game</a>
      <p>score: <span id="score">0</span></p>
    </header>
    <div id="grid_container">
      <div class="grid_cell" id="grid_cell_0_0"></div>
      <div class="grid_cell" id="grid_cell_0_1"></div>
      <div class="grid_cell" id="grid_cell_0_2"></div>
      <div class="grid_cell" id="grid_cell_0_3"></div>

      <div class="grid_cell" id="grid_cell_1_0"></div>
      <div class="grid_cell" id="grid_cell_1_1"></div>
      <div class="grid_cell" id="grid_cell_1_2"></div>
      <div class="grid_cell" id="grid_cell_1_3"></div>

      <div class="grid_cell" id="grid_cell_2_0"></div>
      <div class="grid_cell" id="grid_cell_2_1"></div>
      <div class="grid_cell" id="grid_cell_2_2"></div>
      <div class="grid_cell" id="grid_cell_2_3"></div>

      <div class="grid_cell" id="grid_cell_3_0"></div>
      <div class="grid_cell" id="grid_cell_3_1"></div>
      <div class="grid_cell" id="grid_cell_3_2"></div>
      <div class="grid_cell" id="grid_cell_3_3"></div>
    </div>
  </body>
</html>

Als nächstes müssen wir der Seite und jeder Zelle Stile hinzufügen. Fügen Sie den folgenden Code zur Datei style.css hinzu:

body {
  padding: 50px 0px;
}

header {
  display: block;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

header h1 {
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
  margin: 0 auto;
  color: #776e65;
  padding: 20px 0px;
}

header #new_game_button {
  display: block;
  margin: 0px auto;
  width: 100px;
  padding: 10px 10px;
  background-color: #8f7a66;
  font-family: Arial;
  color: white;
  border-radius: 10px;
  text-decoration: none;
}

header #new_game_button:hover {
  background-color: #9f8b77;
}

header p {
  font-family: Arial;
  font-size: 25px;
  margin: 5px auto;
}

#grid_container {
  width: 460px;
  height: 460px;
  padding: 20px;
  margin: 0px auto;
  background-color: #bbada0;
  border-radius: 10px;
  position: relative;
}

.grid_cell {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  background-color: #ccc0b3;
  position: absolute;
}

.number_cell {
  border-radius: 6px;
  font-family: Arial;
  font-weight: bold;
  font-size: 60px;
  line-height: 100px;
  text-align: center;
  position: absolute;
}

Nach Abschluss dieses Schritts öffnen Sie die Datei index.html mit der Vorschaufunktion.

Dann sollten wir das folgende Ergebnis sehen:

✨ Lösung prüfen und üben

Initialisierung des Schachbretts

Mit der zunehmenden Popularität von Mobilgeräten müssen wir die Anpassung an verschiedene Bildschirmgrößen berücksichtigen.

Zu Beginn des Spiels müssen wir zwei Zufallszahlen auf dem Schachbrett generieren. Dies wird durch JavaScript-Code erreicht.

Fügen Sie in main.js Folgendes hinzu:

var board = new Array(); // Die Zahlen in jeder Zelle
var score = 0; // Der Punktestand
var has_conflicted = new Array(); // Flag zur Lösung aufeinanderfolgender Eliminierungen
var startx = 0; // x-Koordinate des Startpunkts beim Berühren des Mobilbildschirms
var starty = 0; // y-Koordinate des Startpunkts beim Berühren des Mobilbildschirms
var endx = 0; // x-Koordinate des Endpunkts beim Berühren des Mobilbildschirms
var endy = 0; // y-Koordinate des Endpunkts beim Berühren des Mobilbildschirms
var success_string = "Success";
var gameover_string = "GameOver";

// Initialisiere das Schachbrett, nachdem das HTML-Dokument geladen wurde
$(document).ready(function () {
  // Behandle die Anpassung
  prepare_for_mobile();
  new_game();
});

// Starte ein neues Spiel
function new_game() {
  // Initialisiere das Schachbrett
  init();
  // Generiere Zahlen in zwei zufälligen Zellen
  generate_one_number();
}

// Initialisierung
function init() {
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      var grid_cell = $("#grid_cell_" + i + "_" + j);
      grid_cell.css("top", get_pos_top(i, j));
      grid_cell.css("left", get_pos_left(i, j));
    }
  }
  for (var i = 0; i < 4; i++) {
    board[i] = new Array();
    has_conflicted[i] = new Array();
    for (var j = 0; j < 4; j++) {
      board[i][j] = 0;
      has_conflicted[i][j] = false;
    }
  }
  update_board_view();
  score = 0;
  update_score(score);
}

// Aktualisiere die Ansicht des Schachbretts
function update_board_view() {
  $(".number_cell").remove();
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      $("#grid_container").append(
        '<div class="number_cell" id="number_cell_' + i + "_" + j + '"></div>'
      );
      var number_cell = $("#number_cell_" + i + "_" + j);
      if (board[i][j] == 0) {
        number_cell.css("width", "0px");
        number_cell.css("height", "0px");
        number_cell.css("top", get_pos_top(i, j) + cell_side_length / 2);
        number_cell.css("left", get_pos_left(i, j) + cell_side_length / 2);
      } else {
        number_cell.css("width", cell_side_length);
        number_cell.css("height", cell_side_length);
        number_cell.css("top", get_pos_top(i, j));
        number_cell.css("left", get_pos_left(i, j));
        number_cell.css(
          "background-color",
          get_number_background_color(board[i][j])
        );
        number_cell.css("color", get_number_color(board[i][j]));
        number_cell.text(board[i][j]);
      }
      has_conflicted[i][j] = false;
    }
  }
  $(".number_cell").css("line-height", cell_side_length + "px");
  $(".number_cell").css("font-size", 0.6 * cell_side_length + "px");
}

// Generiere eine Zahl in einer zufälligen Zelle
function generate_one_number() {
  if (nospace(board)) {
    return false;
  }
  // Zufällige Position
  var randx = parseInt(Math.floor(Math.random() * 4));
  var randy = parseInt(Math.floor(Math.random() * 4));
  var time = 0;
  while (time < 50) {
    if (board[randx][randy] == 0) {
      break;
    }
    randx = parseInt(Math.floor(Math.random() * 4));
    randy = parseInt(Math.floor(Math.random() * 4));
    time++;
  }
  if (time == 50) {
    for (var i = 0; i < 4; i++) {
      for (var j = 0; j < 4; j++) {
        if (board[i][j] == 0) {
          randx = i;
          randy = j;
        }
      }
    }
  }
  // Zufällige Zahl
  var rand_number = Math.random() < 0.5 ? 2 : 4;
  // Zeige die Zufallszahl an der zufälligen Position an
  board[randx][randy] = rand_number;
  show_number_with_animation(randx, randy, rand_number);
  return true;
}

// Behandle die Anpassung
function prepare_for_mobile() {
  if (document_width > 500) {
    grid_container_width = 500;
    cell_side_length = 100;
    cell_space = 20;
  }
  $("#grid_container").css("width", grid_container_width - 2 * cell_space);
  $("#grid_container").css("height", grid_container_width - 2 * cell_space);
  $("#grid_container").css("padding", cell_space);
  $("#grid_container").css("border-radius", 0.02 * grid_container_width);
  $(".grid_cell").css("width", cell_side_length);
  $(".grid_cell").css("height", cell_side_length);
  $(".grid_cell").css("border-radius", 0.02 * grid_container_width);
}

✨ Lösung prüfen und üben

Verbesserung der Spiel Logik

Als nächstes müssen wir die Logik des Spiels verbessern, einschließlich der Bewegung der Zahlkacheln und der Überprüfung, ob das Spiel vorbei ist. Ergänzen Sie den folgenden Code in support.js:

document_width = window.screen.availWidth; // Die Breite des Bildschirms
grid_container_width = 0.92 * document_width; // Die Breite des Spielfelds
cell_side_length = 0.18 * document_width; // Die Größe jeder Rasterzelle
cell_space = 0.04 * document_width; // Der Abstand zwischen jeder Rasterzelle

// Hole den Abstand der entsprechenden Rasterzelle von der oberen Kante des Spielfelds
function get_pos_top(i, j) {
  return cell_space + i * (cell_space + cell_side_length);
}

// Hole den Abstand der entsprechenden Rasterzelle von der linken Kante des Spielfelds
function get_pos_left(i, j) {
  return cell_space + j * (cell_space + cell_side_length);
}

// Hole die Hintergrundfarbe der entsprechenden Zahl
function get_number_background_color(number) {
  switch (number) {
    case 2:
      return "#eee4da";
      break;
    case 4:
      return "#ede0c8";
      break;
    case 8:
      return "#f2b179";
      break;
    case 16:
      return "#f59563";
      break;
    case 32:
      return "#f67c5f";
      break;
    case 64:
      return "#f65e3b";
      break;
    case 128:
      return "#edcf72";
      break;
    case 256:
      return "#edcc61";
      break;
    case 512:
      return "#9c0";
      break;
    case 1024:
      return "#33b5e5";
      break;
    case 2048:
      return "#09c";
      break;
    case 4096:
      return "#a6c";
      break;
    case 8192:
      return "#93c";
      break;
  }
  return "black";
}

// Hole die Farbe der entsprechenden Zahl
function get_number_color(number) {
  if (number <= 4) return "#776e65";
  return "white";
}

// Überprüfe, ob es auf dem Spielfeld leere Rasterzellen gibt
function nospace(board) {
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      if (board[i][j] == 0) {
        return false;
      }
    }
  }
  return true;
}

✨ Lösung prüfen und üben

Verbesserung der Animationseffekte

Als nächstes müssen wir die Animationseffekte verbessern, einschließlich der Anzeige von Zahlkacheln und der Aktualisierung des Punktestands. Dieser Code befindet sich alle in showanimation.js:

// Animation für die Anzeige von Zahlkacheln
function show_number_with_animation(i, j, rand_number) {
  var number_cell = $("#number_cell_" + i + "_" + j);
  number_cell.css("background-color", get_number_background_color(rand_number));
  number_cell.css("color", get_number_color(rand_number));
  number_cell.text(rand_number);
  number_cell.animate(
    {
      width: cell_side_length,
      height: cell_side_length,
      top: get_pos_top(i, j),
      left: get_pos_left(i, j)
    },
    50
  );
}

// Aktualisierung des Punktestands
function update_score(score) {
  $("#score").text(score);
}

✨ Lösung prüfen und üben

Verschieben von Zahlkacheln

Nachdem das Layout und die Initialisierung abgeschlossen sind, werden wir nun die Funktionalität implementieren, um Zahlkacheln zu verschieben und zu eliminieren, bis das Spiel erfolgreich abgeschlossen oder verloren ist.

Fügen Sie den folgenden Code in main.js hinzu:

// Lausche auf die Bewegung der Pfeiltasten auf der Tastatur
$(document).keydown(function (event) {
  if ($("#score").text() == success_string) {
    new_game();
    return;
  }
  switch (event.keyCode) {
    case 37: // Links
      event.preventDefault();
      if (move_left()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
      break;
    case 38: // Oben
      event.preventDefault();
      if (move_up()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
      break;
    case 39: // Rechts
      event.preventDefault();
      if (move_right()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
      break;
    case 40: // Unten
      event.preventDefault();
      if (move_down()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
      break;
    default:
      break;
  }
});

// Lausche auf das touchstart-Ereignis auf Mobilgeräten
document.addEventListener("touchstart", function (event) {
  startx = event.touches[0].pageX;
  starty = event.touches[0].pageY;
});

// Lausche auf das touchmove-Ereignis auf Mobilgeräten
document.addEventListener("touchmove", function (event) {
  event.preventDefault();
});

// Lausche auf das touchend-Ereignis auf Mobilgeräten
document.addEventListener("touchend", function (event) {
  endx = event.changedTouches[0].pageX;
  endy = event.changedTouches[0].pageY;

  var deltax = endx - startx;
  var deltay = endy - starty;
  if (
    Math.abs(deltax) < 0.3 * document_width &&
    Math.abs(deltay) < 0.3 * document_width
  ) {
    return;
  }
  if ($("#score").text() == success_string) {
    new_game();
    return;
  }
  // Bewegung auf der x-Achse
  if (Math.abs(deltax) >= Math.abs(deltay)) {
    if (deltax > 0) {
      // Nach rechts verschieben
      if (move_right()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
    } else {
      // Nach links verschieben
      if (move_left()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
    }
  } else {
    // Bewegung auf der y-Achse
    if (deltay > 0) {
      // Nach unten verschieben
      if (move_down()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
    } else {
      // Nach oben verschieben
      if (move_up()) {
        setTimeout("generate_one_number()", 210);
        setTimeout("is_gameover()", 300);
      }
    }
  }
});

// Nach links verschieben
function move_left() {
  if (!can_move_left(board)) {
    return false;
  }
  // Nach links verschieben
  for (var i = 0; i < 4; i++) {
    for (var j = 1; j < 4; j++) {
      if (board[i][j] != 0) {
        for (var k = 0; k < j; k++) {
          if (board[i][k] == 0 && no_block_horizontal(i, k, j, board)) {
            show_move_animation(i, j, i, k);
            board[i][k] = board[i][j];
            board[i][j] = 0;
            break;
          } else if (
            board[i][k] == board[i][j] &&
            no_block_horizontal(i, k, j, board) &&
            !has_conflicted[i][k]
          ) {
            show_move_animation(i, j, i, k);
            board[i][k] += board[i][j];
            board[i][j] = 0;
            // Punkte hinzufügen
            score += board[i][k];
            update_score(score);
            has_conflicted[i][k] = true;
            break;
          }
        }
      }
    }
  }
  setTimeout("update_board_view()", 200);
  return true;
}

// Nach rechts verschieben
function move_right() {
  if (!can_move_right(board)) {
    return false;
  }
  // Nach rechts verschieben
  for (var i = 0; i < 4; i++) {
    for (var j = 2; j >= 0; j--) {
      if (board[i][j] != 0) {
        for (var k = 3; k > j; k--) {
          if (board[i][k] == 0 && no_block_horizontal(i, j, k, board)) {
            show_move_animation(i, j, i, k);
            board[i][k] = board[i][j];
            board[i][j] = 0;
            break;
          } else if (
            board[i][k] == board[i][j] &&
            no_block_horizontal(i, j, k, board) &&
            !has_conflicted[i][k]
          ) {
            show_move_animation(i, j, i, k);
            board[i][k] += board[i][j];
            board[i][j] = 0;
            // Punkte hinzufügen
            score += board[i][k];
            update_score(score);
            has_conflicted[i][k] = true;
            break;
          }
        }
      }
    }
  }
  setTimeout("update_board_view()", 200);
  return true;
}

// Nach oben verschieben
function move_up() {
  if (!can_move_up(board)) {
    return false;
  }
  // Nach oben verschieben
  for (var j = 0; j < 4; j++) {
    for (var i = 1; i < 4; i++) {
      if (board[i][j] != 0) {
        for (var k = 0; k < i; k++) {
          if (board[k][j] == 0 && no_block_vertical(j, k, i, board)) {
            show_move_animation(i, j, k, j);
            board[k][j] = board[i][j];
            board[i][j] = 0;
            break;
          } else if (
            board[k][j] == board[i][j] &&
            no_block_vertical(j, k, i, board) &&
            !has_conflicted[k][j]
          ) {
            show_move_animation(i, j, k, j);
            board[k][j] += board[i][j];
            board[i][j] = 0;
            // Punkte hinzufügen
            score += board[k][j];
            update_score(score);
            has_conflicted[k][j] = true;
            break;
          }
        }
      }
    }
  }
  setTimeout("update_board_view()", 200);
  return true;
}

// Nach unten verschieben
function move_down() {
  if (!can_move_down(board)) {
    return false;
  }
  // Nach unten verschieben
  for (var j = 0; j < 4; j++) {
    for (var i = 2; i >= 0; i--) {
      if (board[i][j] != 0) {
        for (var k = 3; k > i; k--) {
          if (board[k][j] == 0 && no_block_vertical(j, i, k, board)) {
            show_move_animation(i, j, k, j);
            board[k][j] = board[i][j];
            board[i][j] = 0;
            break;
          } else if (
            board[k][j] == board[i][j] &&
            no_block_vertical(j, i, k, board) &&
            !has_conflicted[k][j]
          ) {
            show_move_animation(i, j, k, j);
            board[k][j] += board[i][j];
            board[i][j] = 0;
            // Punkte hinzufügen
            score += board[k][j];
            update_score(score);
            has_conflicted[k][j] = true;
            break;
          }
        }
      }
    }
  }
  setTimeout("update_board_view()", 200);
  return true;
}

// Überprüfen, ob das Spiel erfolgreich oder verloren ist
function is_gameover() {
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      if (board[i][j] == 2048) {
        update_score(success_string);
        return;
      }
    }
  }
  if (nospace(board) && nomove(board)) {
    gameover();
  }
}

// Aktualisiere den Text "Spiel vorbei", wenn das Spiel endet
function gameover() {
  update_score(gameover_string);
}

✨ Lösung prüfen und üben

Verbesserung von support.js

Als nächstes müssen wir den Code in support.js verbessern, einschließlich der Überprüfung, ob sich die Kacheln bewegen können oder noch bewegt werden können.

// Überprüfen, ob man nach links bewegen kann
function can_move_left(board) {
  for (var i = 0; i < 4; i++) {
    for (var j = 1; j < 4; j++) {
      if (board[i][j] != 0) {
        if (board[i][j - 1] == 0 || board[i][j] == board[i][j - 1]) {
          return true;
        }
      }
    }
  }
  return false;
}

// Überprüfen, ob man nach rechts bewegen kann
function can_move_right(board) {
  for (var i = 0; i < 4; i++) {
    for (var j = 2; j >= 0; j--) {
      if (board[i][j] != 0) {
        if (board[i][j + 1] == 0 || board[i][j] == board[i][j + 1]) {
          return true;
        }
      }
    }
  }
  return false;
}

// Überprüfen, ob man nach oben bewegen kann
function can_move_up(board) {
  for (var j = 0; j < 4; j++) {
    for (var i = 1; i < 4; i++) {
      if (board[i][j] != 0) {
        if (board[i - 1][j] == 0 || board[i - 1][j] == board[i][j]) {
          return true;
        }
      }
    }
  }
  return false;
}

// Überprüfen, ob man nach unten bewegen kann
function can_move_down(board) {
  for (var j = 0; j < 4; j++) {
    for (var i = 2; i >= 0; i--) {
      if (board[i][j] != 0) {
        if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j]) {
          return true;
        }
      }
    }
  }
  return false;
}

// Überprüfen, ob es in horizontaler Richtung keine Blockaden gibt
function no_block_horizontal(row, col1, col2, board) {
  for (var i = col1 + 1; i < col2; i++) {
    if (board[row][i] != 0) {
      return false;
    }
  }
  return true;
}

// Überprüfen, ob es in vertikaler Richtung keine Blockaden gibt
function no_block_vertical(col, row1, row2, board) {
  for (var i = row1 + 1; i < row2; i++) {
    if (board[i][col] != 0) {
      return false;
    }
  }
  return true;
}

// Überprüfen, ob sich noch bewegt werden kann
function nomove(board) {
  if (
    can_move_down(board) ||
    can_move_up(board) ||
    can_move_right(board) ||
    can_move_left(board)
  ) {
    return false;
  }
  return true;
}

✨ Lösung prüfen und üben

Spiel fertigstellen

Schließlich müssen wir den Code in showanimation.js vervollständigen, einschließlich der Anzeige der Bewegungsanimation und der Zusammenführungsanimation.

// Animationseffekt, wenn eine Zelle sich bewegt
function show_move_animation(fromx, fromy, tox, toy) {
  var number_cell = $("#number_cell_" + fromx + "_" + fromy);
  number_cell.animate(
    {
      top: get_pos_top(tox, toy),
      left: get_pos_left(tox, toy)
    },
    200
  );
}

Damit ist unsere Webversion von 2048 fertig.

✨ Lösung prüfen und üben

Ausführen und Testen

Öffnen Sie index.html in einem Webbrowser.

Um die folgenden Effekte zu sehen, klicken Sie auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE und wechseln Sie zur Registerkarte "Web 8080".

✨ Lösung prüfen und üben

Zusammenfassung

In diesem Projekt haben wir eine Webversion des 2048-Spiels mit HTML, CSS, JavaScript und jQuery implementiert. Wir haben auch gelernt, wie man es mit Mobilgeräten kompatibel macht. Es wird angenommen, dass Sie durch dieses Projekt Ihr Verständnis der Front-End-Technologie vertiefen und Ihre Fähigkeiten bei der umfassenden Anwendung verbessern können.