Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Solo Pong</title>
    <meta charset="UTF-8">
    <script src="processing.min.js"></script>
</head>
<body>
<h1><P ALIGN=Center>Colorful Pong</h1><br>
<h2><P ALIGN=Center>Pong is a fun, 2 player game that bounces a ball around. Your goal is to not let that ball get past you.</h2>
<P ALIGN=Center><canvas id="canvas"></canvas>
    <br>


<script>
    var canvas = document.getElementById("canvas");
    var canvasWidth  = 1000;
    var canvasHeight = 550;
    var processing = new Processing(canvas, function(processing)
    {
        processing.size(canvasWidth, canvasHeight);
        processing.background(0xFFF);


        with (processing)
        {

            var red = random(1,255);
            var green = random(1,255);
            var blue = random (1,255);
            var redIncrease = 1;
            var greenIncrease = 1;
            var blueIncrease = 1;
            var ballX=500;
            var ballY=275;
            var speedX = 5; //speed of ball
            var speedY = 5; //speed of ball
            var barHeight = 100;
            var barY = 12.5;
            var barX = 5;
            var scoreR = 0;
            var scoreL =0;
            var bar2Y = 12.5;
            var bar2X = 5;

            draw = function ()
            {
                background(0,191,255);
                var x = 50;
                var x2 = 50;
                var m = millis();

                if (m<0){ //not needed in this project
                    background (0,191,255); //Extremely important to put this after vars and before anything else in draw function
                }

                else { //the { will last until the end of everything in the draw = function(), this is important

                    //987.5 and 537.5 are canvas width and height - the radius of the ball
                    if (ballX > 987.5) {
                        speedX=-10; //changing speed X or Y will change angle in which ball goes at (unless they're the same)
                    }
                    if (ballX < 12.5) {
                        speedX=10;
                    }

                    if (ballY > 537.5) {
                        speedY = -10;
                    }
                    if (ballY < 12.5) {
                        speedY = 10;
                    }


                    ballY = ballY + speedY; //moves the ball up and down
                    ballX = ballX + speedX; // moves the ball left and right


                    if (mouseY + 100 > canvasHeight) //deals with bar that moves on bottom

                        if (red > 255) {
                            redIncrease = 0; //all of these deal with the color of objects
                        }
                    if (red < 1) {
                        redIncrease = 1;
                    }
                    if (green > 255) {
                        greenIncrease = 0;
                    }
                    if (green < 1) {
                        greenIncrease = 1;
                    }
                    if (blue > 255) {
                        blueIncrease = 0;
                    }
                    if (red < 1) {
                        blueIncrease = 1;
                    }
                    if (redIncrease === 1) {
                        red += 1;
                    } else red -= 1;
                    if (greenIncrease === 1) {
                        green += 1;
                    } else green -= 1;
                    if (blueIncrease === 1) {
                        blue += 1;
                    } else blue -= 1;

                    stroke(1, 1, 1);
                    strokeWeight(1);
                    fill(red, green, blue); //color of bar
                    barY = mouseY - x;
                    bar2Y = mouseY -x2;
                    if (hitTheBar()) {
                        speedY = -5;
                        scoreL += 1
                    }

                    if (hitTheBar2())
                    {
                        speedY = -5;
                        scoreR += 1
                    }
                    fill(0, 0, 0);
                    textSize(30);
                    text("Score: " + scoreL, 20, 50);
                    text("Score: " +scoreR, 870,50);

                    fill(red, green, blue);
                    rect(barX, barY, 10, barHeight);
                    rect(bar2X + 980, bar2Y, 10, barHeight);


                    //middle circles/lines
                    fill (0,0,0);
                    rect (500,0,10,549);
                    fill (0,0,0);
                    ellipse(505,275,400,400);
                    fill (230,230,230);
                    ellipse (505,275,380,380);

                    fill(red, 255 - green, 255 - blue); //color of ball
                    ellipse(ballX, ballY, 25, 25); //ball

                }


            };
            hitTheBar = function()
            {
                //ballX= 0/ball x position
                //ballY = 0/ball y position
                //barX = 5
                //barY = 12.5
                //bar locations = 5/985
                //barY location = 12.5
                if (ballX  +10 < barX ) return false;
                if (ballX  -10 > barX ) return false;
                if (ballY  +25.5 < barY) return false;
                if (ballY  -125.5 > barY) return false;
                return true;
            };

            hitTheBar2 = function()
            {
                if (ballX  +900 > bar2X + 980) return false;
                if (ballX  -900 < bar2X + 980) return false;
                if (ballY  +25.5 > bar2Y) return false;
                if (ballY  -125.5 < bar2Y) return false;
                return true;
            };
            //================ END OF MODIFY CODE BLOCK =====================
        }
        if (typeof draw !== 'undefined') processing.draw = draw;
    });
</script>
<h2><P ALIGN=Center>The difficulty goes up to 10, each difficulty making the bar smaller. Its tougher then it looks.</h2>
<h3><P ALIGN=Center>Author : Nolan Di Greco</h3>
</body>
</html>