<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>create canvas</title>

    <link rel="stylesheet" href="../canvas/main.css">
    
    <style>
        
        div {
            font-family: monospace;
            font-size: 20px;
            color: white;
            
        }
        
    </style>
</head>

<body>
    <div>Break all the Bricks to win, use A and D keys to move</div>
    
    <canvas width=600 height=600></canvas>

    <script>
        canvas = document.querySelector('canvas');
        c = canvas.getContext('2d');

        canvasHeight = 600;
        canvasWidth = 600;

        function Sound(file) {
            this.sound = new Audio(file);
            this.play = function() {
                this.sound.load();
                this.sound.play();
            }
        }

        sound = new Sound('audio/bounce.wav')

        // 540.1952278698604 655.9901418947481

        function init() {
            mousepos = {
                x: null,
                y: null
            };

            var column = 8;
            var row = 3;

            var bSpaceY = 30;
            var bY = 10;
            var bH = 20;

            var bSpaceX = (canvasWidth - 10) / column
            var bW = bSpaceX - 10;
            var bX = 10;

            blocks = []

            for (var a = 0; a < row; a++) {
                for (var b = 0; b < column; b++) {
                    blocks.push(new Block(bX, bY, bW, bH));
                    bX += bSpaceX;
                }
                bY += bSpaceY;
                bX = 10
            };
            win = false;
        }

        function Restart(x, y, w, h) {
            this.x = x;
            this.y = y;
            this.w = w;
            this.h = h;

            this.tx = this.x + 10;
            this.ty = this.y + 10;
            this.tw = this.w - 20;

            this.draw = function() {
                c.beginPath();
                c.strokeStyle = 'lime';
                c.strokeRect(this.x, this.y, this.w, this.h);

                c.font = '30px Arial';
                c.fillStyle = 'lime'
                c.fillText('Restart', this.tx, this.ty, this.tw)
            };

            if (this.x <= mousepos.x && mousepos.x <= this.x + 100 && this.y <= mousepos.y && mousepos.y <= this.y + 40) {
                cancelAnimationFrame = false;
                restart.restart()
            };

            this.restart = function() {
                init();

                circle.x = Math.random() * 500 + 50
                circle.y = Math.random() * 200 + 50
            };
        };

        function Block(x, y, w, h) {
            this.x = x
            this.y = y
            this.w = w
            this.h = h

            this.draw = function() {
                c.fillStyle = 'Darkred';
                c.fillRect(this.x, this.y, this.w, this.h)
            }

            this.hitDetection = function(cx, cy, i) {
                if (this.x <= cx && cx <= this.x + this.w && cy - 20 <= this.y + this.h && this.y <= cy + 20) {
                    circle.ys = -circle.ys;
                    sound.play();

                    blocks.splice(i, 1)
                };

                if (this.y <= cy && cy <= this.y + this.h && cx + 20 >= this.x && this.x + bW >= cx - 20) {
                    circle.xs = -circle.xs;
                    sound.play();

                    blocks.splice(i, 1)
                }
            }
        }

        function Paddle(x, y, w, h) {
            this.x = x
            this.y = y
            this.w = w
            this.h = h

            this.move = function() {
                if (left == true && this.x > 0) {
                    this.x -= 8;
                }
                if (right == true && this.x + 100 < 600) {
                    this.x += 8;
                }
            }

            this.draw = function() {
                paddle.move();
                c.fillStyle = 'red'
                c.fillRect(this.x, this.y, this.w, this.h);
            }

            this.hitDetection = function(x, y) {
                if (this.x < x + 20 && x - 20 < this.x + 100 && 584 >= y + 20 && y + 20 >= 580) {
                    circle.ys = -circle.ys;
                    sound.play();
                }
            }
        }

        var left = false
        var right = false
        document.addEventListener('keydown', function(e) {
            key = e.keyCode;
            if (key === 65 || key === 37) {
                left = true;
            } else if (key === 68 || key === 39) {
                right = true;
            }
        });

        document.addEventListener('keyup', function(e) {
            key = e.keyCode;
            if (key === 65 || key === 37) {
                left = false;
            } else if (key === 68 || key === 39) {
                right = false;
            } else if (key === 13) {
                cancelAnimationFrame = false;
                restart.restart()
            }
        });

        mousepos = {
            x: null,
            y: null
        }
        canvas.addEventListener('click', function(e) {
            mousepos.x = e.offsetX
            mousepos.y = e.offsetY
        });

        function Circle(x, y, r) {
            this.x = x
            this.y = y
            this.r = r

            this.xs = 6
            this.ys = 4

            this.update = function() {
                if (0 >= this.x - 20 || this.x + 20 >= 600) {
                    this.xs = -this.xs
                    sound.play();
                }
                if (0 >= this.y - 20) {
                    this.ys = -this.ys
                    sound.play();
                }
                if (this.y + 20 >= 600) {
                    cancelAnimationFrame = true
                }
                paddle.hitDetection(this.x, this.y);

                for (var i = 0; i < blocks.length; i++) {
                    blocks[i].hitDetection(this.x, this.y, i);
                }

                this.x += this.xs;
                this.y += this.ys;
            }

            this.draw = function() {
                circle.update();

                c.beginPath();

                var g = c.createRadialGradient(this.x - 5, this.y - 5, 1, this.x, this.y, this.r)

                g.addColorStop(0, 'yellow');
                g.addColorStop(0.3, 'orange');
                g.addColorStop(1, 'black');

                c.fillStyle = g;

                c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
                c.fill();
            }
        }

        //////////// Column, Row for blocks ////////////
        var column = 8;
        var row = 3;

        var bSpaceY = 30;
        var bY = 10;
        var bH = 20;

        var bSpaceX = (canvasWidth - 10) / column
        var bW = bSpaceX - 10;
        var bX = 10;

        blocks = []

        for (var a = 0; a < row; a++) {
            for (var b = 0; b < column; b++) {
                blocks.push(new Block(bX, bY, bW, bH));
                bX += bSpaceX;
            }
            bY += bSpaceY;
            bX = 10
        };

        win = false;

        paddle = new Paddle(250, 580, 100, 10);

        circle = new Circle(Math.random() * 500 + 50, Math.random() * 200 + 50, 20);

        cancelAnimationFrame = false;

        function anim() {
            requestAnimationFrame(anim)

            if (blocks.length === 0) {
                c.font = "50px Arial";
                c.textBaseline = 'hanging';
                c.fillStyle = 'Black';
                c.fillText('You Win!', 200, 300, 180);

                restart = new Restart(250, 360, 100, 40);
                restart.draw();
            } else if (cancelAnimationFrame === false) {
                c.clearRect(0, 0, 600, 600);
                paddle.draw();
                circle.draw();

                for (var i = 0; i < (blocks.length); i++) {
                    blocks[i].draw();
                }
            } else {
                c.font = "50px Arial";
                c.textBaseline = 'hanging';
                c.fillStyle = 'Black';
                c.fillText('Game Over!', 200, 300, 200);

                restart = new Restart(250, 360, 100, 40);
                restart.draw();

            }
        }
        anim()
    </script>
</body>

</html>
