0
나는 게임을하고 있습니다. 공을 반사하는 패들이 필요합니다.하지만 공이 패들에 닿았을 때를 감지 할 코드를 작성했을 때 패들이 공을 반사하지 않았고, 누구든지 나를 도울 수 있습니까?패들이 공을 반사하지 않습니다
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>
자바 스크립트 귀하의 문제가 collision이 줄에 오타입니다
/* 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);
}
오류를 재생산하는 가장 짧은 코드를 제공합니다. – madalinivascu