Canvas Animation. Solo Pong

StackOverflow https://stackoverflow.com/questions/15939274

Question

This is my first Web development class and I'm having trouble with functions and knowing which to call. My teacher gave us the following code:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Animation</title>
    <!-- include the jQuery UI stylesheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19                                                                                /themes/base/jquery-ui.css">
<!-- include the jQuery and jQuery UI JavaScript files -->
<script src="jquery.min.js"></script>
<script src="jquery-ui.js"></script>

<style>
canvas {
    border: 1px solid black;
}
</style>

Solo Pong

Finish this game by:
  • When the ball hits the paddle, it should bounce back (in a direction dependent on where on the paddle it hits).
  • When the ball hits the left-most wall, the player loses.
  • Prevent the paddle from moving out of the top/bottom of the screen.
  • bonus (2pts): Provide buttons "faster" and "slower" (outside of the canvas) which increase/decrease the speed of the ball.

<canvas id="mycanvas" width="300" height="300"> d </canvas>

<script>
// global variables

var context;
// width/height of the canvas
var width;
var height;

// position and direction of the ball
var x = 100;
var y = 180;
var dx = 2;
var dy = 2;

// paddle
var paddley; // y location
var paddleh; // height
var paddlew; // width

// keyboard input
var upPressed = false; // is the user pressing up?
var downPressed = false; // is the user pressing down?

// setup canvas and animation timer 
function init() {
    context = $("#mycanvas")[0].getContext("2d");
    width = $("#mycanvas").width();
    height = $("#mycanvas").height();
    return setInterval(draw, 10); // every 10 milliseconds, draw will be called.
}

// called when a key is pressed
function onKeyDown(evt) {
    if (evt.keyCode == 38) upPressed = true; // 38 is code for up button
    else if (evt.keyCode == 40) downPressed = true; // 40 is code for down button
}

//called when a key is released
function onKeyUp(evt) {
if (evt.keyCode == 38) upPressed = false;
else if (evt.keyCode == 40) downPressed = false;
}

// attaches the key methods to the document.
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

// clear the screen to prepare for drawing a new frame
function clear() {
    context.clearRect(0, 0, width, height);
}

// draw a circle at x,y with radius r
function circle(x,y,r) {
  context.beginPath();
  context.arc(x, y, r, 0, Math.PI*2, true);
  context.closePath();
  context.fill();
}

// draw a filled rectangle at x,y with width,height
function rect(x,y,w,h) {
    context.beginPath();
    context.rect(x,y,w,h);
    context.closePath();
    context.fill();
}

// init location and size of paddle 
function init_paddles() {
    paddley = 100;
    paddleh = 75;
    paddlew = 10;
}

// draw a single frame of the game
function draw() {
    clear();
    // draw circle
    circle(x, y, 10);

    // update paddle location
    if (upPressed) paddley -= 5;
    else if (downPressed) paddley += 5;

    // draw paddle
    rect(10, paddley, paddlew, paddleh);

    // ball hit a wall!     
    if (x + dx > width || x + dx < 0)
        dx = -dx; // flip x direction
    if (y + dy > height || y + dy < 0)
        dy = -dy; // flip y direction


    // move ball        
    x += dx;
    y += dy;        
}

init();
init_paddles();
</script>

 </body>

I just need help with when the ball hits the paddle, it bounces off in the opposite direction. So would it be something like: if(x + dx > paddley || x + dx >paddleh) dx = -dx;

Was it helpful?

Solution

Considering that the paddle is on the right size of the screen and that the position of the ball is its center, and the position of the paddle is the top left corner :

// Collision on the y and x axis
var onY = (y + dy < paddley + paddleh) && (y - dy > paddley);
var onX = (x + dx > width - paddlew);

if (onX && onY)
{
    // A factor that depends on the distance from the collision point to
    // the paddle's center.
    var delta = abs(y - (paddley + paddleh/2))/paddleh;

    // We change dx and dy such that the speed (dx² + dy²) stays the same
    dx = -dx*sqrt(1 - delta);
    dy = sqrt(pow(dy, 2) + pow(dx,2)*delta);
}

You should add a factor to delta and change it until the ball bounces as you want.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top