Я надеюсь, что это поможет вам начать.

ичок в javascript и пытаюсь изучить обнаружение столкновений для весла.

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

(Мне не нужно знать о кирпичах, я просто должен создать простую анимированную / игровую страницу JavaScript).

О, а вы знаете, какой я использую javascript? потому что иногда это совершенно другое кодирование, поэтому очень сложно найти мой тип кодирования, из которого я могу следовать ..

Спасибо!

 var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-50;
var dx = 2;
var dy = -2;
var ball = drawBall 
var paddleHeight = 10;
var paddleWidth = 50;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = true;
  } else if (e.keyCode == 37) {
    leftPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = false;
  } else if (e.keyCode == 37) {
    leftPressed = false;
  }
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(x,y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "coral";
    ctx.fill();
    ctx.closePath();
}

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, 400, 50, 10);
    ctx.fillStyle = "lightcoral";
    ctx.fill();
    ctx.closePath();
}

function collisionDetector (){

}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();

    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }

    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7;
    }
    x += dx;
    y += dy;
}
setInterval(draw, 10);
 ParkerHalo27 окт. 2017 г., 11:55
!!!java! = javascript !!!

Ответы на вопрос(1)

ью: если расстояние между центрами больше, чем сумма половины ширины прямоугольника и радиуса шара - столкновения нет.
Если вам не нужна оценка идеального пикселя, проще рассматривать круг как квадрат. В том случае, когда указанное расстояние меньше суммы - у вас есть столкновение.
Я только нахожусь в процессе написания клона Space Invaders (я любитель, я делаю это для удовольствия):Ссылка Codepen, где я написал столкновение с идеальным пикселем, пример / выдержка ниже (столкновение определяется, если существует между двумя действующими лицами (определено в другом месте в коде - проверьте ссылку Codepen для деталей):

collision: function(actor1, actor2) {
    var X = Math.abs(actor1.x - actor2.x);
    var Y = Math.abs(actor1.y - actor2.y);
    if (Y >= INI.COLLISION_SAFE) return false;
    if (X >= INI.COLLISION_SAFE) return false;
    var w1 = parseInt(actor1.width / 2, 10);
    var w2 = parseInt(actor2.width / 2, 10);
    var h1 = parseInt(actor1.height / 2, 10);
    var h2 = parseInt(actor2.height / 2, 10);
    var T = Math.sqrt((h1 + h2) ** 2 + (w1 + w2) ** 2);
    if (
        MIN(X, Y) === 0 &&
        MAX(X, Y) >= MAX(actor1.width, actor1.height, actor2.width, actor2.height)
    )
        return false;
    var D = Math.sqrt(X ** 2 + Y ** 2);
    if (D > T) return false; // not close enough
    var minWH = MIN(w1, w2, h1, h2);
    if (D <= minWH) return true; //ultra close
    ///////// pixel perfect evaluation ////////////
    var act1 = new Vector(actor1.x, actor1.y);
    var act2 = new Vector(actor2.x, actor2.y);
    var direction = act1.direction(act2);
    var point1 = new Vector(
        actor1.x + direction.x * w1,
        actor1.y + direction.y * h1
    );
    var point2 = new Vector(
        actor2.x - direction.x * w2,
        actor2.y - direction.y * h2
    );
    var x = MIN(point1.x, point2.x);
    var y = MIN(point1.y, point2.y);
    var w = MAX(point1.x, point2.x) - MIN(point1.x, point2.x);
    var h = MAX(point1.y, point2.y) - MIN(point1.y, point2.y);
    if (w === 0 && h === 0) return false;
    if (w === 0) {
        w = MIN(w1, w2);
        x = x - w;
        w = w * 2;
    }
    if (h === 0) {
        h = MIN(h1, h2);
        y = y - h;
        h = h * 2;
    }
    var area = new Square(x, y, w, h);
    var area1 = new Square(
        (area.x - actor1.x) * direction.x + w1 * direction.x,
        (area.y - actor1.y) * direction.y + h1 * direction.y,
        area.w,
        area.h
    );
    var area2 = new Square(
        (area.x - actor2.x) * direction.x * -1 + w2 * direction.x * -1,
        (area.y - actor2.y) * direction.y * -1 + h2 * direction.y * -1,
        area.w,
        area.h
    );
    var CTX1 = LAYER.temp;
    var CTX2 = LAYER.temp2;
    ENGINE.draw("temp", 0, 0, SPRITE[actor1.name]);
    ENGINE.draw("temp2", 0, 0, SPRITE[actor2.name]);
    var data1 = CTX1.getImageData(area1.x, area1.y, area1.w, area1.h);
    var data2 = CTX2.getImageData(area2.x, area2.y, area2.w, area2.h);
    var DL = data1.data.length;
    var index;
    for (index = 3; index < DL; index += 4) {
        if (data1.data[index] > 0 && data2.data[index] > 0) return true;
    }
    return false;
},

Если в этом примере после того, как я проверил, перекрываются ли прямоугольники (как описано выше), я вычисляю, какие части спрайта фактически перекрываются, то проверяю, есть ли у каждого из спрайтов непрозрачные пиксели в одном и том же месте (в перекрывающемся прямоугольнике).
Я также рекомендую использовать requestAnimationFrame () вместо setInterval ().
Я надеюсь, что это поможет вам начать.

Ваш ответ на вопрос