matthewPt2

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

<head>
    <meta charset="utf-8">
    <title>Blocks Mitchell Palermo</title>
</head>
<canvas id="canvas1" width="640" height="480" style="border: 1px solid black;position:absolute; left:0; top 0; z-index: 0,"></canvas>

<body>

<script>
    var xPos = 0;
    var yPos = 0;
var speed = 80;
var layer1 = document.getElementById("canvas1");
var dt1 = layer1.getContext("2d");

 document.addEventListener("click",runFunc1);

 function runFunc1()
 {
 dt1.clearRect(0,0,canvas1.width,canvas1.height);
     xPos = 0;
     yPos = 0;

 }
function randomColour()
    {
       red = Math.floor(Math.random()*255)+1;
       green = Math.floor(Math.random()*255)+1;
       blue = Math.floor(Math.random()*255)+1;

        return "rgb("+red+","+green+","+blue+")";
    }
setInterval(draw, 100);
function draw()
{
   blocks();
}

function blocks()
{

    dt1.fillStyle = randomColour();
    dt1.fillRect(xPos,yPos, 80, 80);
    dt1.fill();

   xPos = xPos + speed;

    if (xPos <0 || xPos >560)
        {
            yPos = yPos+80;
            speed = speed * -1;

        }

}


</script>

</body>
</html>