Skip to content

Instantly share code, notes, and snippets.

@klaylton

klaylton/index.html

Created December 16, 2018 16:49
Show Gist options
  • Save klaylton/13aced23665b4202f029b12100fcdb7a to your computer and use it in GitHub Desktop.
Save klaylton/13aced23665b4202f029b12100fcdb7a to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
//variáveis do jogo
var canvas, ctx, ALTURA, LARGURA, frames = 0, maxPulos = 3,
chao = {
y: 550,
altura: 50,
cor: "#80daff",
desenha: function(){
ctx.fillStyle = this.cor;
ctx.fillRect(0,this.y, LARGURA, this.altura);
}
},
obstaculo = {
_obs: [],
cores: ["#ffbc1c","#ff1c1c","#ff85e1","#52a7ff","#78ff5d"],
insere: function() {
this._obs.push({
x: 200,
largura: 30 + Math.floor(21 * Math.random()),
altura: 30 + Math.floor(120 * Math.random()),
cor: this.cores[Math.floor(5 * Math.random())]
});
},
atualiza: function() {},
desenha: function() {
for (var i=0, tam=this._obs.length; i<tam; i++){
var obs = this._obs[i];
ctx.fillStyle =obs.cor;
ctx.fillRect(obs.x, chao.y - obs.altura, obs.largura, obs.altura);
}
}
};
bloco = {
x: 50,
y: 0,
altura: 50,
largura: 50,
cor: "#ff9239",
gravidade: 1.6,
velocidade: 0,
forcaDoPulo: 23.6,
qntPulos: 0,
atualiza: function() {
this.velocidade += this.gravidade;
this.y += this.velocidade;
//Quando o bloco toca o chão
if (this.y > chao.y - this.altura){
this.y = chao.y - this.altura;
this.qntPulos = 0;
}
},
pula: function() {
if(this.qntPulos < maxPulos){
this.velocidade = -this.forcaDoPulo;
this.qntPulos++;
}
},
desenha: function() {
ctx.fillStyle = this.cor;
ctx.fillRect(this.x, this.y, this.largura, this.altura);
}
}
;
function main(){
ALTURA = window.innerHeight;
LARGURA = window.innerWidth;
if (LARGURA >= 500) {
LARGURA = 600;
ALTURA = 600;
}
canvas = document.createElement("canvas");
canvas.width = LARGURA;
canvas.height = ALTURA;
canvas.style.border = "1px solid #000"
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
document.addEventListener("mousedown", clique);
roda();
}
function clique(event){
bloco.pula();
}
function roda(){
atualiza();
desenha();
window.requestAnimationFrame(roda);
}
function atualiza(){
frames++;
bloco.atualiza();
}
function desenha(){
ctx.fillStyle = "#50beff";
ctx.fillRect(0, 0, LARGURA, ALTURA);
chao.desenha();
obstaculo.desenha();
bloco.desenha();
}
//inicializa o jogo
main();
</script>
<script id="jsbin-source-javascript" type="text/javascript">//variáveis do jogo
var canvas, ctx, ALTURA, LARGURA, frames = 0, maxPulos = 3,
chao = {
y: 550,
altura: 50,
cor: "#80daff",
desenha: function(){
ctx.fillStyle = this.cor;
ctx.fillRect(0,this.y, LARGURA, this.altura);
}
},
obstaculo = {
_obs: [],
cores: ["#ffbc1c","#ff1c1c","#ff85e1","#52a7ff","#78ff5d"],
insere: function() {
this._obs.push({
x: 200,
largura: 30 + Math.floor(21 * Math.random()),
altura: 30 + Math.floor(120 * Math.random()),
cor: this.cores[Math.floor(5 * Math.random())]
});
},
atualiza: function() {},
desenha: function() {
for (var i=0, tam=this._obs.length; i<tam; i++){
var obs = this._obs[i];
ctx.fillStyle =obs.cor;
ctx.fillRect(obs.x, chao.y - obs.altura, obs.largura, obs.altura);
}
}
};
bloco = {
x: 50,
y: 0,
altura: 50,
largura: 50,
cor: "#ff9239",
gravidade: 1.6,
velocidade: 0,
forcaDoPulo: 23.6,
qntPulos: 0,
atualiza: function() {
this.velocidade += this.gravidade;
this.y += this.velocidade;
//Quando o bloco toca o chão
if (this.y > chao.y - this.altura){
this.y = chao.y - this.altura;
this.qntPulos = 0;
}
},
pula: function() {
if(this.qntPulos < maxPulos){
this.velocidade = -this.forcaDoPulo;
this.qntPulos++;
}
},
desenha: function() {
ctx.fillStyle = this.cor;
ctx.fillRect(this.x, this.y, this.largura, this.altura);
}
}
;
function main(){
ALTURA = window.innerHeight;
LARGURA = window.innerWidth;
if (LARGURA >= 500) {
LARGURA = 600;
ALTURA = 600;
}
canvas = document.createElement("canvas");
canvas.width = LARGURA;
canvas.height = ALTURA;
canvas.style.border = "1px solid #000"
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
document.addEventListener("mousedown", clique);
roda();
}
function clique(event){
bloco.pula();
}
function roda(){
atualiza();
desenha();
window.requestAnimationFrame(roda);
}
function atualiza(){
frames++;
bloco.atualiza();
}
function desenha(){
ctx.fillStyle = "#50beff";
ctx.fillRect(0, 0, LARGURA, ALTURA);
chao.desenha();
obstaculo.desenha();
bloco.desenha();
}
//inicializa o jogo
main();</script></body>
</html>
Raw
jsbin.untitled.js
//variáveis do jogo
var canvas, ctx, ALTURA, LARGURA, frames = 0, maxPulos = 3,
chao = {
y: 550,
altura: 50,
cor: "#80daff",
desenha: function(){
ctx.fillStyle = this.cor;
ctx.fillRect(0,this.y, LARGURA, this.altura);
}
},
obstaculo = {
_obs: [],
cores: ["#ffbc1c","#ff1c1c","#ff85e1","#52a7ff","#78ff5d"],
insere: function() {
this._obs.push({
x: 200,
largura: 30 + Math.floor(21 * Math.random()),
altura: 30 + Math.floor(120 * Math.random()),
cor: this.cores[Math.floor(5 * Math.random())]
});
},
atualiza: function() {},
desenha: function() {
for (var i=0, tam=this._obs.length; i<tam; i++){
var obs = this._obs[i];
ctx.fillStyle =obs.cor;
ctx.fillRect(obs.x, chao.y - obs.altura, obs.largura, obs.altura);
}
}
};
bloco = {
x: 50,
y: 0,
altura: 50,
largura: 50,
cor: "#ff9239",
gravidade: 1.6,
velocidade: 0,
forcaDoPulo: 23.6,
qntPulos: 0,
atualiza: function() {
this.velocidade += this.gravidade;
this.y += this.velocidade;
//Quando o bloco toca o chão
if (this.y > chao.y - this.altura){
this.y = chao.y - this.altura;
this.qntPulos = 0;
}
},
pula: function() {
if(this.qntPulos < maxPulos){
this.velocidade = -this.forcaDoPulo;
this.qntPulos++;
}
},
desenha: function() {
ctx.fillStyle = this.cor;
ctx.fillRect(this.x, this.y, this.largura, this.altura);
}
}
;
function main(){
ALTURA = window.innerHeight;
LARGURA = window.innerWidth;
if (LARGURA >= 500) {
LARGURA = 600;
ALTURA = 600;
}
canvas = document.createElement("canvas");
canvas.width = LARGURA;
canvas.height = ALTURA;
canvas.style.border = "1px solid #000"
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
document.addEventListener("mousedown", clique);
roda();
}
function clique(event){
bloco.pula();
}
function roda(){
atualiza();
desenha();
window.requestAnimationFrame(roda);
}
function atualiza(){
frames++;
bloco.atualiza();
}
function desenha(){
ctx.fillStyle = "#50beff";
ctx.fillRect(0, 0, LARGURA, ALTURA);
chao.desenha();
obstaculo.desenha();
bloco.desenha();
}
//inicializa o jogo
main();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment