Bounce

Bounce a ball inside the box

by Amando Filipe

HTML

<body onload="Start()">
<canvas id="out" width="100" height="400" style="border:2px solid blue;"></canvas>  
<canvas id="screen" width="600" height="400" style="border:2px solid blue;"></canvas>

JavaScript

function Start() { /* System variables */
    var frameDelay = 15;
    var screen = document.getElementById('screen'); // Set up animation screen
    var ctx = screen.getContext('2d'); // Set up animation screen
    var out = document.getElementById('out'); // Set up information screen
    var writeTo = out.getContext('2d'); // Set up information screen
    var WIDTH = document.getElementById('screen').width;
    var HEIGHT = document.getElementById('screen').height;
    var WWIDTH = document.getElementById('out').width;
    var WHEIGHT = document.getElementById('out').height; /* END */
    /* Coordinate variables */
    var X = 20;
    var Y = 20; /* end */
    /* Colour related variables */
    var R = 0;
    var G = 0;
    var B = 0; /* end */
    /* Object variables */
    var xspeed = 1;
    var yspeed = 1;
    var radius = 10;
    var lap = 0; /* end */
    var pady = 0;
    var paddlew = 10;
    var paddleh = 50;
    var space = 5;
    var pts = 0;
    var mousemoved = false;


    function bounce() {        
        X += xspeed;
        if (X <= 0 + radius) {
            xspeed *= -1;
        } else {
            xspeed *= 1;
        }
        Y += yspeed;
        if (Y >= (HEIGHT - radius) || Y <= 0 + radius) {
            yspeed *= -1;
        } else {
            yspeed *= 1;
        }
        
        if(Y >= pady && Y < pady+paddleh && X >=(WIDTH-paddlew-space-radius) && X <= (WIDTH - space-radius)){
            xspeed *= -1;
        }
        
        if(X >= WIDTH){
            pts += 1;
            X = 20;
            Y = 20;
        }
         
        
        
        
    }
    
    function paddle(){
        ctx.beginPath();
        ctx.fillStyle = 'blue';
        if(pady === undefined){ pady = 0; } else if(pady+paddleh >= HEIGHT){pady = HEIGHT-paddleh; }
        ctx.fillRect(WIDTH-space-paddlew,pady,paddlew,paddleh);
    }

    function write(what, whereX, whereY, colour, size) {
        writeTo.textBaseline = 'top';
       ...