JSFiddle - React, Tailwind, and code Playground

by Kingdaro

HTML

<script src="http://www.kineticjs.com/download/kinetic-v3.9.6.js"></script>
<div id='bouncybox'></div>

CSS

body{
    background:#def;
}

JavaScript

function rSign(){
    if (Math.random() > 0.5){
        return 1;
    }else{
        return -1;
    }
}

function Sign(num){
    if (num>0){
        return 1;
    }else if (num<0){
        return -1;
    }else{
        return 0;
    }
}

function loadBox(){
    var stage = new Kinetic.Stage({
        container: 'bouncybox',
        width: window.innerWidth,
        height: window.innerHeight
    });
    
    var layer = new Kinetic.Layer();
    
    var xvel = 100*rSign();
    var yvel = 100*rSign();
    
    var box = new Kinetic.Rect({
        x: Math.random()*(window.innerWidth-50),
        y: Math.random()*(window.innerHeight-50),
        width: 50,
        height: 50,
        fill: 'black',
        stroke: 'white',
        strokeWidth: 2
    });
    
    var score = new Kinetic.Text({
        x: 10,
        y: 10,
        text: 'Clicks: none',
        fontSize: 24,
        fontFamily: 'Calibri',
        textFill: 'black'
    });
    
    layer.add(box);
    layer.add(score);
    stage.add(layer);
    
    var clicks = 0;
    
    stage.onFrame(function(frame){
        var dt = frame.timeDiff/1000
        box.move(
            xvel * dt,
            yvel * dt
        );
        
        if (box.getX() > window.innerWidth-50){
            box.setX(window.innerWidth-50);
            xvel *= -1;
        }else if (box.getX() < 0){
            box.setX(0);
            xvel *= -1;
        }
        
        if (box.getY() > window.innerHeight-50){
            box.setY(window.innerHeight-50);
            yvel *= -1;
        }else if (box.getY() < 0){
            box.setY(0);
            yvel *= -1;
        }
        
        layer.draw();
    });
    
    box.on('mousedown',function(){
        xvel += Sign(xvel)*50;
        yvel += Sign(yvel)*50;
        clicks++;
        
        score.setText('Clicks: '+clicks);
    });
    
    stage.start();
}
loadBox()