如何让移动 function 在我的游戏中工作？

Question

<!doctype html>
<html>

<head>
  <title>Get home</title>

  <style>
    table {
      border-collapse: collapse;
    }

    td {
      border: solid 1px #888;
      width: 30px;
      height: 30px;
      font-family: sans-serif;
      font-size: calc(30px/4.0 + 1px);
      text-align: center;
    }

    .cell0 {
      background: #88ff99;
    }

    .cell1 {
      background: #116615;
    }

    .player {
      background: #e11;
    }

    .home {
      background: white;
    }

    .status {
      font-size: 15pt;
      font-family: Arial;
    }
  </style>

  <script>
    //  Will be initialised to a 2-dimensional array
    var gameBoard = [];

    // Size of game
    var size = 10;

    // Current fuel and supply
    var fuel = 20;
    var supply = 0;

    // Current position of player (start in the bottom-right)
    var positionX = size - 1;
    var positionY = size - 1;

    // Whether we are playing the game
    var playing = true;

    // Use this function to make a move where x and y represent the direction of
    // a move, e.g.
    //    move(-1, 0) means going left
    //    move(1, 0) means going right
    //    move(0, -1) means going up
    //    move(0, 1) means going down
    function move(x, y) {
      //
      if (positionX + x < size && positionX + x >= 0 &&
        positionY + y < size && positionY + y >= 0) {
        // Move is within the board

      

      }
    }

    // Use this function to update the status
    function updateStatus() {
      document.getElementById("fuel").innerHTML = fuel;
      document.getElementById("store").innerHTML = supply;
    }

    function setup() {
      // Set the gameboard to be empty
      gameBoard = [];

      var board = document.getElementById("board");

      for (var i = 0; i < size; i++) {

        // Create a new row of the game
        var htmlRow = document.createElement("tr");
        board.appendChild(htmlRow);
        var row = []

        for (var j = 0; j < size; j++) {
          // Chose a random type of cell
          var type = Math.round(Math.random());
          var cell = document.createElement("td");
          cell.className = "cell" + type;

          // Add the cell to the row
          htmlRow.appendChild(cell);
          row.push(cell);
        }

        gameBoard.push(row);
      }

      // Setup the player
      gameBoard[size-1][size-1].className = "player";

      // Setup the home
      gameBoard[0][0].className = "home";
      gameBoard[0][0].innerHTML = "HOME";

      // Register the listener and update the state
      updateStatus();
      document.body.addEventListener("keydown", keyEvent);
    }
  </script>

</head>

<body onLoad="setup();">

  <div class="status">Fuel: <span id="fuel"></div>
  <div class="status">Store: <span id="store"></div>

  <table id="board"></table>

  <div class="status" id="outcome"></div>

</body>

</html>

I'm creating a simple game on HTML, and I can't think of how to get the move function to work, while it automatically updates the game and the map, is anyone able to help.我正在 HTML 上创建一个简单的游戏，我想不出如何让 function 工作，同时它会自动更新游戏和 map，是否有人能够提供帮助。 I'm new to coding and I genuinely cant fathom what code to put in to make the move function work, whether it be using arrow keys or creating buttons to make the entity move.我是编码新手，我真的无法理解要输入什么代码才能使移动 function 工作，无论是使用箭头键还是创建按钮来使实体移动。

Answer 1

Without making too many changes to the way you have things set up, I added a function that will add the "player" class to elements based on "wsad" or arrow key presses.在没有对设置方式进行太多更改的情况下，我添加了一个 function，它将“播放器”class 添加到基于“wsad”或箭头键的元素中。

<!doctype html>
<html>
<head>
  <title>Get home</title>
  <style>
    table {
      border-collapse: collapse;
    }
    td {
      border: solid 1px #888;
      width: 30px;
      height: 30px;
      font-family: sans-serif;
      font-size: calc(30px/4.0 + 1px);
      text-align: center;
    }
    .cell0 {
      background: #88ff99;
    }
    .cell1 {
      background: #116615;
    }
    .player {
      background: #e11;
    }
    .home {
      background: white;
    }
    .status {
      font-size: 15pt;
      font-family: Arial;
    }
  </style>
  <script>
    //  Will be initialised to a 2-dimensional array
    var gameBoard = [];

    // Size of game
    var size = 10;

    // Current fuel and supply
    var fuel = 20;
    var supply = 0;

    // Current position of player (start in the bottom-right)
    var positionX = size - 1;
    var positionY = size - 1;

    // Whether we are playing the game
    var playing = true;

    function move(direction) {
      let x = positionX;
      let y = positionY;
      switch (direction) {
        case "left":
          x--;
          break;
        case "right":
          x++;
          break;
        case "up":
          y--;
          break;
        case "down":
          y++;
          break;
      }
      const validMove =
        x < size &&
        x >= 0 &&
        y < size &&
        y >= 0;
      if (!validMove) return console.error(
        "What are you trying to do?" + "\n" +
        "Break the implied rules of a game?" + "\n" +
        "I expect more from you" + "\n" +
        "That's a wall you dummy!"
      );
      positionX = x;
      positionY = y;
      gameBoard[y][x].classList.add("player");
    }

    // Use this function to update the status
    function updateStatus() {
      document.getElementById("fuel").innerText = fuel;
      document.getElementById("store").innerText = supply;
    }

    function keyEvent(e) {
      const keyMoveDict = {
        "ArrowLeft": "left",
        "ArrowRight": "right",
        "ArrowUp": "up",
        "ArrowDown": "down",
        "a": "left",
        "d": "right",
        "w": "up",
        "s": "down",
      }
      const movement = keyMoveDict[e.key];
      if (movement) move(movement);
    }

    function setup() {
      // Set the gameboard to be empty
      gameBoard = [];

      var board = document.getElementById("board");
      for (var i = 0; i < size; i++) {
        // Create a new row of the game
        var htmlRow = document.createElement("tr");
        board.appendChild(htmlRow);
        var row = []

        for (var j = 0; j < size; j++) {
          // Chose a random type of cell
          var type = Math.round(Math.random());
          var cell = document.createElement("td");
          cell.className = "cell" + type;

          // Add the cell to the row
          htmlRow.appendChild(cell);
          row.push(cell);
        }

        gameBoard.push(row);
      }

      // Setup the player
      gameBoard[size-1][size-1].className = "player";

      // Setup the home
      gameBoard[0][0].className = "home";
      gameBoard[0][0].innerHTML = "HOME";

      // Register the listener and update the state
      updateStatus();
      document.body.addEventListener("keydown", keyEvent);
    }
  </script>

</head>

<body onLoad="setup();">

  <div class="status">Fuel: <span id="fuel"></span></div>
  <div class="status">Store: <span id="store"></span></div>

  <table id="board"></table>

  <div class="status" id="outcome"></div>

</body>

</html>

如何让移动 function 在我的游戏中工作？

问题描述

1 个解决方案

解决方案1
0 2021-11-23 18:14:40

如何让移动 function 在我的游戏中工作？

问题描述

1 个解决方案

解决方案1 0 2021-11-23 18:14:40

解决方案1
0 2021-11-23 18:14:40