Game Bouncing

---

This red square bounces when it hits the floor:

var myGamePiece;
var myoverlay;
var myresult;
var accel = false;

function startGame() {
myGamePiece = new component(30, 30, "red", 50, 50);
myGameArea.start();
}

var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 320;
this.canvas.height = 180;
this.context = this.canvas.getContext("2d");
document.getElementById("canvascontainer").appendChild(this.canvas);
this.interval = setInterval(updateGameArea, 20);
},
stop : function() {
clearInterval(this.interval);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}

function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.speed = 0;
this.gravity = 0.1;
this.gravitySpeed = 0;
this.bounce = 0.6;
this.angle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
this.newPos = function() {
var rockbottom = myGameArea.canvas.height - (this.height / 2);
this.gravitySpeed += this.gravity;
this.x += this.speed * Math.cos(this.angle);
this.y += (this.speed * Math.sin(this.angle)) + this.gravitySpeed;
if (this.y > rockbottom) {
this.gravitySpeed=-(this.gravitySpeed * this.bounce);
this.gravitySpeed = Number(this.gravitySpeed.toFixed(2));
this.y = rockbottom;
}
}
}

function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}

function restartgame(x) {
myGameArea.stop();
document.getElementById("canvascontainer").innerHTML = "";
startGame();
}

startGame();

---

Bouncing

Another functionallity we want to add is the bounce property.

The bounce property indicates if the component will bounce back when gravity makes it fall down to the ground.

The bounce property value must be a number. 0 is no bounce at all, and 1 will make the component bounce all the way backto where it start falling.