Как сделать события мыши в Matter. js более отзывчивыми? - PullRequest
Новая
       93

Как сделать события мыши в Matter. js более отзывчивыми?

0 голосов
/ 05 марта 2020

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

window.onload = function() {

  var Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Mouse = Matter.Mouse,
  MouseConstraint = Matter.MouseConstraint,
  Events = Matter.Events,
  Bodies = Matter.Bodies,
  Body = Matter.Body;

  var options = {
    friction: 0.5,
    restitution: 0.8,
    label: 'ball'
  };

  var canvas = document.querySelector('canvas'),
  cWidth = canvas.offsetWidth,
  cHeight = canvas.offsetHeight;

  var engine = Engine.create();

  var render =  Render.create({
      canvas: canvas,
      engine: engine,
      options: {
        width: cWidth,
        height: cHeight
      }
  });

  engine.world.gravity.y = 6;

  const margin = 31;

  var ballShape = Bodies.circle(200, 200, 80, options);
  var ground = Bodies.rectangle(cWidth / 2, cHeight + margin, cWidth, 60, { isStatic: true, restitution: -2, label: 'ground' });
  var leftWall = Bodies.rectangle(-1 * margin, cHeight, 60, cHeight * 4, { isStatic: true });
  var rigthWall = Bodies.rectangle(cWidth + margin, cHeight, 60, cHeight * 4, { isStatic: true });

  World.add(engine.world, [ballShape, ground, leftWall, rigthWall]);

  var canvasMouse = Mouse.create(document.querySelector('canvas'));

  var mConstraint = MouseConstraint.create(engine, { mouse: canvasMouse });

  Events.on(mConstraint, "mousedown", function(event) {

    console.log(mConstraint, event);

    let x, y, ball = mConstraint.body;

    if(typeof ball == 'undefined' || ball == null) return;
    if(ball.label === 'Rectangle Body') return;

    Body.setVelocity(ball, { x: ball.velocity.x, y: 0 });

    x = (ball.position.x - event.mouse.mousedownPosition.x) / 70;

    Body.applyForce(ball, { x: ball.position.x, y: ball.position.y }, { x, y: -2 });

  });

  Events.on(mConstraint, "mouseup", function(event) {

    let x, y, ball = mConstraint.body;

    if(typeof ball == 'undefined' || ball == null) return;
    else if(ball.label === 'Rectangle Body') return;

    Body.setVelocity(ball, { x: ball.velocity.x, y: 0 });

    x = (ball.position.x - event.mouse.mousedownPosition.x) / 70;

    Body.applyForce(ball, { x: ball.position.x, y: ball.position.y }, { x, y: -2 });

  });

  Events.on(engine, 'collisionStart', function(event) {
    console.log(event);
  });

  Engine.run(engine);

  Render.run(render);

}

Я подумал, что, возможно, Игра l oop была медленной, и, таким образом, события щелчка почему-то не регистрируются, но я искал документацию и обнаружил, что рендерер по умолчанию работает на 60FPS. , если кто-то сталкивался с такой проблемой раньше, я был бы благодарен за его / ее помощь. Чтобы подвести итог и подвести итог, моя проблема заключается в событиях щелчка на быстро движущемся веществе. js тел.

Вы можете найти игру, размещенную по этой ссылке: https://mosmekawy-dribble-ball.glitch.me

...