5

Сделал функцию, которая двигает персонажа в разные стороны, вот пример:

function handleInput() {
window.addEventListener("keydown", function(event) {
if (event.keyCode == 65)
    ractive.set({'playerX': ractive.get( 'playerX' ) - 1});
if (event.keyCode == 68)
    ractive.set({'playerX': ractive.get( 'playerX' ) + 1});
if (event.keyCode == 87)
    ractive.set({'playerY': ractive.get( 'playerY' ) - 1});
if (event.keyCode == 83)
    ractive.set({'playerY': ractive.get( 'playerY' ) + 1});
});

не буду вдаваться в подробности, из примера видно, что движение осуществляется при событии keyDown - таким образом, при нажатии и удерживании клавиши, сначала игрок смещается на 1 пиксель, и только потом - через долю секунды - продолжает двигаться дальше, не знаю можно ли решить проблему, но мне эта реализация кажется не совсем верной. Как правильно реализовать передвижение спрайта? Может у кого-то есть ссылки на полезные статьи по этому поводу?

8
  • Я рекомендую сразу не изобретать велосипеды, а перейти на один из фреймворков для разработки игр на js.... например на phaser .... а вот популярные html5gameengine.com 31 мая 2016 в 18:58
  • 9
    я рекомендую поизобретать велосипеды, чтобы понять как делаются игры, а еще для того, чтобы кто-нибудь (я) рассказал тебе, например про habrahabr.ru/post/131931, чтобы ты не изобретал математические велосипеды с нуля 31 мая 2016 в 19:46
  • 1
    @strangeqargo а еще не писать на существующем языке программирования, а сделать свой, для начала, чтоб понять, как работают и делаются языки программирования. А потом уже на нем делать игры....... бред же 31 мая 2016 в 19:48
  • 1
    Движение в любом случае нужно делать через вектора, а обход препятствий через либу можно или просто переписать алгоритм A* или Дейкстры из википедии. Да и для поворота в js удобно использовать atan2 1 июн 2016 в 6:47
  • 1
    jsfiddle.net/181g794f Вот пример, из этого вопроса ru.stackoverflow.com/questions/446817/… Но его нужно немного поправить, там вектор нормали нужно добавлять иначе по диагонали скорость больше 1 июн 2016 в 7:00

3 ответа 3

0

Просили написать ответ тут. В общем там много косяков лень все править, писал на скорую руку в основном копи пастом из того примера что в комментах писал, по этому много дублирующих методов и переменных, но я как бы на работе так что извиняйте =)

Это ссыль http://codepen.io/korolariya/pen/WxbPJo

(function($) {

  $(document).ready(function() {

function keydown(event) {

  if (player.pressed.indexOf(event.which) === -1) {
    switch (event.which) {
      case 37: // left
        player.vec_add(player.velocity, {
          x: -1,
          y: 0
        });
        break;

      case 38: // top
        player.vec_add(player.velocity, {
          x: 0,
          y: -1
        });
        break;

      case 39: // right
        player.vec_add(player.velocity, {
          x: 1,
          y: 0
        });
        break;

      case 40: // bottom
        player.vec_add(player.velocity, {
          x: 0,
          y: 1
        });
        break;
    }

    player.pressed.push(event.which);
  }
}

function keyup(event) {
  var index;
  if ((index = player.pressed.indexOf(event.which)) >= 0) {
    player.pressed.splice(index, 1);
    switch (event.which) {
      case 37: // left
        player.vec_sub(player.velocity, {
          x: -1,
          y: 0
        });
        break;

      case 38: // top
        player.vec_sub(player.velocity, {
          x: 0,
          y: -1
        });
        break;

      case 39: // right
        player.vec_sub(player.velocity, {
          x: 1,
          y: 0
        });
        break;

      case 40: // bottom
        player.vec_sub(player.velocity, {
          x: 0,
          y: 1
        });
        break;
    }
  }
}
window.addEventListener("keydown", keydown, false);
window.addEventListener("keyup", keyup, false);
var player = {
  selector: $('#player'),
  position: {
    x: 110,
    y: 110
  },
  target: {
    x: 0,
    y: 0
  },
  click: {
    x: 0,
    y: 0
  },
  normal: {
    x: 0,
    y: 0
  },
  way: {
    x: 0,
    y: 0
  },
  speed: 3,
  collapse: 5,
  pressed: [],
  velocity: {
    x: 0,
    y: 0
  },
  vec_add: function(a, b) {
    a.x += b.x;
    a.y += b.y;
  },
  vec_sub: function(a, b) {
    a.x -= b.x;
    a.y -= b.y;
  }

};

player.move = function(pos) {
  if (pos != undefined) {
    this.position.x = pos.x;
    this.position.y = pos.y;
  }
  this.selector.css("left", (this.position.x - 5) + 'px');
  this.selector.css("top", (this.position.y - 5) + 'px');
};
player.normalMove = function() {
  this.countWay();
  this.position.x = this.position.x + (this.normal.x * this.speed);
  this.position.y = this.position.y + (this.normal.y * this.speed);
  this.move();
};
player.keyMove = function() {
  if(this.velocity.x || this.velocity.y != 0){
  var normal = {x:0,y:0};
  normal.x = this.speed * this.velocity.x / Math.sqrt(Math.pow(this.velocity.x, 2) + Math.pow(this.velocity.y, 2));
  normal.y = this.speed * this.velocity.y / Math.sqrt(Math.pow(this.velocity.x, 2) + Math.pow(this.velocity.y, 2));
  this.vec_add(this.position, normal);
  this.move();
  }
};
player.setNormal = function(e) {
  this.click.x = e.clientX;
  this.click.y = e.clientY;
  this.target.x = this.click.x - this.position.x;
  this.target.y = this.click.y - this.position.y;
  this.normal.x = this.target.x / Math.sqrt(Math.pow(this.target.x, 2) + Math.pow(this.target.y, 2));
  this.normal.y = this.target.y / Math.sqrt(Math.pow(this.target.x, 2) + Math.pow(this.target.y, 2));
  this.countWay();
};
player.untilgo = function() {
  return this.way.x > this.collapse || this.way.y > this.collapse;
};

player.countWay = function() {
  //тут можно вычислять расстояние
  //  Math.sqrt(Math.pow(this.position.x - this.click.x)+Math.pow(this.position.y - this.click.y));
  this.way.x = Math.abs(this.position.x - this.click.x);
  this.way.y = Math.abs(this.position.y - this.click.y);
};

player.move();
var timer;
var fps = 60;

function step() {
  setTimeout(function() {
    requestAnimationFrame(step);
    if (player.untilgo()) {
      player.normalMove();
    }
    player.keyMove();

  }, 1000 / fps);
}
step();
$(document).click(function(e) {
  player.setNormal(e);
});

  });

})
(jQuery);
3
  • 1. vec_add и vec_sub - хватило бы только первой. 2. Если после клика мышью нажать кнопку перемещения на клавиатуре, он будет двигаться вечно.
    – Qwertiy
    2 июн 2016 в 12:40
  • да там написано много косяков =) По мимо этого, но как бы суть уловить можно. Так то решается добавлением в player параметра run = true/false 2 июн 2016 в 12:41
  • Вот тут ещё полезная дока если кому будет интересно docs.unity3d.com/ru/current/Manual/… 2 июн 2016 в 18:51
0

Подписаться на keydown и keyup. В первом выставлять флаг движения в данном направлении, во втором - снимать. Само движение осуществлять по таймеру, проверяя, нажата ли соответствующая кнопка.

https://jsfiddle.net/fwg53xc8/6/ в хроме или FF (из-за ES6):

~function() {
  var LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40;
  var dirs = {[LEFT]: 0, [UP]: 0, [RIGHT]: 0, [DOWN]: 0};
  var SPEED = 10;
  var x = 0, y = 0;

  $(document).keydown(function(e) {
    dirs[e.keyCode] = 1;
  }).keyup(function(e) {
    dirs[e.keyCode] = 0;
  });

  setInterval(function() {
    var $div = $("div");

    x -= dirs[LEFT] * SPEED;
    x += dirs[RIGHT] * SPEED;
    y -= dirs[UP] * SPEED;
    y += dirs[DOWN] * SPEED;

    $div.css('transform', `translate(${x}px, ${y}px)`);
  }, 100);
}();
div {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -.5em -.5em 0 0;
  background: red;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  transform: translate(0, 0);
  transition: transform 100ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

requestAnimationFrame

Зачем всем сдался requestAnimationFrame вместо таймера?

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

Ещё раз. У меня сделано для вполне конкретного случая. Есть некое клетчатое поле, в клетках которого располагаются всякие предметы. За одно перемещение игрок либо остаётся в текущей клетке, либо перемещается в одну из 8 соседних. В таком варианте меня не интересует постоянство скорости при движении по диагонали, меня интересует обеспечение перехода из клетки в клетку.

18
  • движение по таймеру? О_о 31 мая 2016 в 19:13
  • 2
    Угу. Это конечно хорошо, но с интервалом есть проблемы некоторые, и для таких целей вроде как есть requestAnimationFrame ..... все равно велосипеды - как-то не стоит изобретать, имхо)) 31 мая 2016 в 19:26
  • @NicolasChabanovsky, зачем портить форматирование? К тому же, jQuery потерялось при копировании :(
    – Qwertiy
    1 июн 2016 в 6:50
  • @АлексейШиманский, в данном случае не вижу преимуществ у requestAnimationFrame.
    – Qwertiy
    1 июн 2016 в 6:50
  • @Qwertiy Это автоматическое форматирование (кнопка «привести в порядок»). Вы можете обновить фрагмент кода, при необходимости. 1 июн 2016 в 6:52
0

Вам необходимо перед каждым движением заведомо останавливать спрайт что предовратит движение после отпускания какой из либо клавиш.

реализовать например можно так:

var cnv = document.querySelector("#cnv");
var ctx = cnv.getContext("2d");
var frameID = 0;
var dt = 0;
var currentFrame = 0;
var lastFrame = currentFrame;
var keys = {};

var Vec2 = function(x, y) {
  this.x = x; 
  this.y = y; 
  
  this.add = function(other) {
    this.x += other.x;
    this.y += other.y;
    return this;
  };  
  this.multScalar = function(scalar) {
    this.x *= scalar;
    this.y *= scalar;
    return this;
  };
};

var rect = {
  fillColor: "#f12",	
  position: new Vec2(0, 0),
  velocity: new Vec2(0, 0),
  w: 10,
  h: 10,
  move: function(dt) {
  	this.position.add(this.velocity.multScalar(dt));  
  },
  stop: function() {
  	this.velocity.x = 0;
	this.velocity.y = 0;
  },
  render: function() {
    ctx.clearRect(0, 0, cnv.width, cnv.height);
    ctx.fillStyle = this.fillColor;
    ctx.fillRect(this.position.x, this.position.y, this.w, this.h);
  }
};

function renderScene() {
  currentFrame = new Date();
  dt = currentFrame - lastFrame;	//	miliseconds
  lastFrame = currentFrame;  
  rect.stop();  
  if (keys[37]) {
  	rect.velocity.x = -0.2;
  }
  if (keys[39]) {
  	rect.velocity.x = 0.2;
  }
  if (keys[38]) {
  	rect.velocity.y = -0.2;
  }
  if (keys[40]) {
  	rect.velocity.y = 0.2;
  }  
  rect.move(dt);
  rect.render();
  frameID = requestAnimationFrame(renderScene);
}

window.onkeydown = function(event) {
  keys[event.keyCode] = true;
};

window.onkeyup = function(event) {
  keys[event.keyCode] = false;
};

frameID = requestAnimationFrame(renderScene);
#cnv { border: 1px solid black; }
<canvas width="300" height = "150" id="cnv"></canvas>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.