Есть ли способ исправить фазирование Matter.js? - PullRequest
Новая
       31

Есть ли способ исправить фазирование Matter.js?

0 голосов
/ 23 октября 2019

Я нашел библиотеку Javascript под названием Rough.js. Он был использован для рисования элементов холста. Поэтому я связал его с Matter.js, чтобы сделать простое физическое моделирование. Но вскоре я обнаружил необоснованное количество ошибок и глюков, но никаких ошибок консоли. Это началось с того, что половина пола не выступала в качестве пола. Так просто. Я только удвоил ширину пола. Затем ящики начали плавно переходить друг в друга, исчезая в воздухе и появляясь случайным образом.

Я пытался просмотреть вики Matter.js, но форума нет. Я пытался найти людей с похожими проблемами, но никого не было.

Код слишком длинный для размещения здесь, поэтому я дам вам ссылку на CodePen. Я также предоставлю небольшой пример кода.

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


Event Listener:


document.body.addEventListener("click", e => {

   height = (Math.random() * (50 - 10)) + 10

   width = (Math.random() * (50 - 10)) + 10

   color = colorArray[Math.floor(Math.random() * colorArray.length)]

   box = Bodies.rectangle(e.clientX, e.clientY, width, height)

   boxArray.push({height, width, color, box})

   World.add(engine.world, box)

})

Animate Loop:

function animateLoop () {

   c.clearRect(0, 0, canvas.width, canvas.height)

   groundPos = ground.position

   r.rectangle(groundPos.x, groundPos.y, innerWidth, 30, {roughness: 0.1, fillStyle: "dashed", fill: "gray"})

   boxArray.forEach(item => {

      boxPos = item.box.position

      r.rectangle(boxPos.x, boxPos.y, item.width, item.height, {roughness: 1, fill: item.color})

   })

   Engine.update(engine)

   requestAnimationFrame(animateLoop)

}

Код: https://codepen.io/BrianTheExpert/pen/JjjWyEN

Демонстрация: https://codepen.io/BrianTheExpert/full/JjjWyEN

Я ожидал, что появятся ящики с похожим поведением, но после игрына несколько минут я понял, что это нереально.

...