How do I get the move function to work in my game?

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. 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.

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.

<!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>

How do I get the move function to work in my game?

Question

1 answers

solution1
0 2021-11-23 18:14:40

How do I get the move function to work in my game?

Question

1 answers

solution1 0 2021-11-23 18:14:40

solution1
0 2021-11-23 18:14:40