LINK PARA IMAGEM SPRITELink para pegar a Imagem do Sprite Galera, disponibilizando para voces codigos de Games para que possa usar como base!Game de Nave do Livro Desenvolvendo Game em Canvas e HTML5Game Odyssey - Desenvolvido pelo Framework MibbuGame Halloween Nightmare - desenvolvido pelo aluno Alessandro Dress da QI Da Alberto Bins - turma manha - ano 2015. Codigo base: OdysseyJeoffrey - O Dinossauro Saltador - desenvolvido pelos alunos Elienai Nascimento e Caio Souza da QI de Sao Leopoldo - turma tarde - ano 2015 - codigo base: Dinossauro do GoogleLabirinto de Einstein - desenvolvido pelos alunos Sandro Andrade Nunes , Yander Francisco e Rafael Vargas - QI Assis Brasil, turno noite - ano de 2015. Codigo base: Nave.99% Protection - desenvolvido pelos alunos Adriana Malheiros, Ari Prestes e Rafael Duarte - QI Alberto Bins - turno noite - ano de 2015. Codigo base no proprio Download GravidadeO efeito de GRAVIDADE em um game nada mais e que a aplicacao fisica de um efeito necessario.Para que usamos a gravidade?1 - para permitirmos que o nosso personagem pule e CAIA em algum lugar que definimos.2 - para que objetos caiam para que possamos configurar a colisao entre elementos.Quais os procedimentos normais para criarmos uma gravidade:1 - definimos o tamanho do objeto que ira cair2 - definir ate onde o objeto ira cair3 - se o objeto pular, ate onde ele pulara e qual o limite do "chao", altura do local em que ele ira cair.4 - qual a velocidade em que o objeto ira cair.5 - qual o evento associado a acao (que pode ser o mousedown ou mesmo keydown ou keypress)Exemplo!var chao = { y:450, altura: 150, cor:"#16a085", desenha: function(){ ctx.fillStyle = this.cor; ctx.fillRect(0, this.y, LARGURA, this.altura); } },No exemplo acima, estamos criando o limite de altura (dentro de um canvas) e o metodo de desenho do retangulo que servira para ser o "chao" do canvas.Codigo: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Exemplo Gravidade</title> <style type="text/css"> body { background-color:#3498db;} h1 { color:#ecf0f1; font-family:verdana; font-weight:bold; font-size:48px;} /*formatacao do canvas e centralizacao*/ canvas{ position: absolute; top: 200px; bottom: 0px; left: 0px; right: 0px; margin: auto; border: 10px solid #f1c40f; border-radius:40px } </style></head><body><h1>Exemplo de Gravidade!</h1> <script type="text/javascript"> //aqui temos as variaveis globais do game var canvas, ctx, Altura, Largura, frame = 0; // objetos rec do game var chao={ y:450, altura: 150, cor:"#16a085", desenhar: function(){ ctx.fillStyle = this.cor; ctx.fillRect(0, this.y, Largura, this.altura); } }, bloco = { x:250, y:0, altura:40, largura:40, cor:"#9b59b6", gravidade: 1.5, velocidade: 0, forcaDoPulo: 25, pula: function(){ this.velocidade =- this.forcaDoPulo; }, atualizar: function(){ this.velocidade += this.gravidade; this.y += this.velocidade; //colisao com o chao if(this.y > chao.y - this.altura){ this.y = chao.y - this.altura; } }, desenhar:function(){ ctx.fillStyle = this.cor; ctx.fillRect(this.x, this.y, this.largura, this.altura); } }; // conta a quantidade de cliks e faz o personagem pular function clique(event){ bloco.pula(); } // funcao principal onde sera chamada as outras funcoes (o construtor) function principal(){ // pega a largura total da tela Largura = window.innerHeight; // pega a altura total da tela Altura = window.innerWidth; //se a largura for mair que 500px a largura e redefinida