0
Ich mache ein Spiel und das Spiel braucht ein Paddel, das einen Ball reflektiert, aber als ich den Code schrieb, um festzustellen, ob der Ball das Paddel schlägt, spiegelte das Paddel nicht den Ball, Kann mir jemand helfen?Paddel reflektiert keinen Ball
HTML
<!DOCTYPE html>
<html>
<head>
<title>First Game - Section 1 to 2</title>
</head>
<body>
<center>
<canvas id="canvas" width="800" height="600" style="background-color: #000"></canvas>
</center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="main.JS"></script>
</body>
</html>
JavaScript
/* VARIABLES */
var canvas; //canvas
var ctx; //context
var ballX; //balls x pos
var ballY; //balls y pos
var ballSpeedX; //balls speed in x direction
var ballSpeedY; //balls speed in Y direction
var paddleX; //paddles x pos
var paddleY; //paddles y pos
const PADDLE_WIDTH = 100; //paddles width
const PADDLE_HEIGHT = 10; //paddles height
const BRICK_WIDTH = 100; //width of bricks
const BRICK_HEIGHT = 50; //height of bricks
var brickGride = [];
var mouseX = 0;
var mouseY = 0;
/* WHEN DOCUMENT IS READY */
$("document").ready(function() {
//set values to variables
canvas = $("#canvas")[0]; //call canvas
ctx = canvas.getContext("2d"); //get context
ballX = 200;
ballY = 100;
ballSpeedX = 3;
ballSpeedY = 3;
paddleX = canvas.width/2 - PADDLE_WIDTH/2; //center paddle
paddleY = canvas.height - 40; // 560 (40px from bottom of canvas);
var fps = 120; //set fps
setInterval(function() {
draw(); //draw objects
animate(); //animte objects
collision(); //detect collision
$(canvas).bind("mousemove", paddleControl); //move paddle
}, 1000/fps);
});
/* FUNCTIONS */
function draw() {
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall(ballX, ballY, 10, "white"); //call function that draws ball
drawPaddle(paddleX, paddleY, PADDLE_WIDTH, PADDLE_HEIGHT, "white"); //call function that draws paddle
}
function animate() {
//animate ball
ballX += ballSpeedX;
ballY += ballSpeedY;
}
function collision() {
//check if ball hits wall
//x walls
if (ballX >= canvas.width) { //right
ballSpeedX = -ballSpeedX;
}
if (ballX <= 0) { //left
ballSpeedX = -ballSpeedX;
}
//y walls
if (ballY <= 0) { //top
ballSpeedY = -ballSpeedY;
}
if (ballY >= canvas.height) { //bottom
ballReset();
}
//Detect if ball hits paddle
//get paddles top, bottom, right, and left sides
var paddleTop = paddleY; //top
var paddleBottom = paddleTop + PADDLE_HEIGHT; //bottom
var paddleRight = paddleLeft + PADDLE_WIDTH; //right
var paddleLeft = paddleX; //left
if (ballY > paddleTop && // below the top of paddle
ballY < paddleBottom && // above bottom of paddle
ballX > paddleLeft && // right of the left side of paddle
ballX < paddleRight) { // left of the left side of paddle
ballSpeedY *= -1;
var paddleCenter = paddleX + PADDLE_WIDTH/2; //center of paddle
var ballToPaddle = ballX - paddleCenter; //distance from the ball to the center of paddle
ballSpeedX = ballToPaddle * 0.35; //ball control
}
}
function paddleControl(e) {
//get mouse pos
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
mouseX = e.clientX - rect.left - root.scrollLeft;
mouseY = e.clientY - rect.top - root.scrollTop;
paddleX = mouseX;
}
function ballReset() {
ballX = canvas.width/2 - 5;
ballY = canvas.height/2 - 5;
}
/* OBJECT VARIABLES */
function drawBall(x, y, r, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fill();
}
function drawPaddle(x, y, w, h, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, h);
}
bieten den kürzesten Code, der Fehler reproduziert – madalinivascu