I have the following javascript code and html file. I need help figuring out how
ID: 3811804 • Letter: I
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 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 < bricksColumnCount; c++) {
bricks[c] = [];
for (r = 0; r < bricksRowCount; r++) {
bricks[c][r] = {x: 0, y: 0, status: 1};
}
}
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 < bricksColumnCount; c++) {
for (r = 0; r < bricksRowCount; r++) {
if (bricks[c][r].status == 1) {
var brickA = (c * (bricksWidth + bricksPadding)) + bricksOffsetLeft;
var brickB = (r * (bricksHeight + bricksPadding)) + bricksOffsetTop;
bricks[c][r].x = brickA;
bricks[c][r].y = brickB;
context.beginPath();
context.rect(brickA, brickB, bricksWidth, bricksHeight);
context.fillStyle = "#0095DD";
context.fill();
context.closePath();
}
}
}
}
function collisionDetection() {
for (c = 0; c < bricksColumnCount; c++) {
for (r = 0; r < bricksRowCount; r++) {
var l = bricks[c][r];
if (l.status == 1) {
if (a > l.a && a < l.a + bricksWidth && b > l.b && b < l.b + bricksHeight) {
db = -db;
l.status = 0;
}
}
}
}
}
function draw() {
context.clearRect(0, 0, canv.width, canv.height);
drawBricks();
drawBall();
drawPaddle();
collisionDetection();
if (a + da > canv.width - radiusOfBall || a + da < radiusOfBall) {
da = -da;
}
if (b + db < radiusOfBall) {
db = -db;
}
else if (b + db > canv.height - radiusOfBall) {
if (a > paddleA && a < paddleA + paddleWidth) {
if (b = b - paddleHeight) {
db = -db;
}
}
else {
alert("GAME OVER");
document.location.reload();
}
}
if (pressedRight && paddleA < canv.width - paddleWidth) {
paddleA += 7;
}
else if (pressedLeft && paddleA > 0) {
paddleA -= 7;
}
a = a + da;
b = b + db;
}
setInterval(draw, 10);
Explanation / Answer
Inside the body create a script Tag ,
<html> //All that u showed in Image
<body>
<script>
//Your whole Code
</script>
</html> //All that u showed in Image keep everything just add <script in body and paste your code>
Place all you java Script code and run it