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

Я думаю, что движение и коллизия на оси x — это нормально, но я не могу заставить коллизию на оси y работать.

Глобальные переменные:

{ ctx: null, screenWidth: window.innerWidth - 50, screenHeight: window.innerHeight - 50, ballsArray: [], gravity: -10 } 

Метод рисования:

  draw() { //draw ball logic this.ctx = document.getElementById("myCanvas").getContext("2d"); this.ctx.clearRect(0, 0, this.screenWidth, this.screenHeight); //for each ball in the array this.ballsArray.forEach(ball ={amp}gt; { this.ctx.beginPath(); this.ctx.fillStyle = ball.color; ball.time  = 0.01; //saves new position for each axis let newPosX = ball.posX   ball.velX * ball.time; let newPosY = ball.posY   ball.velY - 0.5 * this.gravity * Math.pow(ball.time, 2); //checks if in the new position the ball will collide with margins //if so, it must slows down and get the inverse direction if ( //colision on x axis newPosX {amp}lt;= ball.radius || newPosX {amp}gt;= this.screenWidth - ball.radius ) { ball.velX = -ball.velX * 0.9; } if (newPosY {amp}lt;= ball.radius) { //colision on top // ball.velY = Math.abs(ball.velY * 0.9); ball.velY = -ball.velX * 0.9; } if (newPosY {amp}gt;= this.screenHeight - ball.radius) { //colition on bottom // ball.velY = -Math.abs(ball.velY * 0.9); ball.velY = -ball.velX * 0.9; } //updates de new position for each axis newPosX = ball.posX   ball.velX * ball.time; newPosY = ball.posY   ball.velY - 0.5 * this.gravity * Math.pow(ball.time, 2); //assigns the new positions to the position ball.posX = newPosX; ball.posY = newPosY; //draws the ball this.ctx.arc(ball.posX, ball.posY, ball.radius, 0, Math.PI * 2); this.ctx.closePath(); this.ctx.fill(); }); 

Метод создания мяча

  createBall() { //create a new ball let newBall = { //local vars id: this.ballsArray.length   1, color: this.getRandomColor(), radius: 10, posX: this.screenWidth / 2, posY: this.screenHeight / 1.5, velX: Math.floor(Math.random() * 11) - 5, //random between -5 and 5 velY: Math.floor(Math.random() * 10) - 10, //random between -5 and 0 time: 0, }; this.ballsArray.push(newBall); //add the ball to the array of balls } 

Jsfiddle: https://jsfiddle.net/pedroguia/y123spjh/77/

Как видите, мяч проходит через нижнее поле. Я не уверен, лежит ли проблема в уравнениях или самом обнаружении столкновений.

Педро Гия

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,