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;