Функция прыгающего игра - PullRequest
Новая
       24

Функция прыгающего игра

0 голосов
/ 20 апреля 2019

В настоящее время я создаю игру с использованием 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 лопастей, он отскакивает от него.

...