Aqui tem os princípios básicos para criar um jogo HTML5 nada muito avaçado. O que vamos fazer, em vez disso, e tirar proveito de algum código fonte aberto realmente simples. Vamos usar algumas idéias e código de Jogos antigos, mas melhorado, definindo o jogo para utilizar eventos de toque -, bem como atualizar alguns dos elementos gráficos do jogo.
Estamos escrevendo um aplicativo HTML5, por isso precisamos criar o nosso HTML, CSS, JavaScript e ativos. Quando terminar, teremos um jogo divertido que se parece com isto:
Firefox OS Simulador
Antes de iniciar a codificação, vamos ter um momento para ver uma peça-chave do Firefox OS o Firefox OS Simulator . Ao contrário de outros webkit baseada em iOS ou Android simuladores no mercado hoje, o Firefox OS Simulator é um ambiente de teste completo e ainda vem com um padrão Firefox OS aplicativos pré-instalados. Depois de instalar o simulador, a primeira coisa que você verá é a interface do painel. Isso permite que você validar seus aplicativos e lançá-los no simulador, tudo dentro de seu navegador Firefox (eu falarei sobre como você carregar seu aplicativo no painel de instrumentos um pouco mais a frente).
Por enquanto, vamos começar com o desenvolvimento e saltar para o nosso HTML.
O Nosso Primeiro Codigo
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div id="home-view" data-role="view"></div>
<div id="payment-view" data-role="modalview" style="width:100%;height:100%">
<div id="welcome-text">Welcome to the Firefox OS Arcade!</div>
<br /><br />
<a href="#" id="btn-success">Simulate a Successful Payment</a>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.mobile.min.js"></script>
<script src="js/game.js"></script>
</body>
</html>
Sim, esta é a extensão do HTML para toda a nossa aplicação! A primeira coisa que você deve observar é que, enquanto isso vai ser um OS aplicativo Firefox, não há literalmente nada no HTML que o separa de qualquer outro aplicativo HTML5. Muito legal.
Você também pode perceber que eu estou utilizando Kendo UI móvel neste app. Isso é porque nós precisamos de uma janela modal para o nosso processo de criação e acontecer de eu estar gostando de utilizar Kendo UI
O CSS
{
margin: 0;
}
#welcome-text
{
margin-top: 50px;
margin-left: 8px;
font-size: 17px;
font-weight: bold;
}
#btn-success
{
box-shadow: inset 0px 1px 0px 0px #9acc85;
background: linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
background-color: #74ad5a;
border: 1px solid #3b6e22;
display: inline-block;
color: #ffffff !important;
font-size: 15px;
font-weight: bold;
padding: 6px 12px;
text-decoration: none;
margin-left: 30px;
}
#btn-success:active
{
position: relative;
top: 1px;
}
Novamente, nada deve ser muito surpreendente aqui na CSS. A maioria do nosso CSS personalizado aplica algum estilo bastante comum para o nosso primeiro botão
O JavaScript
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 320;
canvas.height = 460;
document.getElementById("home-view").appendChild(canvas);
// Initialize Background Image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/bg.gif";
// Initialize Knight Image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "images/knight.png";
// Initialize First Monster Image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
monsterReady = true;
};
monsterImage.src = "images/monster-1.png";
// Initialize Game Objects
var hero = {};
var monster = {};
var monstersCaught = 0;
Isso vai nos fornecer uma tela para trabalhar, definidos para corresponder às dimensões do simulador. Estamos também a criação de três imagens básicas - no fundo, herói (o cavaleiro) e monstros. So far so good. Em seguida é adicionar nossa funcionalidade núcleo jogo:
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Resets when the knight catches a monster
var reset = function () {
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
monsterImage.src = "images/monster-" + getRandomInt(1, 3) + ".png";
};
// Update Game Objects
var update = function () {
document.onmousemove = function(e) { // change to ontouchmove in production
hero.x = e.layerX;
hero.y = e.layerY;
};
// Is the knight touching the monster?
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};
// Draw Everything to the Canvas
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
// Scoreboard
ctx.fillStyle = "rgb(66, 66, 66)";
ctx.font = "18px Arial";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Monsters Slain: " + monstersCaught, 22, 420);
};
Alguns dos destaques neste pedaço de código incluem a renderização função que é o que atrai as nossas imagens e o painel de avaliação para a tela. Temos também uma atualização função que é executada repetidamente ao longo do tempo de vida do aplicativo. Esta função controla o nosso mouse / movimentos de toque e determina se ou não o nosso cavaleiro está tocando um monstro. Você vai notar que estamos usando o onmousemove manipulador de eventos. Isto é porque estamos nos limitando ao Firefox OS Simulator, que não lidar com eventos de toque (uma vez que está simulando em um ambiente desktop / mouse). Se fôssemos para mover esta produção ou até mesmo testar em um dispositivo OS Firefox físico, substituiria no ontouchmove manipulador de eventos. Finalmente temos a redefinição de função que simplesmente cria um novo monstro depois do nosso bravo cavaleiro derrota o anterior.
Precisamos adicionar apenas um pouco mais de código JavaScript para o nosso jogo continua em funcionamento:
// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};
// Let's play this game!
reset();
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible
// Initialize Kendo UI Mobile
var app = new kendo.mobile.Application();
$(function () {
$("#payment-view").data("kendoMobileModalView").open();
});
Começamos a correr o jogo, executando o redefinição da função e, em seguida, com o setInterval método, nós executamos a nossa principal função de cada um milésimo de segundo para se certificar de que estão respondendo constantemente à interação do usuário. Nós também estamos inicializando nosso Kendo UI Mobile App, que permite gerar a nossa janela assim que o aplicativo é instalado e funcionando.
Uma última etapa. Vamos colocar em algum código temporário que vamos fechar nossa janela
$("#btn-success").click(function () {
$("#payment-view").data("kendoMobileModalView").close();
});
E está pronto! Temos um jogo em HTML5 completamente funcional, mas agora vem a parte divertida!
Criando um Firefox OS App
Vamos ver o quanto é fácil para converte o nosso aplicativo HTML5 em um aplicativo Firefox OS. Se você gostaria de um tutorial mais detalhado sobre a criação de um aplicativo Firefox OS, eu recomendo que você verifique meus futuros.
{
"name": "Monster Killer",
"description": "Kill all the monsters with this fun Firefox OS app!",
"launch_path": "/index.html",
"developer": {
"name": "Rob Lauer",
"url": "http://roblauer.me"
},
"icons": {
"16": "/img/icon16.png",
"32": "/img/icon32.png",
"48": "/img/icon48.png",
"64": "/img/icon64.png",
"128": "/img/icon128.png"
},
"default_locale": "en"
}
No nosso manifesto, nós simplesmente fornecer um nome e uma descrição do aplicativo, juntamente com um caminho para o arquivo HTML. Nós também fornecemos algumas informações de contato desenvolvedor necessária, ea localização dos nossos ícones de lançamento de aplicativos.
Salve o arquivo como manifest.webapp na raiz da sua aplicação. Se você não tiver feito isso, inicie o seu navegador Firefox e instalar o Firefox OS Simulator add-on
Com o simulador aberto, agora você vai clicar em Add Diretório botão e escolher o manifest.webapp arquivo que acabou de criar. Seu aplicativo deve agora, como que por magia, abre no simulador! Você notará que, por padrão, o Console de erro vai abrir junto com o seu simulador. Esta é uma ferramenta muito útil para depurar problemas com sua aplicação dentro do simulador.
Então, nós estamos felizes com o resultado final do nosso aplicativo. Ele funciona no simulador como esperávamos. Nós só temos mais uma coisa para fazer, e que é integrar in-app pagamentos usando a API mozPay:
Pagamentos no aplicativo usando a API mozPay (lado do cliente)
mozPay é uma API JavaScript que é voltada para permitir que os desenvolvedores de aplicativos para fornecer opções de pagamento fácil e seguro para seus usuários. mozPay não se preocupa com os produtos que você está vendendo, é simplesmente um mecanismo que ajuda a facilitar o pagamento. No Firefox mercado que você, como um desenvolvedor, é capaz de configurar uma conta para receber pagamentos de uma variedade de provedores de pagamento de sua escolha. Se você estiver interessado em mais fundo, Kumar McMillan oferece uma grande visão de mozPay em seu post, "Introducing navigator.mozPay () Para Pagamentos Web" .
No momento da redação deste artigo, a API mozPay não está totalmente implementado no Firefox Marketplace. Isso significa que só podemos simular pagamentos e parte do código que escrevemos hoje podem ser incompatíveis quando a API final é lançado.
A primeira coisa que vamos fazer é permitir que nossos usuários para iniciar um pagamento dentro do nosso aplicativo. Vamos substituir o nosso código JavaScript que tratado o evento clique do botão de simulação de pagamento com este:
$("#btn-success").click(function () {
$.post("http://yourwebsite.com/ffospayment", {})
.done(function (signedJWT) {
var req = navigator.mozPay([signedJWT]);
req.onsuccess = function () {
paymentSuccessful();
};
req.onerror = function() {
alert("navigator.mozPay() error: " + this.error.name);
};
})
.fail(function () {
alert("Ajax post failed!");
});
});
Vamos passear através de cada passo do código para evitar qualquer confusão. Primeiro estamos fazendo uma pós ajax para uma API que está hospedado em nosso servidor web (vamos chegar ao lado do servidor de coisas em um minuto). O objetivo desta API do lado do servidor é gerar um assinado JSON Web token (JWT) que contém o nome do produto e preço (juntamente com a sua chave application / segredo que, mais uma vez, vamos discutir na próxima seção). Se o post ajax for bem sucedida, nós chamamos navigator.mozPay e passar a JWT assinado que recebemos do nosso servidor. Neste ponto, o usuário será direcionado para completar o seu pagamento fora do contexto do aplicativo. Finalmente, se o pagamento em si é bem sucedida, nós executamos o paymentSuccessful função que vamos definir em nosso aplicativo simplesmente como:
function paymentSuccessful() {
$("#payment-view").data("kendoMobileModalView").close();
}
... qui fecha nossa janela. Este é todo o código do lado do cliente que você precisa para fazer um codigo simples usando a API mozPay. Vamos dar uma olhada no que acontece no lado do servidor:
codigo no aplicativo usando a API mozPay (Server Side)
Antes de irmos adiante, vamos precisar de uma chave de aplicativos e senha da Aplicação . Ambos podem ser obtidas no Firefox mercado Hub do desenvolvedor . Vamos precisar deles quando escrevemos nosso código do lado do servidor, para que possamos criar um JWT assinado digitalmente.
No meu caso eu vou escrever um método de codigo utilizando C #. Há, no entanto,Node.js e Python implementações disponíveis.
O primeiro é um método C # que irá gerar uma JWT assinado (este é o método que é chamado no post inicial ajax do nosso app):
public string Get()
{
string payload = "{" +
"\"iss\": YOUR_APPLICATION_KEY," +
"\"aud\": \"marketplace.firefox.com\"," +
"\"typ\": \"mozilla/payments/pay/v1\"," +
"\"iat\": " + (DateTime.Now - new DateTime(1970, 1, 1).ToLocalTime()).TotalSeconds + "," +
"\"exp\": " + (DateTime.Now.AddMinutes(10) - new DateTime(1970, 1, 1).ToLocalTime()).TotalSeconds + "," +
"\"request\": {" +
"\" id\": \"YOUR_INTERNAL_PRODUCT_ID\"," +
"\" pricePoint\": 0.25," +
"\" name\": \"Arcade Game\"," +
"\" description\": \"25 cents for One Game Play\"," +
"\" postbackURL\": \"http://yourwebsite.com/ffospayment/postback\"," +
"\" chargebackURL\": \"http://yourwebsite.com/ffospayment/chargeback\"," +
"\" simulate\": {" +
"\" result\": \"postback\"" +
" }" +
"}" +
"}";
const string secretKey = "YOUR_APPLICATION_SECRET";
string token = JWT.JsonWebToken.Encode(payload, secretKey, JWT.JwtHashAlgorithm.HS256);
return token;
}
{
string payload = "{" +
"\"iss\": YOUR_APPLICATION_KEY," +
"\"aud\": \"marketplace.firefox.com\"," +
"\"typ\": \"mozilla/payments/pay/v1\"," +
"\"iat\": " + (DateTime.Now - new DateTime(1970, 1, 1).ToLocalTime()).TotalSeconds + "," +
"\"exp\": " + (DateTime.Now.AddMinutes(10) - new DateTime(1970, 1, 1).ToLocalTime()).TotalSeconds + "," +
"\"request\": {" +
"\" id\": \"YOUR_INTERNAL_PRODUCT_ID\"," +
"\" pricePoint\": 0.25," +
"\" name\": \"Arcade Game\"," +
"\" description\": \"25 cents for One Game Play\"," +
"\" postbackURL\": \"http://yourwebsite.com/ffospayment/postback\"," +
"\" chargebackURL\": \"http://yourwebsite.com/ffospayment/chargeback\"," +
"\" simulate\": {" +
"\" result\": \"postback\"" +
" }" +
"}" +
"}";
const string secretKey = "YOUR_APPLICATION_SECRET";
string token = JWT.JsonWebToken.Encode(payload, secretKey, JWT.JwtHashAlgorithm.HS256);
return token;
}
Para mais informações sobre as propriedades individuais acima que não fazem sentido imediato para você, eu sugiro que você consulte a documentação da API que quebra todas as propriedades e mostra-lhe quais são obrigatórias vs opcional.
Vamos supor que o nosso pagamento foi bem sucedido (o que será porque estamos simulando o pagamento). Neste caso, o prestador de pagamento irá postar um novo JWT para o PostBackUrl nós especificado acima. Um exemplo disto é fornecido JWT reponse aqui:
{
"iss": "marketplace.firefox.com",
"aud": APPLICATION_KEY,
"typ": "mozilla/payments/pay/postback/v1",
"exp": 1337370900,
"iat": 1337360900,
"request": {
"id": "YOUR_INTERNAL_PRODUCT_ID",
"pricePoint": 0.25,
"name": "Arcade Game",
"description": "25 cents for One Game Play",
"postbackURL": "http://yourwebsite.com/ffospayment/postback",
"chargebackURL": "http://yourwebsite.com/ffospayment/chargeback"
},
"response": {
"transactionID": "webpay:56212uh6-6548-11c0-9089-5y8895yu5685"
}
}
Neste ponto, o PostBackUrl definidos acima devem simplesmente responder a este post com uma resposta de texto simples que inclui apenas o TransactionID, como em:
webpay:56212uh6-6548-11c0-9089-5y8895yu5685
Ufa! Um monte de coisas acontecendo aqui. A primeira coisa que você provavelmente está pensando é, onde estão as bibliotecas que fazem tudo isso por mim? Eu ouvi-lo alto e bom som. Dentro de um curto espaço de tempo temos a certeza de ver bibliotecas open source de terceiros que encapsulam muito deste e torná-lo muito mais fácil para você implementar o processamento de pagamento em seu aplicativo. Existe ainda um protótipo experimental , que retira a exigência do servidor por completo!
Também é importante lembrar que a API mozPay é um pouco de um alvo em movimento ea funcionalidade que descrito aqui pode (e provavelmente irá) mudar antes de ser liberado para o mundo. A conclusão importante de tudo isso é que você pelo menos tem um alto nível de compreensão do que pode ser feito com a API mozPay.
Conclusão
Espero que através deste post que você conseguiu algum apreço pela forma como é fácil ter um aplicativo HTML5 existente e transformá-lo em um Firefox OS aplicativo nativo.Além disso, já sabemos o básico da API mozPay para lidar com os pagamentos in-app e como você pode incluir essa funcionalidade no seu próprio OS aplicativo Firefox. A API mozPay é um trabalho em andamento e só vai melhorar à medida que o tempo passa, assim, seja paciente! Boa sorte a criar seus próprios aplicativos do Firefox OS!
