CODEWITHSUNDEEP
javascriptfunction
Viktor Kostiv
Viktor Kostiv

Reputation: 1

Object does not appear in JS

I am trying to create a typical breakout game on JS. Everything till now works perfectly, except that paddle which I am trying to draw does not appear on the screen. Below I provided jscode. Could you suggest what could be a problem?

var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");

var x = canvas.width/2;
var y = canvas.height-30;

var dx = 2;
var dy = -2;

var ballRadius = 10;

/* Defining the parameters of the paddle and its starting point */

var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;

/* Control variables */

var rightPressed = false;
var leftpressed = false;

/* Functions */

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    x += dx;
    y +=dy;

    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }

    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }
}

/* Speed of the ball */ 

setInterval(draw, 10);

Upvotes: 0

Views: 44

Answers (1)

Akash Karnatak
Akash Karnatak

Reputation: 738

Your forgot to call drawPaddle() function inside draw() function. Try this,

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();
    x += dx;
    y +=dy;

    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }

    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }
}

Upvotes: 0

Related Questions