//variaves
var canvas = '';
var ctx = "";
var WIDTH = "";
var HEIGHT = "";
var frame = "0";
var amountOfJumps = 1;
var ground = {
y: 550,
height: 50,
cor: "#2E4053",
drown: function() {
ctx.fillStyle = this.cor;
ctx.fillRect(0, this.y, WIDTH, this.height);
}
}
var block = {
x: 50,
y: 0,
width: 50,
height: 50,
cor: "#8E44AD",
gravity: 1.6,
speed: 0,
strengthOfJump: 23.6,
AOJ: 0,
update: function() {
this.speed += this.gravity;
this.y += this.speed;
if(this.y > ground.y - this.height) {
this.y = ground.y - this.height;
this.AOJ = 0;
}
},
jump: function() {
if(this.AOJ < amountOfJumps) {
this.speed = -this.strengthOfJump;
this.AOJ++;
}
},
drown: function() {
ctx.fillStyle = this.cor;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
var obstacles = {
_obtcs: [],
color: ["#b03a2e", "#cb4335", "#a93226", "#e74c3c", "#c0392b", "#ec7063"],
insert: function() {
this._obtcs.push({
x: 200,
width: 30 + Math.floor(21 * Math.random()),
height: 30 + Math.floor(90 * Math.random()),
cor: this.color[Math.floor(5 * Math.random())]
});
},
update: function() {
},
drown: function() {
for (var i = 0, size = this._obtcs.length; i < size; i++) {
var obtcs = this._obtcs[i];
ctx.fillStyle = obtcs.color;
ctx.fillRect(obtcs.x, ground.y - obtcs.height, obtcs.width, obtcs.height);
}
}
}
//funções
function click(event) {
block.jump();
}
function main() {
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
if(WIDTH >= 500) {
WIDTH = 600;
HEIGHT = 600;
}
canvas = document.createElement("canvas");
canvas.width = WIDTH;
canvas.height = HEIGHT;
canvas.style.border = "1px solid blue";
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
document.addEventListener("mousedown", click);
run();
}
function run() {
update();
drown();
window.requestAnimationFrame(run);
}
function update() {
frame++;
block.update();
}
function drown() {
ctx.fillStyle = "#B8B8B8";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ground.drown();
obstacles.drown();
block.drown();
}
main();