Final edit

by Paras

HTML

<!--Create a canvas in HTML for our JS to work in.-->
<canvas id="myCanvas" width="640" height="480"></ canvas>

    <!--No need to type anything else in here.-->

CSS

/* Give the canvas a grey background. */

canvas {
    border: 1px solid black;
    background-image: url(http://cdn.pcwallart.com/images/pacman-wallpaper-2.jpg);
    background-size: 640px 480px;
    background-repeat: no-repeat;
}

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");


var paddleX = 200;
var paddleY = 460;
var paddleWidth = 100;
var paddleHeight = 15;
var paddleDeltaX = 0;
var paddleDeltaY = 0;
var ballX = 300;
var ballY = 300;
var ballRadius = 10;
var bricksPerRow = 7;
var brickHeight = 30;
var brickWidth = canvas.width / bricksPerRow;
var score = 0;
var ballDeltaX;
var ballDeltaY;
var paddleDeltaX;
var paddleSpeedX = 10;
var gameLoop;
var paddleMove;
var started = false;
var rightPressed;
var leftPressed;
var gameEnded = false;
var reload = false;
var start = true;
var hitbrick = new Audio('https://www.dropbox.com/s/ippz9x8watlqwuh/pacman_chomp.wav');
var startmusic = new Audio('https://www.dropbox.com/s/peaud0wlxcswjvs/pacman_beginning.wav');
var endmusic = new Audio('https://www.dropbox.com/s/19hi9dcubarzqxo/pacman_death.wav');

// Returns a random integer between min (included) and max (included)
function RandInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Brick Layout: 1 is blue, 2 is pink, 3 is red
var bricks = [
    [RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3)],
    [RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3)],
    [RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3)],
    [RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3)],
    [RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3), RandInt(1, 3)]
];



//Draws paddle
function drawPaddle() {
    ctx.fillRect(paddleX, paddleY, paddleWidth, paddleHeight);
    ctx.fillStyle = 'rgb(255,238,0)';
    //if game ended, canvas will be cleared
    if (gameEnded) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
}


//Draws the...