Question: I have the following javascript code and html file. I need help figuring out how to run it. Is there a way I need to

I have the following javascript code and html file. I need help figuring out how to run it. Is there a way I need to save it in order to be able to run it in a browser? It should open in a browser as a pong-like game.

var canv = document.getElementById("myCanvas2D"); var context = canv.getContext("2d"); var radiusOfBall = 10;

//This is actually used to move

var a = canv.width / 2; var b = canv.height - 30; var da = 2; var db = -2; var paddleHeight = 10; var paddleWidth = 75; var paddleA = (canv.width - paddleWidth) / 2; var pressedRight = false; var pressedLeft = false; var bricksRowCount = 3; var bricksColumnCount = 5; var bricksWidth = 75; var bricksHeight = 20; var bricksPadding = 10; var bricksOffsetTop = 30; var bricksOffsetLeft = 30; document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false);

var bricks = []; for (c = 0; c

function keyDownHandler(e) { if (e.keyCode == 39) {

pressedRight = true;

} else if (e.keyCode == 37) {

pressedLeft = true;

}

}

function keyUpHandler(e) {

if (e.keyCode == 39) {

pressedRight = false; } else if (e.keyCode == 37) {

pressedLeft = false;

} }

function drawBall() { context.beginPath(); context.arc(a, b, radiusOfBall, 0, 2 * Math.PI); context.fillstyle = "#0033FF"; context.fillStroke = "#0033FF"; context.Stroke = "10" context.fill(); context.closePath(); }

function drawPaddle() { context.beginPath(); context.rect(paddleA, canv.height - paddleHeight, paddleWidth, paddleHeight); context.fillstyle = "#0095DD"; context.fill(); context.closePath(); } function drawBricks() { for (c = 0; c

function collisionDetection() { for (c = 0; c l.a && a l.b && b

function draw() { context.clearRect(0, 0, canv.width, canv.height); drawBricks(); drawBall(); drawPaddle(); collisionDetection(); if (a + da > canv.width - radiusOfBall || a + da canv.height - radiusOfBall) { if (a > paddleA && a

paddleA += 7; } else if (pressedLeft && paddleA > 0) { paddleA -= 7;

}

a = a + da; b = b + db; }

setInterval(draw, 10);

I have the following javascript code and html file. I need help

title Paddle Ball Hitting Ball titles

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!