<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>

<script>
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';

var HEIGHT = 500;
var WIDTH = 500;
var message = 'Bouncing';

var player = {
    x:50,
    spdX:30,
    y:40,
    spdY:5,
    name:'P',
};


var enemy = {
    x:150,
    spdX:10,
    y:350,
    spdY:15,
    name:'E',
};
var enemy2 = {
    x:150,
    spdX:10,
    y:350,
    spdY:15,
    name:'E',
};
setInterval(update,40);

function updateEntity(something){
    something.x += something.spdX;
    something.y += something.spdY;
    ctx.fillText(something.name,something.x,something.y);


    if(something.x < 0 || something.x > WIDTH){
        console.log(message);
        something.spdX = -something.spdX;
    }
    if(something.y < 0 || something.y > HEIGHT){
        console.log(message);
        something.spdY = -something.spdY;
    }
}


function update(){
    updateEntity(enemy);
    updateEntity(enemy2);
    updateEntity(player);

}





</script>