Tudo JavaScript
Hoje começa a competição do artigo mais visitado. Lembrando que você pode enviar seus artigos até dia 15/02, mas o período de visualizações encerra dia 05/03, então corra e nos envie seus trabalhos.
Não esqueça também de se cadastrar para mostrarmos que você é o autor de seu trabalho e de ler as regras no seguinte link: https://mundojs.com.br/2018/01/25/competicao-mundojs-ganhe-dinheiro-pelo-seu-artigo/
Infinite scroll é uma das formas que temos de criar paginação em nossos sistemas. Veja nesse artigo como implementar ele em um projeto mobile criado com Ionic na versão 3.
No final desse artigo você terá criado um app como o da imagem abaixo.
Para que possamos ter uma lista com dados reais, eu irei utilizar uma das API`s disponibilizadas pelo The New York Times (NYT). Para utilizar essa API, você irá precisar de uma KEY que pode ser encontrada no link: Developer NYT.
Nosso primeiro passo será a criação de um novo projeto. Para isso, execute o comando abaixo no seu terminal:
ionic start ionic-nyt blank
O comando a cima irá criar um novo projeto com uma configuração básica. Para testar ele, execute o seguinte comando ionic serve no seu terminal e abra o seguinte endereço no seu navegador: http://localhost:8100/.
O próximo passo será a criação de um provider para buscar os dados na API do NYT. Para isso, execute o seguinte comando no seu terminal:
ionic g provider nyt-api
Agora abra o projeto em uma IDE de sua preferência, para esse artigo eu irei utilizar o VS Code. Em seguida, atualize o seu provider com o código abaixo:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import {NewsModel} from '../..//models/news-model'
/*
Generated class for the NytApiProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class NytApiProvider {
private apiUrl = 'https://api.nytimes.com/svc/topstories/v2/home.json?api-key={your key}';
constructor(public http: Http) {}
getTopStories(page): Observable<NewsModel[]> {
return this.http.get(this.apiUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body || { };
}
private handleError (error: Response | any) {
let errMsg = `${error.status} - ${error.statusText || ''}`;
console.error(errMsg);
return Observable.throw(errMsg);
}
}
Agora para organizar o código, vamos criar uma Model para o nosso APP. Para isso, crie um novo diretório chamado Models e dentro dele um arquivo chamado news-model.ts, em seguida atualize ele com o código abaixo:
export class NewsModel {
constructor(
public title?: string,
public date?: Date) { }
}
Não podemos esquecer de adicionar HttpModule e NytApiProvider no nosso arquivo app.module.ts.
O próximo passo será injetar o NytApiProvider na nossa HomePage. Para isso, atualize o seu arquivo home.ts com o código abaixo:
import { Component } from "@angular/core";
import { NavController } from "ionic-angular";
import { NytApiProvider } from "../../providers/nyt-api/nyt-api";
import { NewsModel } from "../..//models/news-model";
@Component({
selector: "page-home",
templateUrl: "home.html"
})
export class HomePage {
data: any;
news: NewsModel[] = [];
errorMessage: string;
page = 1;
perPage = 0;
totalData = 0;
totalPage = 0;
constructor(public navCtrl: NavController, private nyt: NytApiProvider) {
this.getTopStories();
}
getTopStories() {
this.nyt.getTopStories(this.page).subscribe(res => {
this.data = res;
for (let i = 0; i <= 10; i++) {
let n = new NewsModel(
this.data.results[i].title,
this.data.results[i].published_date
);
this.news.push(n);
}
this.perPage = 10;
this.totalData = this.data.num_results;
this.totalPage = 10;
}, error => (this.errorMessage = <any>error));
}
doInfinite(infiniteScroll) {
this.totalPage = this.page * 10;
setTimeout(() => {
let result = this.data.results.slice(this.page * 10);
for (let i = 1; i <= this.perPage; i++) {
if (result[i] != undefined) {
let n = new NewsModel(result[i].title, result[i].published_date);
this.news.push(n);
}
}
this.page += 1;
infiniteScroll.complete();
}, 2000);
}
}
Analisando o código acima nós temos dois métodos: getTopStories que faz um request ao nosso provider e popula a nossa NewsModel e o doInfinite que é requisitado no nosso scroll.
Como a API do NWT não tem paginação, eu precisei fazer a páginação no APP, mas em cenário real, a melhor forma seria que essas regras ficassem no backend.
Agora atualize o seu arquivo home.html com o código abaixo:
<ion-header>
<ion-navbar>
<ion-title>
<img src="https://a1.nyt.com/assets/homepage/20171218-150818/images/foundation/logos/nyt-logo-379x64.png"/>
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let n of news">
<h1>{{n.title}}</h1>
<h6>{{n.date}}</h6>
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="totalPage < totalData">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
O ponto mais importando do código a cima está entre as linhas 18 e 20, onde utilizamos ion-infinite-scroll para fazer um request ao nosso método doInfinite() toda vez que o componente apresentar todos os itens que estão na nossa Model, até que o total da Model seja maior que o total de itens.
Caso você queira baixar a versão final do projeto criado nesse artigo, segue o seu link no GitHub.
Usado e recomendado pelo Facebook ao lado de uma variedade de aplicativos React, o Jest é bem suportado. Jest também relata uma biblioteca de testes muito rápida devido ao seu teste paralelo inteligente.
instale Jest usando npm:
npm install --save-dev jest
Ou pelo yarn:
yarn add --dev jest
Comecemos por escrever um teste para uma função hipotética que acrescenta dois números. Primeiro, crie um arquivo sum.js:
function soma(a, b) {
return a + b;
}
module.exports = soma;
Em seguida, crie um arquivo chamado sum.test.js. Isso conterá o nosso teste real:
const soma= require('./soma);
test('somar 1 + 2 é igual a 3', () => {
expect(sum(1, 2)).toBe(3);
});
Adicione a seguinte seção ao seu pacote.json:
{
"scripts": {
"test": "jest"
}
}
Finalmente, execute o teste npm e Jest imprimirá esta mensagem:
PASS ./soma.test.js ✓ somar 1 + 2 é igual a 3 (5ms)
Aprender JavaScript pode ser confuso por uma série de razões. Não permita que essas siglas o confundam mais. Vamos dividir e conquistar as abreviaturas do JS eES neste post!
Aqui está o que aconteceu há muito tempo atrás: O JavaScript foi originalmente chamado de assim na esperança de capitalizar o sucesso do Java. Então a Netscape enviou JavaScript para a organização que padroniza informações, conhecida como ECMA International for Standardization. Isso resultou em um novo padrão de idioma, conhecido como ECMAScript.
Simplificando, o ECMAScript é um padrão. Enquanto o JavaScript é a implementação mais popular desse padrão. O JavaScript implementa o ECMAScript e constrói em cima dele.
ES é simplesmente curto para ECMAScript. Toda vez que você vê ES seguido de um número, ele está fazendo referência a uma edição do ECMAScript. Na verdade, existem oito edições do ECMAScript publicadas. Abaixo listaremos quais foram as primeiras 4 edições do ECMAScript, e para economizar tempo, não vamos também em profundidade. Apenas saiba que as três primeiras edições foram anuais, e a quarta foi abandonada devido a diferenças políticas.
Agora veremos as versões mais recentes e o que elas fizeram de diferente
Dezembro de 2009: quase 10 anos depois, o ES5 foi lançado em 2009. Levaria quase seis anos para que a próxima versão do ECMAScript fosse divulgada. Adiciona “strict mode”, ao subconjunto destinado a fornecer uma verificação de erros mais completas e construções propensas a erros. Esclarece muitas ambiguidades nas especificações da 3ª edição e acomoda o comportamento de implementações do mundo real que diferiram consistentemente dessa especificação. Adiciona alguns novos recursos, como getters e setters, suporte de biblioteca para JSON e reflexão mais completa sobre propriedades do objeto.
Talvez a causa de toda a sua confusão começa aqui. Você vê, ES6 e ES2015 são a mesma coisa. ES6 foi o nome popularizado antes da liberação. No entanto, o comitê que supervisiona as especificações do ECMAScript tomou a decisão de passar às atualizações anuais. Com essa mudança, a edição foi renomeada para ES 2015 para refletir o ano de lançamento. Os lançamentos subsequentes também serão nomeados de acordo com o ano em que forem divulgados.
Adiciona nova sintaxe significativa para escrever aplicativos complexos, incluindo classes e módulos, mas os define semanticamente nos mesmos termos que o modo estrito ECMAScript 5. Outros novos recursos incluem iteradores e repetições for/of, funções de seta (arrow), dados binários, arrays digitados, coleções (mapas, conjuntos e mapas fracos), promessas, número e aprimoramentos matemáticos.
A Sétima Edição, também conhecida como ECMAScript 2016, pretende continuar os temas de reforma da linguagem, isolamento de código, controle de efeitos e habilitação de biblioteca / ferramenta de ES2015, inclui dois novos recursos: o operador de exponenciação (**) e Array.prototype.includes.
Novos recursos propostos incluem simultaneidade e atômica, transferência de dados binários de cópia zero, mais número e aprimoramentos de matemática, integração sintática com promessas (aguardar / assíncrono), fluxos observáveis, tipos de SIMD, melhor meta-programação com classes, propriedades de classe e instância, sobrecarga de operador, Tipos de valor, registros, tuplas and traits.
Olá leitores do MundoJS,
Gostaríamos de iniciar uma competição para conhecermos que de vocês é um bom escritor de artigos e para isso, iremos pagar para os 3 artigos que gerarem mais visitas. Gostou? Então aqui vão as regras:
Certo, se você tem algum artigo publicação deste tipo, seguem as condições para postagem
Premiação
A premiação será dada para a página com maior número de visualizações de página durante os dias 05/02/18 até o dia 05/03/18. A data máxima para o envio é o dia 15/02/18.
Obs.: Caso seja detectado plagio, o autor e todos os seus artigos serão desclassificados imediatamente.
De acordo com os autores do Ember, o framework foi concebido para “criar aplicações ambiciosas na web”. Não só as aplicações web de uma única página (SPAs), mas também aplicativos de desktop e móveis. A Apple Music é um dos exemplos mais notáveis de um aplicativo criado com o Ember, um serviço de transmissão de música capaz de suportar milhões de usuários.
O Núcleo do Ember foi criado pensando em um aspecto do desenvolvimento web que irritava seus fundadores. Olhando para o cenário de framework JavaScript, os autores do Ember queriam solucionar algumas falhas que percebem em outros frameworks. Eles sentiram que a capacidade de marcar e compartilhar URLs na web tornou-se mais um recurso de estrutura secundária. O roteamento está sendo visto como em segundo plano, por isso eles o tornaram prioridade no Ember.js.
Além disso, a abordagem popular do model-view-controller (MVC) para frameworks back-end como Rails e .NET não agradava a equipe do Ember. Outras estruturas de MVC JavaScript tendem a se concentrar na View, com os aspectos do Model e do Controller (ferramentas de dados e back-end) mais como segundo plano. A equipe do Ember queria abordar essas questões no Front-End e fornecer uma sensação mais semelhante a uma área de trabalho e que fosse mais fácil de trabalhar.
Embora possa não ter tanta visibilidade quanto o AngularJS ou BackboneJS, o Ember provou seu valor e tem sido usado por desenvolvedores em empresas como Zendesk, LivingSocial, Yahoo !, Timbuk2 e Square.
Do ponto de vista de um desenvolvedor, aqui estão algumas razões para amar a estrutura do Ember.
[download id=”467″]
Olá galera do MundoJs
Vamos a mais um tutorial sobre javascript e games !
Desta vez algo um pouco mais avançado.
Se você está começando agora é melhor tentar antes esse tutorial e esse aqui também.
Este artigo mostra uma maneira de fazer um jogo de carrinho em javascript sem nenhuma imagem.
Para começar vamos desenhar o carrinho com HTML5 e Css:
<div style='position:relative; z-index:2; top:254px; left:254px; width:20px; height:40px; background-color:#000000; border-radius:4px;'> <div style='width:10px; height:4px; background-color:#000000; border:5px solid #ff4444; border-top:none; border-bottom:none;'></div> <div style='width:14px; height:20px; background-color:#999999; border:3px solid #000000;'></div> </div>
Este carrinho ficará no meio da tela.
A pista irá se mover sob o carrinho.
Vamos desenhar a pista num <canvas>
<canvas id=canvas width=460 height=460 style='background-color:#ffffff; border:4px solid #497894; border-radius:10px;'></canvas>
<script>
ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "#385383";
ctx.fillRect(200, 200, 200, 200);
</script>
Vamos fazer esta pista se mover sob o carrinho com a função setTimeout atualizando a posição:
<div style='position:relative; z-index:2; top:254px; left:254px; width:20px; height:40px; background-color:#000000; border-radius:4px;'>
<div style='width:10px; height:4px; background-color:#000000; border:5px solid #ff4444; border-top:none; border-bottom:none;'></div>
<div style='width:14px; height:20px; background-color:#999999; border:3px solid #000000;'></div>
</div>
<canvas id=canvas width=460 height=460 style='background-color:#ffffff; border:4px solid #497894; border-radius:10px;'></canvas>
<script>
ctx = document.getElementById("canvas").getContext("2d");
x = 10;
function move() {
ctx.fillStyle = "#9aba9a";
ctx.fillRect(0, 0, 460, 460);
ctx.fillStyle = "#385383";
x = x + 10;
if (x > 300) x = -400;
ctx.fillRect(200, 200 + x, 200, 200);
setTimeout('move()', 100);
}
move();
</script>
O próximo passo é centralizar tudo usando a tag <center>
Depois disto interceptar o pressionamento das teclas com o atributo onKeydown
<!doctype html>
<html>
<title>Jogo de Corrida</title>
<body onKeyDown="vira(event.keyCode);" bgcolor=#e1e1e1>
<br>
<center>
<div id=carro>
<div style='position:relative; z-index:2; top:254px; width:20px; height:40px; background-color:#000000; border-radius:4px;'>
<div style='width:10px; height:4px; background-color:#000000; border:5px solid #ff4444; border-top:none; border-bottom:none;'></div>
<div style='width:14px; height:20px; background-color:#999999; border:3px solid #000000;'></div>
</div>
</div>
<canvas id=canvas width=460 height=460 style='background-color:#ffffff; border:4px solid #497894; border-radius:10px;'></canvas>
</center>
</body>
<script>
ctx = document.getElementById("canvas").getContext("2d");
x = 10;
function move() {
ctx.fillStyle = "#9aba9a";
ctx.fillRect(0, 0, 460, 460);
ctx.fillStyle = "#385383";
x = x + 10;
if (x > 300) x = -400;
ctx.fillRect(200, 200 + x, 200, 200);
setTimeout('move()', 100);
}
move();
function vira(k) {
alert(k);
}
</script>
</html>
A função ‘vira()’ é executada quando o usuário pressiona qualquer tecla.
Com isso podemos descobrir o código das teclas direcionais.
O próximo passo é fazer o carro rotacionar com o comando <body onKeyDown>
<!doctype html>
<html>
<title>Jogo de Corrida</title>
<body onKeyDown="vira(event.keyCode);" bgcolor=#e1e1e1>
<br>
<center>
<div id=carro>
<div style='position:relative; z-index:2; top:254px; width:20px; height:40px; background-color:#000000; border-radius:4px; transform:rotate(180deg);'>
<div style='width:10px; height:4px; background-color:#000000; border:5px solid #ff4444; border-top:none; border-bottom:none;'></div>
<div style='width:14px; height:20px; background-color:#999999; border:3px solid #000000;'></div>
</div>
</div>
<canvas id=canvas width=460 height=460 style='background-color:#ffffff; border:4px solid #497894; border-radius:10px;'></canvas>
</center>
</body>
<script>
ctx = document.getElementById("canvas").getContext("2d");
x = 10;
function move() {
ctx.fillStyle = "#9aba9a";
ctx.fillRect(0, 0, 460, 460);
ctx.fillStyle = "#385383";
x = x + 10;
if (x > 300) x = -400;
ctx.fillRect(200, 200 + x, 200, 200);
setTimeout('move()', 100);
}
move();
angulo = 18;
function vira(k) {
//alert(k);
if (k == 37) angulo = (angulo + 35) % 36;
if (k == 39) angulo = (angulo + 1) % 36;
document.getElementById('carro').innerHTML = "<div style='position:relative; z-index:2; top:254px; width:20px; height:40px; background-color:#000000; border-radius:4px; transform:rotate(" + angulo + "0deg);'><div style='width:10px; height:4px; background-color:#000000; border:5px solid #ff4444; border-top:none; border-bottom:none;'></div><div style='width:14px; height:20px; background-color:#999999; border:3px solid #000000;'></div></div>";
}
</script>
</html>
Repare que o angulo começa em 18.
O carro rotacionado 180 graus.
Apontado pra baixo.
’37’ e ’39’ são os códigos das teclas ‘esq’ e ‘dir’ do teclado.
Quando ‘esq’ é apertado o valor do angulo aumenta 35.
Como é sempre o resto da divisão por 36… nunca fica maior que 35.
Praticamente (angulo+35)%36 significa angulo-1.
Esse é o movimento básico do carrinho!
Mas tem uns detalhes a mais.
Enquanto o usuário manter a tecla pressionada o carro tem que ficar girando.
Isso complica um pouco porque o sistema operacional dá uma margem… um intervalo… um delay… quando user pressiona.
Para contornar essa situação vamos usar ‘onkeydown’ e ‘onkeyup’.
Mais duas variáveis ‘esq’ e ‘dir’.
E vamos colocar a atualização da variável angulo, e o desenho do carro, dentro da função ‘move()’
<!doctype html>
<html>
<title>Jogo de Corrida</title>
<body onKeyDown="vira(event.keyCode);" onKeyUp="para(event.keyCode);" bgcolor=#e1e1e1>
<br>
<center>
<div id=carro></div>
<canvas id=canvas width=460 height=460 style='background-color:#ffffff; border:4px solid #497894; border-radius:10px;'></canvas>
</center>
</body>
<script>
ctx = document.getElementById("canvas").getContext("2d");
x = 10;
angulo = 18;
esq = false;
dir = false;
function vira(k) {
if (k == 37) esq = true;
if (k == 39) dir = true;
}
function para(k) {
esq = false;
dir = false;
}
function move() {
if (esq) angulo = (angulo + 35) % 36;
if (dir) angulo = (angulo + 1) % 36;
document.getElementById('carro').innerHTML = "<div style='position:relative; z-index:2; top:254px; width:20px; height:40px; background-color:#000000; border-radius:4px; transform:rotate(" + angulo + "0deg);'><div style='width:10px; height:4px; background-color:#000000; border:5px solid #ff4444; border-top:none; border-bottom:none;'></div><div style='width:14px; height:20px; background-color:#999999; border:3px solid #000000;'></div></div>";
ctx.fillStyle = "#9aba9a";
ctx.fillRect(0, 0, 460, 460);
ctx.fillStyle = "#385383";
x = x - 10;
if (x < -400) x = 460;
ctx.fillRect(200, 200 + x, 200, 200);
setTimeout('move()', 50);
}
move();
</script>
</html>
Agora começa a parte complicada!
Fazer o carro se mover em relação à pista.
Para isso vamos usar umas variáveis ‘fatorx’ e ‘fatory’.
Elas vão definir o deslocamento do carro em relação a pista… no eixo x e no eixo y.
Por exemplo… quando o carro estiver inclinado 30 graus ele irá se deslocar 6 pixels no eixo x e -3 pixels no eixo y…
fatorx=[9,8,7,6,5,4,3,2,1,0,-1,-2,-3,-4,-5,-6,-7,-8,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8]; fatory=[0,-1,-2,-3,-4,-5,-6,-7,-8,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,8,7,6,5,4,3,2,1];
<!doctype html>
<html>
<title>Jogo de Corrida</title>
<body onKeyDown="vira(event.keyCode);" onKeyUp="para(event.keyCode);" bgcolor=#e1e1e1>
<br>
<center>
<div id=carro></div>
<canvas id=canvas width=460 height=460 style='background-color:#ffffff; border:4px solid #497894; border-radius:10px;'></canvas>
</center>
</body>
<script>
ctx = document.getElementById("canvas").getContext("2d");
fatorx = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0, -1, -2, -3, -4, -5, -6, -7, -8, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8];
fatory = [0, -1, -2, -3, -4, -5, -6, -7, -8, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1];
px = 10;
py = 10;
angulo = 18;
esq = false;
dir = false;
function vira(k) {
if (k == 37) esq = true;
if (k == 39) dir = true;
}
function para(k) {
esq = false;
dir = false;
}
function move() {
if (esq) angulo = (angulo + 35) % 36;
if (dir) angulo = (angulo + 1) % 36;
document.getElementById('carro').innerHTML = "<div style='position:relative; z-index:2; top:254px; width:20px; height:40px; background-color:#000000; border-radius:4px; transform:rotate(" + angulo + "0deg);'><div style='width:10px; height:4px; background-color:#000000; border:5px solid #ff4444; border-top:none; border-bottom:none;'></div><div style='width:14px; height:20px; background-color:#999999; border:3px solid #000000;'></div></div>";
ctx.fillStyle = "#9aba9a";
ctx.fillRect(0, 0, 460, 460);
px += fatorx[angulo] * 3.7;
py += fatory[angulo] * 3.7;
ctx.fillStyle = "#385383";
ctx.fillRect((200) + py + 38, (200) + px + 28, 200, 200);
setTimeout('move()', 75);
}
move();
</script>
</html>
Agora já temos um carro completamente dirigível !!!
Uhu!!!
Agora vamos à pista.
Vamos criar um ‘array de arrays’ com zeros representando grama e um representando asfalto.
<!doctype html>
<html>
<title>Jogo de Corrida</title>
<body onKeyDown="vira(event.keyCode);" onKeyUp="para(event.keyCode);" bgcolor=#e1e1e1>
<br>
<center>
<div id=carro></div>
<canvas id=canvas width=460 height=460 style='background-color:#ffffff; border:4px solid #497894; border-radius:10px;'></canvas>
</center>
</body>
<script>
ctx = document.getElementById("canvas").getContext("2d");
fatorx = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0, -1, -2, -3, -4, -5, -6, -7, -8, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8];
fatory = [0, -1, -2, -3, -4, -5, -6, -7, -8, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1];
pista = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1],
[1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1],
[1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1],
[1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1],
[1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1],
];
px = 10;
py = 10;
angulo = 18;
esq = false;
dir = false;
function vira(k) {
if (k == 37) esq = true;
if (k == 39) dir = true;
}
function para(k) {
esq = false;
dir = false;
}
function move() {
if (esq) angulo = (angulo + 35) % 36;
if (dir) angulo = (angulo + 1) % 36;
document.getElementById('carro').innerHTML = "<div style='position:relative; z-index:2; top:254px; width:20px; height:40px; background-color:#000000; border-radius:4px; transform:rotate(" + angulo + "0deg);'><div style='width:10px; height:4px; background-color:#000000; border:5px solid #ff4444; border-top:none; border-bottom:none;'></div><div style='width:14px; height:20px; background-color:#999999; border:3px solid #000000;'></div></div>";
ctx.fillStyle = "#9aba9a";
ctx.fillRect(0, 0, 460, 460);
px += fatorx[angulo] * 3.7;
py += fatory[angulo] * 3.7;
ctx.fillStyle = "#385383";
for (x = 0; x < pista.length; x++)for (y = 0; y < pista[x].length; y++)if (pista[x][y] != 0) ctx.fillRect((200 * y) + py + 38, (200 * x) + px + 28, 200, 200);
setTimeout('move()', 75);
}
move();
</script>
</html>
A linha 48 desenha a pista inteira com os ‘for’ e os parâmetros em ‘fillrect’…
Um próximo passo pode ser fazer o carro diminuir a velocidade quando está sobre a grama!
Fazer outras fases…
Fazer a velocidade ir aumentado.
Usar imagens para o carro. Imagens para a pista. pngs transparentes.
‘O céu é o limite.’
Dá para melhorar bem.
Essa é só uma simples versão de 53 linhas
Até onde sei, estudar JavaScript não está incluso em cursos de CC, nem em cursos técnicos (quando muito um basicão para web designers). Por isso, estudar e achar cursos acaba ficando a critério daqueles que querem aprender a programar com essa linguagem.
Acredito que não seja somente comigo, mas quando quero aprender uma tecnologia nova, prefiro não investir dinheiro antes de saber se realmente vale apena me aprofundar no conhecimento. Com o fim de ajudar que está começando ou migrando, estou colocando aqui uma lista de cursos Grátis e material de JavaScript para iniciantes.
Segundo eles: “Neste curso, você vai explorar a linguagem de programação JavaScript, criando uma versão interativa do seu currículo. Você vai aprender os fundamentos de programação JavaScript que você precisa enquanto a constrói novos elementos e seções para melhorar o seu currículo.”
Ótimo curso feito pela equipe da W3C (não confundir com W3schools). Nele, além do JavaScript básico, é visto várias coisas que se tornam necessárias para aqueles que precisaram trabalhar com aplicações web
Continue lendo “Cursos gratuitos de JavaScript para iniciantes”
Aurelia é uma coleção de módulos de JavaScript modernos, que, quando usados em conjunto, funcionam como uma poderosa plataforma para criar aplicativos de navegador, desktop e móveis, todos de código aberto e construídos em padrões de web aberto.
Ao invés de ser uma estrutura monolítica, o framework é dividido em uma coleção de módulos orientados a recursos. Exemplos de módulos de recursos incluem metadados, injeção de dependência, binding, templating, roteador e muito mais. Cada módulo é escrito usando ECMAScript (aka JavaScript) ou TypeScript (um superconjunto estrito de JavaScript que adiciona verificação de tipo de compilação). Muitos desses módulos podem ser usados individualmente em qualquer tipo de projeto de JavaScript, incluindo Node.js.
Os módulos de Aurelia podem ser usados para muitas finalidades, mas seu verdadeiro poder reside em usá-los juntos como uma plataforma de aplicativos de front-end. Se o seu objetivo final é criar experiências ricas e envolventes para seus clientes, encontrando ou excedendo o que é encontrado em aplicações nativas modernas, a Aurelia oferece os meios.
Através de seu rico modelo de componentes, composição dinâmica de UI, roteamento e extenso conjunto de plugins, a Aurelia fornece um conjunto abrangente de recursos e ferramentas para criar qualquer experiência de front-end que você possa imaginar, seja você visando o navegador, celular ou desktop.
Você pode achar que o Aurelia tenha um modelo de licenciamento caro ou seja de origem fechada, mas isso não é verdade. Ele é grátis e seu código é Open Source sob a licença MIT, uma licença muito permissiva usada por muitos projetos populares da web hoje.
Tanto os kits de inicialização e documentação do Aurelia estão disponíveis sob a licença Creative Commons. Também possui um Contrato de Licença de Colaborador (CLA) para aqueles que desejam se juntar à equipe principal trabalhando na Aurelia. Em última análise, isso significa que você pode usar Aurelia sem medo de repercussões legais e podemos construí-lo com a mesma confiança.
Existem muitas vantagens técnicas para usar a Aurelia. Neste artigo, você encontrará uma lista de pontos que pensamos serem interessantes. Em conjunto, hoje não existe outra estrutura de SPA que possa combinar Aurelia.
Veja mais no site deles: http://aurelia.io/
E para exemplos: http://aurelia.io/docs/overview/technical-benefits
Foi ao ar a sessão de fórum do MundoJS! Com ela você poderá fazer as perguntas, trocar ideias e sugestões com a comunidade.
Convidamos a todos para visitar e contribuir para que possamos aumentar a base de conhecimento do site e disponibilizar mais conteúdo em português!
Para que tudo funcione certo, seguem algumas regras: