Более плавное движение или диагональное движение - Javascript

Я пытаюсь заставить свой <div> двигаться плавнее или по диагонали. При нажатии двух клавиш, таких как W и D, происходит движение только в одном направлении. Я бы хотел, чтобы он двигался по диагонали. Есть ли способ сделать движение менее прерывистым. divShootingGallery является родительским <div> или игровой доской, а divShooter - временным ящиком. Я хотел бы использовать только JavaScript, а не jQuery.

Вот мой код:

function keyClick(){
  var divShooter = document.getElementById("divShooter");
  var divGameBoard = document.getElementById("divShootingGallery");

  switch(event.keyCode)
    {
    case 65://a to move left
      if (divShooter.offsetLeft > 0){
        //checks to make sure the left side of the shooter is not off the left side
        divShooter.style.left = divShooter.offsetLeft - 10 + "px";
      }else{
        divShooter.style.left = "0px";
      }
    break;
    case 68://d to move right
      if (divShooter.offsetLeft + divShooter.clientWidth < divGameBoard.clientWidth){
        //checks to make sure the right side of the shooter is not off the right side
        divShooter.style.left = divShooter.offsetLeft + 10 + "px";
        }
      else{
        divShooter.style.left = (divGameBoard.clientWidth - divShooter.clientWidth) + "px";
      }
    break;
    case 87://w key up for right player
      divShooter.style.top = divShooter.offsetTop - 10 + "px";
      if (divShooter.offsetTop <= 0){
      divShooter.style.top = "0";
      }
    break;
    case 83://s key down for right player
    divShooter.style.top = divShooter.offsetTop + 10 + "px";
      if (divShooter.offsetTop + divShooter.clientHeight >= divGameBoard.clientHeight){
      divShooter.style.top = divGameBoard.clientHeight - divShooter.clientHeight + "px";
      }
    break;
  }
}
window.addEventListener('keydown',keyClick,true);

html,body{
  height:100%;
  width:100%;
  }
#divShootingGallery{
  position:absolute;
  left:0;
  right:0;
  margin:auto;
  width:1000px;
  height:600px;
  background:bisque;
}
#divShooter{
  position:absolute;
  left:475px;
  bottom:0;
  width:50px;
  height:50px;
  background:blue;
}

<head>
  <link rel = "stylesheet" href = "style.css" type = "text/css"/>
  <script type = "text/javascript" src = "script.js"></script>
</head>
<body>
  <div id = "divShootingGallery">
    <div id = "divShooter"></div>
  </div>
</body>

javascript animation keyevent

10.03.2018 09:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

349

Ответы 2

btw "событие" отсутствует в вашей функции keyClick ()

function ketClick(event) {
  ...
}

10.03.2018 09:22

Пожалуйста, проверьте эту ветку, ваша проблема очень похожа: Движение игрока в javascript с socket.io

В основном вам нужно реализовать события keydown и keyup и отметить, какие клавиши в настоящее время не работают. Затем вы должны использовать эту информацию в цикле моделирования, чтобы правильно переместить объект. Цикл моделирования может быть таким таймером:

function moveObject() {
    ... check which keys are down and move accordingly ...
}

setInterval(function() {
    moveObject();
}, 100);

24.07.2018 04:16

Другие вопросы по теме

HTML5 и JavaScript: анимация прямоугольников?

SceneKit: анимация цвета фона SCNView происходит мгновенно, а не постепенно

Анимированный текст SVG Path не отображается в IE11

Создать одиночную анимацию из программы

Анимация для смены HTML-страницы

Как анимировать одиночный символ в js или с помощью jquery при наведении?

Анимированное навигационное меню

2D точка сверху вниз и перемещение и вращение щелчка в Unity3D

Проблема с анимацией Vue 2 при наведении курсора

По какой-то причине моя анимация не воспроизводится, когда я хочу, когда я прошу ее выполнить код

Более плавное движение или диагональное движение - Javascript

Ответы 2

Другие вопросы по теме

Похожие вопросы