Question

Breakout:

I have my code, it’s all worked out, but my paddle doesn’t move. Where is it wrong?
/* Constants for bricks */
var NUM_ROWS = 8;
var BRICK_TOP_OFFSET = 10;
var BRICK_SPACING = 2;
var NUM_BRICKS_PER_ROW = 10;
var BRICK_HEIGHT = 10;
var SPACE_FOR_BRICKS = getWidth() - (NUM_BRICKS_PER_ROW + 1) * BRICK_SPACING;
var BRICK_WIDTH = SPACE_FOR_BRICKS / NUM_BRICKS_PER_ROW;

/* Constants for ball and paddle */
var PADDLE_WIDTH = 80;
var PADDLE_HEIGHT = 15;
var PADDLE_OFFSET = 10;
var paddle;
var setPosition;
var rectangle;




var BALL_RADIUS = 15;
var ball;
var dx = 4;
var dy = 4;

function start(){
drawBricks();
drawBALL(BALL_RADIUS, Color.black, getWidth()/2, getHeight()/2);
mouseMoveMethod(pad);
ball = new Circle (BALL_RADIUS);
ball.setPosition(200, 200);
add(ball);
setTimer(draw,20);
}


function drawBricks(){
for(var j = 0; j < NUM_ROWS;j++){
for(var i = 0; i < NUM_BRICKS_PER_ROW; i++){
var brick = new Rectangle(BRICK_WIDTH, BRICK_HEIGHT);
if((j + 1) % 8 == 1 || (j + 1) % 8 == 2){

brick.setColor(Color.red);

} else if ((j + 1) % 8 == 3 || (j + 1) % 8 == 4){

brick.setColor(Color.orange);

}else if ((j + 1) % 8 == 5 || (j + 1) % 8 == 6){

brick.setColor(Color.green);

}else if ((j + 1) % 8 == 7 || (j + 1) % 8 == 0){

brick.setColor(Color.blue);
}
brick.setPosition(BRICK_WIDTH * i + BRICK_SPACING * (1 + i), BRICK_TOP_OFFSET + BRICK_HEIGHT * j + BRICK_SPACING * (1 + j));

add(brick);
}
}
}


function drawBALL(BALL_RADIUS, color, x, y){
ball = new Circle (BALL_RADIUS);
ball.setPosition(200, 200);
add(ball);
setTimer(draw, 20);
}

function draw(){
checkWalls();
ball.move(dx, dy);
}

function mousemoveMethod(pad){
ball = new Circle (BALL_RADIUS);
ball.setPosition(200, 200);
add(ball);
setTimer(draw, 20);
}


function checkWalls(){
if(ball.getX() + ball.getRadius() > getWidth()){
dx = -dx;
}

if(ball.getX() - ball.getRadius() < 0){
dx = -dx;
}

if(ball.getY() + ball.getRadius() > getHeight()){
dy = -dy;
}

if(ball.getY() - ball.getRadius() < 0){
dy = -dy;
}
var elem = getElementAt(ball.getX(), ball.getY() - ball.getRadius());
if (elem != null) {
dy = -dy;
remove(elem);
}
elem = getElementAt(ball.getX(), ball.getY() + ball.getRadius());
if (elem != null) {
dy = -dy;
}
}



function pad(e){
paddle = new Rectangle(PADDLE_WIDTH, PADDLE_HEIGHT);
paddle.setPosition(getWidth()/2 - paddle.getWidth()/ 2, getHeight() - paddle.getHeight() - PADDLE_OFFSET);
mouseMoveMethod(pad);
add(paddle);
}

Answer 1

There are a few issues in your code that are causing the paddle to not move:

The mouseMoveMethod function is not correctly defined. The parameter "pad" is not necessary and should be removed. Instead of calling mouseMoveMethod(pad) inside the pad function, you should call the mouseMoveMethod function directly.

Here's the corrected code for the pad function:

function pad(){
paddle = new Rectangle(PADDLE_WIDTH, PADDLE_HEIGHT);
paddle.setPosition(getWidth()/2 - paddle.getWidth()/2, getHeight() - paddle.getHeight() - PADDLE_OFFSET);
add(paddle);
mouseMoveMethod();
}

The mousemoveMethod function is unnecessary and can be removed. It is also misspelled, as the correct name is mouseMoveMethod (with a capital 'M'). You can directly include the code to handle the mouse movement inside the pad function.

Here's the corrected code for the mouseMoveMethod:

function mouseMoveMethod(){
onMouseMove(function(e){
paddle.setPosition(e.getX() - paddle.getWidth()/2, getHeight() - paddle.getHeight() - PADDLE_OFFSET);
});
}

By making these corrections, your paddle should now move according to the mouse movement.

Answer 2

In your code, I can see a few issues that might be causing your paddle not to move correctly:

In the mousemoveMethod(pad) function, you have defined pad as a parameter, but you're not using it within the function. Instead, you should use the e parameter, which represents the mouse event. Modify the function to use e instead of pad.

You are calling the mousemoveMethod(pad) function inside the pad(e) function. This creates an infinite loop and may cause unexpected behavior. You should remove the mousemoveMethod(pad) function call from the pad(e) function.

The mousemoveMethod(pad) function is creating a new circle and adding it to the canvas, which is unnecessary for moving the paddle. Instead, you should update the position of the existing paddle based on the mouse movement. Modify the mousemoveMethod(pad) function as follows:

javascript

Copy code

function mousemoveMethod(e) {

var x = e.getX();

paddle.setPosition(x - paddle.getWidth() / 2, getHeight() - paddle.getHeight() - PADDLE_OFFSET);

}

Make sure to update all the function calls and event listeners accordingly.

By making these changes, your paddle should move correctly based on the mouse movement.

I apologize for the confusion. It seems that there was a mistake in my previous response. In the provided code, the mouse event parameter is not being passed correctly to the mousemoveMethod function. To fix this issue, you can modify your code as follows:

In the pad(e) function, change the line mouseMoveMethod(pad); to mouseMoveMethod(e);. This will pass the mouse event parameter to the mousemoveMethod function correctly.

Modify the mousemoveMethod function to access the mouse coordinates correctly. Use e.getX() and e.getY() to get the current mouse position. Update the paddle position accordingly:

javascript

Copy code

function mousemoveMethod(e) {

var x = e.getX();

paddle.setPosition(x - paddle.getWidth() / 2, getHeight() - paddle.getHeight() - PADDLE_OFFSET);

}

With these changes, the paddle should move correctly based on the mouse position.