Блог

Главная - Вопросы по программированию - Функция отскока игры для взлома кирпичей

Функция отскока игры для взлома кирпичей

#javascript #canvas #collision-detection

#javascript #холст #обнаружение столкновений

Вопрос:

В настоящее время я создаю игру для взлома кирпичей, используя JavaScript. Я пытаюсь сделать так, чтобы, когда мяч попадает в весло, он отскакивал от него. Я не могу разобраться в математике, связанной с этим, и был бы признателен за некоторую помощь.

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

 canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
//ball co-ordinates and speed
var ballX = 400;
var ballY = 300;
var ballSpeedX = 4;
var ballSpeedY = -12;

//paddle co-ordinates
var paddleX = 350;
var paddleY = 550;

var canvas;
var canvasContext;

//consts
const PADDLE_HEIGHT = 13;
const PADDLE_THICKNESS = 100;

window.onload = function() {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext('2d');
    var framesPerSecond = 30;
    setInterval(callBoth, 1000 / framesPerSecond);

    canvas.addEventListener('mousemove', function(evt) {
        var mousePos = calculateMousePos(evt);
        paddleX = mousePos.x - PADDLE_HEIGHT / 2; //	minus	half	height,	to	center	it
    });
};

function calculateMousePos(evt) {
    var rect = canvas.getBoundingClientRect();
    var root = document.documentElement;
    var mouseX = evt.clientX - rect.left - root.scrollLeft;
    var mouseY = evt.clientY - rect.top - root.scrollTop;
    return {
        x: mouseX,
        y: mouseY
    };
}

function drawEverything() {
    // canvas
    colorRect(0, 0, canvas.width, canvas.height, 'black');

    //paddle
    colorRect(paddleX, paddleY, PADDLE_THICKNESS, PADDLE_HEIGHT, 'blue');

    //ball
    canvasContext.fillStyle = 'white';
    canvasContext.beginPath();
    canvasContext.arc(ballX, ballY, 7, 0, Math.PI * 2, true);
    canvasContext.fill();
}

function callBoth() {
    moveEverything();
    drawEverything();
}

function moveEverything() {
    ballX = ballX   ballSpeedX;
    ballY = ballY   ballSpeedY;

    if (ballX > canvas.width || ballX < 0) {
        ballSpeedX = -ballSpeedX;
    }

    if (ballY > canvas.height || ballY < 0) {
        ballSpeedY = -ballSpeedY;
    }

    /*Here is where I would want the code for the ball bouncing off of the   
paddle to be.*/
}

function colorRect(leftX, topY, width, height, drawColor) {
    canvasContext.fillStyle = drawColor;
    canvasContext.fillRect(leftX, topY, width, height);
}  
 <canvas id='gameCanvas' width='800' height='600'></canvas>

То, что я ищу, это то, что когда мяч соприкасается с координатами X и Y лопастей, он отскакивает от него.

Комментарии:

1. Не могли бы вы умножить его тягу на -1?

2. @AnthonyRussell Да, это то, что я бы сделал, чтобы отразить это, но я не знаю, как это сделать, так это сделать математику, чтобы она определяла, когда мяч касается весла.