Homework SourseUsing the HTML Canvas element and a Javascript create a 1pla
Using the HTML Canvas element and a Javascript, create a 1-player version of pong. You will keep track of 2 objects: the ball, a 5 pixel radius yellow circle, and the player, a 100x20 pixel blue rectangle. The canvas element is 400x400 pixels in size, and initially the is at the top center of the region. The player is always 50 pixels above the bottom of the Canvas, initially centered. The player\'s initial velocity is 0, while the ball is falling at a rate of 5 pixels per 50ms, with no left/right velocity.
If the ball hits the bottom of the canvas, the game ends. If it hits the left or right wall its x-velocity is reversed and the players score increases by 1. If it hits the top wall its y-velocity is reversed. If it hits the paddle its y velocity is reversed, then a random component from -3 to +3 is added to both x and y velocities of the ball. The score should be maintained in a div outside the Canvas. On game over a modal alert pops up with the score; when this alert is dismissed the game immediately starts over.
Detecting collision is relatively easy, if the center of the ball is less than 5 pixels from a wall, or the top surface of the player, collision has occurred. So for the player collision only occurs if the ball is between the left and right edges of the player, + 4 pixels.
Start with this code:
<html>
<head>
<title>canvas</title>
<script>
var ball = {\"x\":200, \"y\":6, \"xVel\":0, \"yVel\":5, \"radius\":5};
var player = {\"x\":150, \"y\":350, \"xVel\":0, \"yVel\":0, \"width\":100, \"height\":20};
function thingy()
{
canvas = document.getElementById(\"test\");
context = canvas.getContext(\"2d\");
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle=\"yellow\";
context.strokeStyle=\"red\";
context.beginPath();
context.arc(ball.x, ball.y, ball.radius, 2*Math.PI,0);
context.stroke();
context.fill();
context.fillStyle=\"blue\";
context.fillRect(player.x,player.y,player.width,player.height);
}
function boom()
{
ball.x += ball.xVel;
ball.y += ball.yVel;
player.x += player.xVel;
player.y += player.yVel;
thingy();
}
</script>
</head>
<body onload=\"thingy();\">
<canvas id=\"test\" height=\"400\" width=\"400\">
All your pixels are belong to us
</canvas>
<a href=\"#\" onclick=\"boom();\">Boom</a>
</body>
</html>
Solution
A)
Play some pong.
@param string appendToElementId The id of the element you want to put pong inside.
@param object window
@param object document
@returns HTML5CanvasElement The canvas inside the element for which you supplied the id.
function Pong(appendToElementId, window, document) {
var el = document.getElementById(appendToElementId);
var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
var canvas = document.createElement(\"canvas\");
canvas.width = WIDTH;
canvas.height = HEIGHT;
canvas.style.borderRadius = \'5px\';
canvas.style.border = \'2px solid \' + OFFWHITE;
var context = canvas.getContext(\'2d\');
context.fillStyle = BLUE;
context.font = \"12px sans-serif\";
var player = new Player();
var computer = new Computer();
var ball = new Ball();
var keysDown = {};
function render() {
context.fillStyle = OFFWHITE;
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = BLUE;
player.render(context);
computer.render(context);
ball.render(context);
}
function update() {
player.update(keysDown);
computer.update(ball);
ball.update(player, computer);
}
function step() {
update();
render(context);
animate(step);
}
el.appendChild(canvas);
animate(step);
var keydownEvent = function (event) {
keysDown[event.keyCode] = true;
};
var keyupEvent = function (event) {
delete keysDown[event.keyCode];
};
var elementDestroyed = function (event) {
window.removeEventListener(\'keydown\', keydownEvent, false);
window.removeEventListener(\'keyup\', keyupEvent, false);
window.removeEventListener(\'DOMNodeRemoved\', elementDestroyed, false);
};
window.addEventListener(\"keydown\", keydownEvent);
window.addEventListener(\"keyup\", keyupEvent);
window.addEventListener(\"DOMNodeRemoved\", elementDestroyed);
return el;
};
