CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Shaya
Shaya

Reputation: 2932

Canvas "Pong" game paddles

As part of my studies i'm modifying some parts in an open-sourced "Pong" game I found online (created by Kushagra Agarwal).

Game's Fiddle

I'm trying to set a nicer look to the paddles:

  1. Achieve rounded corners instead of sharp edges. I found this article, but I don't know how to implement it to my code. Right now those are the paddles :

    function Paddle(pos) {
// Height and width
this.h = 30;
this.w = 600;

// Paddle's position
this.x = W / 2 - this.w / 2;
this.y = (pos == "top") ? 0 : H - this.h;
}

  2. Suggestions about using an actual image instead of just color filled paddles (or a reference to an article about that subject).

Thanks, Roy

Upvotes: 0

Views: 672

Answers (1)

user1693593
user1693593

Reputation:

Since your pads are slim and sleek you can take advantage of the low room for space and draw two rectangles on top of each other instead of using arcs etc. to create the illusion of roundness. Slightly offset the second rectangle, and since we use two it may be more efficient to add both to a path and fill them at the same time:

Updated fiddle

function draw() {
    paintCanvas();
    for(var i = 0; i < paddles.length; i++) {
        p = paddles[i];

        ctx.beginPath();                       // begin new path
        ctx.rect(p.x, p.y, p.w, p.h);          // main rect.
        ctx.rect(p.x-1, p.y+1, p.w+2, p.h-2);  // second, giving the round illus.
        ctx.fillStyle = "white";
        ctx.fill();                            // fill at the same time
    }

    ball.draw();
    update();
}

If you want something more complex you will benefit from first drawing it to an off-screen canvas, then drawImage() that canvas to your game screen (you can also do this with shown approach). But for this kind of game it is probably not worth the extra effort.

Here is an effective way of creating rounded rectangles (if you need a thicker pad).

I would rather spend more time optimizing the fillStyle so you can share the same fill style when drawing the ball and the pads as this is an expensive operation. You could also set the CSS background color to blue instead of filling canvas, then use clearRect() to clear it (not having to set fillStyle more than once).

Hope this helps!

Upvotes: 1

Related Questions