gravity 2.html

<!DOCTYPE html>
<html lang="es">
	<head>
		<title>JS</title>
		<meta charset="utf-8">
		<style>
			* {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>

		<canvas id="canvasExp"></canvas>
		

		<script>
			

			function Ball(){
				this.version = '1.0'
				this.name = 'Bouncing ball'
				this.canvasDom = undefined
				this.ctx = undefined
				this.canvas = {
					w: undefined,
					h: undefined
				}
				this.posX = 50
				this.posY = 50
				this.color = 'red'
				this.radius = 20
				this.gravity = 1.01
			}

			Ball.prototype.init = function(id){
				this.canvasDom = document.getElementById(id)
				this.ctx = this.canvasDom.getContext('2d')
				this._setDimensions()				
				this._draw()
				setInterval( function(){ this._update() }.bind(this), 20)
			}

			Ball.prototype._setDimensions = function(){
				this.canvas.w = window.innerWidth
				this.canvas.h = window.innerHeight

				this.canvasDom.setAttribute('width', this.canvas.w)
				this.canvasDom.setAttribute('height', this.canvas.h)
			}

			Ball.prototype._draw = function(){
				this.ctx.beginPath()
				this.ctx.arc(this.posX, this._getSpeed(), this.radius, 0, Math.PI * 2)
				this.ctx.fillStyle = this.color
				this.ctx.fill()
            }

			Ball.prototype._getSpeed = function(){
				return this.posY *= this.gravity
			}
           

			Ball.prototype._update = function(){

                this.ctx.clearRect(0, 0, this.canvas.w, this.canvas.h)
				this._draw()

				if (this.posY >= this.canvas.h - this.radius) {
					this.posY = this.canvas.h - this.radius
                }
			}


			var app = new Ball()
			app.init('canvasExp')

		</script>
	</body>
</html>