2

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 20;

function draw() {
  ctx.beginPath();
  ctx.arc(240, 160, ballRadius, 20, Math.PI * 2, true);
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.closePath();
}
setInterval(draw, 10);
* {
  padding: 0;
  margin: 0;
}
canvas {
  background: #eee;
  display: block;
  margin: 0 auto;
}
<canvas id="myCanvas" width="480" height="320"></canvas>

Нужно в Draw что то добавить, добавляю но безрезультатно.

1
  • 2
    Очевидно, нужно менять координаты мячика, а уж как их менять — вам виднее
    – andreymal
    2 июл 2016 в 19:12

1 ответ 1

5

Ваш код перерисовывает мяч на одном и том же месте снова и снова. Ведь его координаты (240, 160) не меняются. Причём, перерисовывается поверх самого себя, не стирая «экран» после предыдущего кадра. Вот пример, где эти косяки исправлены:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 20;
var ball = {x:240, y: 160}  // координаты центра мяча
  ,speed = {x: -10, y: 28}   // скорость мяча
  ,box = {x: 480, y: 200}   // ширина/высота коробки
;

function update(p) { // обновляет координаты
  ball[p] += speed[p]/10; // с учётом скорости
  if( ball[p] > box[p]) { // вылетели за дальний конец коробки?
    ball[p] = 2 * box[p] - ball[p];
    speed[p] *= -1;
  } else if( ball[p] < 0) { // вылетели за другой конец?
    ball[p] = -ball[p];
    speed[p] *= -1;
  }
}  

function draw() {
  update('x');
  update('y');

  ctx.clearRect(0, 0, box.x, box.y); // очистили экран
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ballRadius, 20, Math.PI * 2, true);
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.closePath();
}
setInterval(draw, 10);
*{padding:0;margin:0;}canvas{background:#eee}
<canvas id="myCanvas" width="480" height="200"></canvas>

Для игровой физики рекомендую использовать готовые библиотеки. Например, посмотрите демо matter.js и сделайте что-нибудь простое, по инструкции.

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.