Мяч отскакивает от центра, а не от края

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

Я уже пытался поставить радиус вместо x и y, но это совсем не помогло, на данный момент у меня нет идей.

Я ожидаю, что мяч отскочит от краев самого себя, а не от его центра.

<!DOCTYPE>
<html>

<head>
<title>Ball Bounce</title>

<style>


canvas {
border-width: 5px;
border-style: ridge;
border-color: #FF0000;
}

</style>

</head>


<body>

<canvas id = "testCanvas" width = "700" height = "400"></canvas>

<script>

var canvas = document.getElementById("testCanvas");
var ctx = canvas.getContext("2d");


var x = 300;
var y = 300;
var radius = 50;
var circleColour = "green";

var canvasWidth = canvas.width; 
var canvasHeight = canvas.height;
var dx = 2;
var dy = -2;




function circle(x, y, r, c) {
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI, false);
ctx.fillStyle = c;
ctx.fill()
ctx.closePath();
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
circle(x, y, radius, circleColour)
if (y<0 || y > canvasHeight){
dy = -dy;
}

if (x>canvasWidth || x<0){
dx = -dx;
}



 x = x + dx;
 y = y + dy;
}

setInterval(draw, 5.5);

</script>



</body>

</html>

javascript canvas

28.05.2019 18:33

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

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

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

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

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

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

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

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

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

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

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

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

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

I have already tried putting the radius instead of the x and y but that didn't help at all...

Вам нужно объединить радиус с x и y (или краями холста), чтобы убедиться, что мяч меняет направление на всех четырех границах.

if (y - radius < 0 || y + radius > canvasHeight) {
    dy = -dy;
}

if (x + radius > canvasWidth || x - radius < 0) {
    dx = -dx;
}

28.05.2019 18:39

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

ОШИБКА TypeError: fs.createWriteStream не является функцией Angular 6 Экспорт GIF

Проблема с перекрытием клипов

Как я могу заполнить текст в конце дуги?

Холст генерирует проблему с максимальным стеком вызовов

Как эффективно загружать и рисовать смайлики на холсте?

Как разрешить события указателя на фоне холста HTML5, а также разрешить ссылкам и кнопкам получать события указателя?

Canvas.move(id, x, y) не работает с клавишами со стрелками

Javascript Canvas, как удалить фигуру или область с изображения?

Как изменить цвет анимации на холсте с помощью javascript?

Canvas HTML - Гладкость между lineTo и кривой Безье

Мяч отскакивает от центра, а не от края

Ответы 1

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

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