JSFiddle - React, Tailwind, and code Playground
HTML
<div id="stage"></div>
CSS
#stage{
border: 1px solid black;
display: block;
}
JavaScript
var stage = new Kinetic.Stage({
container : 'stage',
width : 900,
height : 600
});
var shapesLayer = new Kinetic.Layer();
/**********************************
creating the circle object
*************************************/
var circle = new Kinetic.Circle({
x : stage.getWidth() / 2,
y : stage.getHeight() / 2,
radius : 20,
fill : 'grey',
stroke : 'black',
strokeWidth : 1,
});
//radius text on the circle
var radiusText = new Kinetic.Text({
x : circle.getX(),
y : circle.getY(),
text : '10',
fontSize : 10,
fontFamily : 'Verdana',
fill : '#000',
align : 'center'
});
//score text that stays in the background
var scoreText = new Kinetic.Text({
x : stage.getWidth() / 2,
y : stage.getHeight() / 2,
text : 'SDIFUHSDIFUHSD',
fontSize : 50,
fontFamily : 'Verdana',
fill: '#CCC'
});
scoreText.setOffset({
x : scoreText.getWidth() / 2,
y : scoreText.getHeight() / 2
});
//circle properties
circle.X = stage.getWidth() / 2;
circle.Y = stage.getHeight() / 2;
circle.VX = 5;
circle.VY = 5;
circle.RAF;
//make the circle move
circle.move=function(){
// calc new balloon position
this.X+=this.VX;
this.Y+=this.VY;
//console.log(stage);
// reverse if colliding
var radius=this.getRadius();
if(this.X < radius){ this.VX *= -1; this.X = radius; }
if(this.X > stage.getWidth()-radius){ this.VX *= -1; this.X = stage.getWidth()-radius; }
if(this.Y < radius){ this.VY *= -1; this.Y = radius; }
if(this.Y > stage.getHeight()-radius){ this.VY *= -1; this.Y = stage.getHeight()-radius; }
// set the new balloon position
this.setPosition(this.X,this.Y);
radiusText.setPosition(this.X,this.Y);
// draw it
shapesLayer.draw();
// request a new animation loop
var b=this;
this.RAF=requestAnimationFrame(function(){ b.move();});
}
//make the circle expand when clicked...