Почему мой If l oop не перемещается для моего второго кода ключа - PullRequest
Новая
       0

Почему мой If l oop не перемещается для моего второго кода ключа

0 голосов
/ 05 февраля 2020

Мне нужно, чтобы вы помогли, я новичок в программировании. Почему мой второй ключевой код не работает. Я не уверен, что я должен напечатать это для моего, если я oop. Я хочу, чтобы моя программа была такой, чтобы при нажатии «1» она переходила на мою первую позицию, которую я установил. И если я нажму «2», он go вернется ко второй позиции, если текущая позиция будет на моей первой позиции, если нет, то go вернется к моей стартовой позиции.

Пожалуйста, помогите, ниже моя кодировка. 

        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8" />
            <!-- <meta http-equiv="refresh" content="30"> -->
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>Document</title>
            <style>

              body {
                height: 100%;
                width: 100%;
                background-image: url("TPHRG floorplan1.png");
                background-repeat: no-repeat;
                background-attachment: fixed;
                /* background-position: center; */
                background-size: 980px 400px, cover;
              }

              .robot_start_top {
                top: 280px;
                transition: top 2s;
              }

              .robot_start_left {
                position: fixed;
                left: 600px;
                transition: all 2s;
              }

              .robot_end_left {
                left: 570px;
              }

              .robot_end_top {
                top: 180px;
              }

              .robot1_start_left {
                position: fixed;
                left: 570px;
                transition: left 4s;
              }

              .robot1_end_left {
                left: 520px;
              }

              .robot2_start_left {
                position: fixed;
                left: 520px;
                transition: left 4s;
              }

              .robot2_end_left {
                left: 470px;
              }

              .robot3_end_down {
                top: 280px;
              }

              .robot3_end_right {
                left: 600px;
              }
            </style>
          </head>
          <body onkeydown="move(event)">
            <div class="robot_start_left robot_start_top" id="app">
              <img id="robot" style= width:30px; height:40px" src="pic_8.PNG">
            </div>

            <script>
              var move = function(event) {
                  if (event.keyCode === 49) {
                  const appDiv = document.getElementById("app");
                  setTimeout(function() {
                    appDiv.classList.add("robot_end_top");
                  }, 0);
                  setTimeout(function() {
                    appDiv.classList.add("robot_end_left");
                  }, 2000);

                }

                  if (event.keyCode === 50) {
                    if (document.getElementById("app") === appDiv.classList.add("robot_end_left"))
                    {
                      const appDiv = document.getElementById("app");
                    setTimeout(function() {
                      appDiv.classList.add("robot_end_top");
                    }, 0);
                    setTimeout(function() {
                      appDiv.classList.add("robot2_end_left");
                    }, 2000);
                }

                else{
                  const appDiv = document.getElementById("app");
                  setTimeout(function() {
                    appDiv.classList.add("robot3_end_down");
                  }, 2000);
                  setTimeout(function() {
                    appDiv.classList.add("robot3_end_right");
                  }, 0)
                  setTimeout(function() { window.location.reload(true); }, 4000);

                }}
                    };
                </script>
            </body>
          </html>

Ответы [ 2 ]

1 голос
/ 05 февраля 2020

Вы пропустили кавычку (") в атрибуте стиля тега img. Я исправляю это в приведенном ниже коде.

Важно

Я настоятельно рекомендую вам выполнить рефакторинг кода, чтобы его было легче строить и отлаживать. Я покажу, как это можно сделать в приведенном ниже коде. Методы "move" очень похожи, поэтому вы можете написать одну функцию для обработки всех их, вместо того, чтобы иметь отдельные методы, которые делают почти то же самое.

Реализация
Вам нужно удалить все классы, прежде чем добавлять новые, или у вас будет много классы в элементе * 1013. * Но если вы удалите классы, position: fixed исчезнет, ​​поэтому я разбил это свойство и поместил его под #app в CSS. Я также переместил ваши свойства "style" в CSS class - #robot.

Я также переименовал «move» в «moveRobot». Дает больше контекста, когда методы вызываются moveTopLeft в методе moveRobot.

I также убрал последний ноль в го e CSS классов, так что робот будет виден, когда вы запускаете сниппет.

Внизу я реализовал ваши мысли, но закомментировал все setTimeouts, так что легче следить за тем, что продолжается. Вы обнаружите, что если вы удалите классы, переход не произойдет, потому что #app не запоминает последнюю позицию left и top.

. Что вам действительно нужно, так это установить left и top в коде (например, appDiv.styles.left = '300px'), и отказаться от идеи добавления классов для робота. Я считаю, что это также сделает код короче. 

const appDiv = document.getElementById("app");  // Make this public so it's accessible everywhere;
var lastKeyStroke = -1;

var moveRobot = function(event) {
  const KEY_NUM_ONE = 49,
        KEY_NUM_TWO = 50;
         
  let keyStroke = event.keyCode;
  let pressedSameKeyTwice = keyStroke === lastKeyStroke; // not implemented

  removeAllPreviousClasses();    

  console.clear();

  if (keyStroke === KEY_NUM_ONE) {
    console.log("pressed 1");
    moveTopLeft();
  }
  else if (keyStroke === KEY_NUM_TWO) {
    console.log("pressed 2");
    moveTopRight();
  }
  else {
    console.log("pressed anything else");
    moveBottomRight();
  }
  
  lastKeyStroke = keyStroke;
}
      
function removeAllPreviousClasses() {
  appDiv.className = "";
}

function moveTopLeft() {
  //setTimeout(function() {
    appDiv.classList.add("robot_end_top");
  //}, 0);
  //setTimeout(function() {
    appDiv.classList.add("robot_end_left");
  //}, 2000);
}

function moveTopRight() {
  //setTimeout(function() {
    appDiv.classList.add("robot_end_top");
  //}, 0);
  //setTimeout(function() {
    appDiv.classList.add("robot2_end_left");
  //}, 2000);
}

function moveBottomRight() {
    //setTimeout(function() {
      appDiv.classList.add("robot3_end_down");
    //}, 2000);
    //setTimeout(function() {
      appDiv.classList.add("robot3_end_right");
    //}, 0)
//setTimeout(function() { window.location.reload(true); }, 4000);

    // removed excessive ending curly bracket
    // }
}
body {
  height: 100%;
  width: 100%;
  background-image: url("TPHRG floorplan1.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 980px 400px, cover;
}

#app {
  position: fixed;
  transition: left 2s, top 2s;
}

#robot { /* added these */
  width: 30px;
  height: 40px;
}

.robot3_end_down,   /* added these together */
.robot_start_top {
  top: 28px;
}

.robot_start_left {
  left: 60px;
}

.robot_end_left {
  left: 57px;
}

.robot_end_top {
  top: 18px;
}

.robot1_start_left {
  left: 57px;
}

.robot2_start_left,   /* added these together */
.robot1_end_left {
  left: 52px;
}

.robot2_end_left {
  left: 47px;
}

.robot3_end_right {
  left: 60px;
}
<body onkeydown="moveRobot(event)">
  <div class="robot_start_left robot_start_top" id="app">
    <img id="robot" src="https://simpleicon.com/wp-content/uploads/android.png">
  </div>
</body>
0 голосов
/ 05 февраля 2020

Были некоторые проблемы с условиями if else и const appDiv в коде, теперь он работает нормально 

var move = function (event) {
      const appDiv = document.getElementById("app");
      if (event.keyCode === 49) {

        setTimeout(function () {
          appDiv.classList.add("robot_end_top");
        }, 0);
        setTimeout(function () {
          appDiv.classList.add("robot_end_left");
        }, 2000);

      }

      else if (event.keyCode === 50) {
        console.log('2')

        if (document.getElementById("app") === appDiv.classList.add("robot_end_left")) {
          const appDiv = document.getElementById("app");
          setTimeout(function () {
            appDiv.classList.add("robot_end_top");
          }, 0);
          setTimeout(function () {
            appDiv.classList.add("robot2_end_left");
          }, 2000);
        }
      }

      else {
        console.log('3')
        const appDiv = document.getElementById("app");
        setTimeout(function () {
          appDiv.classList.add("robot3_end_down");
        }, 2000);
        setTimeout(function () {
          appDiv.classList.add("robot3_end_right");
        }, 0)
        setTimeout(function () { window.location.reload(true); }, 4000);

      }
    }
      ;
body {
      height: 100%;
      width: 100%;
      background-image: url("TPHRG floorplan1.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      /* background-position: center; */
      background-size: 980px 400px, cover;
    }

    .robot_start_top {
      top: 280px;
      transition: top 2s;
    }

    .robot_start_left {
      position: fixed;
      left: 600px;
      transition: all 2s;
    }

    .robot_end_left {
      left: 570px;
    }

    .robot_end_top {
      top: 180px;
    }

    .robot1_start_left {
      position: fixed;
      left: 570px;
      transition: left 4s;
    }

    .robot1_end_left {
      left: 520px;
    }

    .robot2_start_left {
      position: fixed;
      left: 520px;
      transition: left 4s;
    }

    .robot2_end_left {
      left: 470px;
    }

    .robot3_end_down {
      top: 280px;
    }

    .robot3_end_right {
      left: 600px;
    }
<body onkeydown="move(event)">
  <div class="robot_start_left robot_start_top" id="app">
    <img id="robot" style=width:30px; height:40px"
      src="https://petapixel.com/assets/uploads/2019/02/mooncompositemain-800x800.jpg">
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...