Phaser.js #2 – Criando jogo Parte 1

Olá pessoal, nesta sequência de artigos, iremos criar um jogo utilizando a Phaser.js. É necessário que você conheça os procedimentos de instalação de servidores web e instalação do Phaser. Recomendo a leitura desta postagem, que é a primeira postagem da série Phaser.js. Você pode acessá-lo clicando aqui.

Vamos começar?

Primeiro, se faz necessário o download deste arquivo zip, que contém tudo o que você necessita para criar o jogo.

[download id=”3357″]

Passo 1:

Abra o arquivo part1.html no seu editor de código favorito. Você deverá ver um código parecido com este:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Making your first Phaser 3 Game - Part 1</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script type="text/javascript">

    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: {
            preload: preload,
            create: create,
            update: update
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
    }

    function create ()
    {
    }

    function update ()
    {
    }

</script>

</body>
</html>

Este é a nossa configuração inicial. Muitas coisas serão inseridas nessa configuração, a medida que o nosso conhecimento em Phaser é expandido. Agora, nós definiremos o renderizador, as dimensões e uma cena padrão.

Uma instância de um objeto Phaser.Game é atribuída a uma variável local chamada game e o objeto de configuração é passado para ela. Isso inicia o processo de dar vida ao seu jogo em Phaser!

Renderização:

A propriedade type pode ser Phaser.CANVAS, Phaser.WEBGL ou Phaser.AUTO. Este é o contexto de renderização que você deseja usar no seu jogo. O valor recomendado é o Phaser.AUTO, que usa automaticamente o WebGL, mas se não houver suporte do navegador, ele usará o Canvas. O elemento criado será anexado ao documento no momento que o script for chamado.

Dimensões:

As propriedades width e height definem a largura e altura do seu elemento tela, respectivamente. Usaremos 800 x 600 pixels.

Cena:

Vamos carregar os assets que precisamos para o nosso jogo. Faremos isso criando chamadas para o Phaser dentro de uma função chamada preload. O Phaser procurará automaticamente essa função quando carregar a tela e carregará qualquer coisa que esteja definida dentro dela.

Insira o seguinte código dentro de sua função preload vazia:

function preload ()
{
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

Isso irá carregar 5 assets: 4 imagens e uma folha de sprites. O Primeiro parâmetro, chamado de asset key (por exemplo, “sky”, “bomb”), é uma sequência que é um link para o material carregado, e é o que você usará no seu código ao criar objetos do jogo.

Exibindo o background:

Para exibir o background do seu jogo, colocaremos o seguinte código dentro da função create:

this.add.image(400, 300, 'sky');

Isso irá carregar um background de um céu azul. Você pode encontrar isso feito no seu arquivo part3.html.

Sua saída deve ser assim:

Você pode ler o artigo original em inglês neste link: http://phaser.io/tutorials/making-your-first-phaser-3-game/part1

Está gostando destes artigos sobre Phaser? Siga acompanhando e comente abaixo!

Phaser.js #1 – Intro

Nesta série de artigos iremos abordar o desenvolvimento de jogos utilizando o Phaser.js, uma ferramenta para criação de jogos JavaScript. Abordaremos um ambiente para que você crie seus jogos. Nisto, se inclui a execução de um servidor Web local e obtenção da versão mais recente do Phaser.

Por que utilizar um servidor web local?

Quando você solicita algo na web, você usa o protocolo http, que garante que você acesse apenas os arquivos aos quais está destinado. Se você utiliza o file:// para arquivos locais, não há segurança a nível de servidor.

O seu jogo precisará carregar alguns recursos, como imagens, arquivos de áudio, JSON e alguns arquivos JavaScript. Ele precisa ter a segurança necessária para ficar livre de possíveis ataques. Por isso utilizaremos o servidor web, que disponibiliza o http://

Recomendo o uso do XAMPP, que possui uma configuração fácil.

Qual editor de código usar?

Realmente, fica a seu critério. Utilize o seu editor de texto favorito. Particularmente, eu prefiro o Visual Studio Code.

Fazendo o download do Phaser:

Você pode fazer o download diretamente da página de downloads.

npm:
npm install phaser@3.21.0
cdn:
<script src="//cdn.jsdelivr.net/npm/phaser@3.21.0/dist/phaser.js"></script>
<script src="//cdn.jsdelivr.net/npm/phaser@3.21.0/dist/phaser.min.js"></script>

Instalados o servidor, editor de texto e baixado o Phaser? Então vamos começar!

Criando um Olá Mundo!

Chegou a hora de criarmos algo e verificarmos se tudo está funcionando perfeitamente. Certifique-se de descobrir o webroot do seu servidor e crie um arquivo index.html dentro dele. Insira o seguinte código:

<! DOCTYPE html>
<html>
<head>
    <script src = "https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"> </script>
</head>
<body>

    <script>
    var config = {
        tipo: Phaser.AUTO,
        largura: 800,
        altura: 600,
        física: {
            padrão: 'arcade',
            videogames: {
                gravidade: {y: 200}
            }
        }
        cena: {
            preload: preload,
            criar: criar
        }
    };

    var game = novo Phaser.Game (config);

    função preload ()
    {
        this.load.setBaseURL ('http://labs.phaser.io');

        this.load.image ('céu', 'ativos / céu / espaço3.png');
        this.load.image ('logo', 'assets / sprites / phaser3-logo.png');
        this.load.image ('vermelho', 'ativos / partículas / red.png');
    }

    função create ()
    {
        this.add.image (400, 300, 'céu');

        partículas de var = this.add.particles ('red');

        var emissor = particulas.createEmitter ({
            velocidade: 100,
            escala: {início: 1, final: 0},
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image (400, 100, 'logo');

        logo.setVelocity (100, 200);
        logo.setBounce (1, 1);
        logo.setCollideWorldBounds (true);

        emitter.startFollow (logo);
    }
    </script>

</body>
</html>

Inicialize o seu servidor, e acesse o endereço 127.0.0.1/index.html.

Você deve ver uma saída parecida com isso:

Detalhe: é uma animação xD

Se ocorreu algum erro, ou a animação não está sendo visualizada, abra as suas opções de desenvolvedor do navegador e verifique o que o console está logando.

Onde consigo mais exemplos?

Você pode verificar os exemplos em Phaser aqui. Você encontrará um editor de código ativo, para modificar o código e executá-lo em tempo real para ver as alterações imediatamente.

Você também pode fazer o download de todos os exemplos no repositório do github. Você encontrará todos os recursos para uso em seus próprios jogos.

Você pode ler o artigo original em inglês neste link: https://phaser.io/tutorials/getting-started-phaser3/index

Gostou deste artigo? Fique atento à sequência que logo será lançada 😀

Exemplo Prático: Node.js

Neste tutorial, irei demonstrar como criar a sua primeira aplicação Olá Mundo em node.js. Para instalar o node.js na sua máquina, confira o link a seguir: https://nodejs.org/en/

Vamos começar!

Você pode realizar este tutorial utilizando Windows, Linux ou Mac. Você precisará:

  • Criar uma pasta chamada projects dentro do seu diretório de usuário. Você pode fazer isso utilizando os seguintes comandos no Windows:
> mkdir %USERPROFILE%\projects
> cd %USERPROFILE%\projects
  • No Linux e Mac:
$ mkdir ~/projects
$ cd ~/projects

Agora, acesse a pasta e crie um arquivo chamado ola-mundo.js dentro da sua pasta projects. O próximo passo é inserir este código dentro do seu arquivo olamundo.js. Use o seu editor de texto favorito para tal ação.

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Ola Mundo!\nBem vindo ao nodejs');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

O que fazer agora?

Você já tem tudo preparado para sua primeira aplicação simples em node. O próximo passo é:

  • Com o seu terminal aberto, e na pasta projects, escreva o seguinte comando para executar o seu servidor node:
$ node ola-mundo.js

Observação:

Não utilize o “&” e “<” nos seus comandos, eles são apenas um indicativo de início de comando. Eles estão lá apenas para replicar como apareceria no seu terminal.

Feito isto, a sua saída no terminal deve ser algo parecido com isso:

Server running at http://127.0.0.1:3000/

Isso significa que o seu servidor está rodando no endereço 127.0.0.1:3000.

Para acessá-lo, abra o seu navegador e, na url, digite este endereço: http://127.0.0.1:3000/

O seu navegador deve estar mostrando em tela algo como isso:

Se o seu navegador mostrar a frase “Ola Mundo! Bem vindo ao node.js”, significa que o seu servidor está funcionando.

Parabéns, a sua primeira aplicação Node.js já está funcionando!

Para adquirir mais conhecimentos, recomendo que leia a documentação, disponível em: Documentação Node.js

Gostou deste artigo? Comente abaixo!

Dica rápida: Livros para aprender JavaScript

Olá, neste artigo irei mostrar três livros que possuem ótimas referências e excelente didática para você aprender JavaScript!

Existem diversas formas de aprender programação atualmente. Cursos, artigos, diversos sites e grupos específicos de programação. Você até mesmo consegue aprender a programar em vídeos disponíveis no YouTube, além de ter a possibilidade de aprender a linguagem diretamente na documentação. Mas nada como o bom e velho livro, não é mesmo?

Vamos lá:

Use a cabeça! Programação JavaScript.

Este livro ensina tudo sobre a linguagem JavaScript, desde os tópicos mais básicos até os mais avançados. Isto inclui: objetos, funções e o DOM. No livro, você jogará jogos e resolverá muitos quebra-cabeças para interagir com o JavaScript de diversas formas. Você irá escrever códigos de verdade para que possa criar suas próprias aplicações web. O livro utiliza um formato visualmente rico.

Editora: Alta Books

 

JavaScript: O Guia Definitivo

O guia definitivo de JavaScript oferece uma descrição muito ampla de funcionalidades do JavaScript, bem como de APIs JavaScript client-side definida pelos navegadores. Abrange o ECMAScript 5 e HTML5. É recomendado para quem deseja aprender a linguagem JavaScript e para programadores JS que já dominam a linguagem e querem ampliar seus conhecimentos.

Editora: Bookman

 

Estrutura De Dados e Algoritmos Com JavaScript

Este livro ensina a base de estrutura de dados e algoritmos para você aprender a escrever códigos complexos e eficazes utilizando os mais novos recursos da ES. O livro começa abordando o básico sobre JavaScript e apresenta as estruturas de dados mais importantes, como arrays, filas, pilhas e listas encadeadas. Você terá conhecimento sobre tabelas hash e você também terá compreensão de como os grafos são utilizados. Aprenderá a ordenar as estruturas de dados usando algoritmos como bubble sort, merge sort, quick sort, entre outros; E também a realizar pesquisas de elementos em estruturas de dados usando a ordenação sequencial e a busca binária.

Gostou deste artigo? Comente abaixo outros livros que você indica!

Estrutura de Dados com JavaScript: Lista Duplamente Encadeada

A lista duplamente encadeada funciona pelo mesmo princípio que a lista encadeada. No entanto, cada nó contém uma referência ao nó anterior e ao próximo, se esse nó estiver disponível. Isso é particularmente útil quando é necessário viajar para trás e para frente.

Nossa lista Duplamente Encadeada será o desafio final e o mais longo com 9 métodos adicionais:

DisplayAllBackwards() DisplayAt(index), AddFirst(data),AddLast(data), Add(data, index), RemoveFirst(), RemoveFirst(), RemoveAt().

DisplayAll():

Descrição:

Retorna um array com os dados, ou se está vazio, retorna null.

this.DisplayAll = function() {
    // Na maioria das vezes, head não será nulo, então vamos começar com isso agora
    if (head) {
        let arr = new Array();
        let atual = head;
        for (let i = 0; i < contador; i++) {
            arr[i] = atual.dado;
            atual = atual.proximo;
        }
        return arr;
    } else {
        return null;
    }
}

DisplayAllBackwards():

Descrição:

Retorna um array com os dados do tail ao head ou, se vazio, retorna nulo. Dê uma olhada neste método e pense em como seria difícil implementá-lo em uma lista encadeada simples.

this.DisplayAllBackwards = function() {
    if (head) {
        let arr = new Array();
        let atual = tail;
        for (let i = 0; i < contador; i++) {
            arr[i] = atual.dado;
            atual = atual.anterior;
        }
        return arr;
    } else {
        return null;
    }
}

DisplayAt():

Descrição:

Funciona da mesma forma de uma lista encadeada simples.

this.DisplayAt = function(index) {
    // verifica valores fora dos limites
    if (index > -1 && index < contador) {
        let atual = head;
        let i = 0;

        // não fui eu, é da nczonline (veja fonte).
        // É uma maneira diferente de implementar o FOR que estamos usando
        // e queria que todos tivessem a chance de conhecê-lo.
        while (i++ < index) {
            atual = atual.proximo;
        }

        return atual.dado;
    } else {
        return null;
    }
}

AddFirst():

Descrição:

Adiciona no início da lista duplamente encadeada.

this.AddFirst = function(dado) {
    // Cria um novo nó
    let node = new Node(dado);
    node.proximo = head;

    head = node;

    //Se a lista está vazia
    if (contador === 0) {
        tail = head;
    } else {
        //Não se esqueça do nó anterior. Ele precisa ser referenciado
        head.proximo.anterior = head;
    }

    contador++;
}

AddLast():

Descrição:

Adiciona ao final da lista duplamente encadeada.

this.AddLast = function(dado) {
    let node = new Node(dado);
    node.anterior = tail;

    if (contador === 0) {
        head = node;
    } else {
        tail.proximo = node;
    }

    tail = node;

    contador++;
}

Add():

Descrição:

Adiciona um item em uma posição específica. Dica: desenhe o processo se necessário. Não é tão simples quanto você imagina.

this.Add = function(dado, index) {
    // verifica valores fora dos limites
    if (index > 0 && index < contador) {

        let node = new Node(dado);
        let atual = head;
        let i = 0;

        // encontre o local certo
        while (i++ < index) {
            atual = atual.proximo;
        }

        atual.anterior.proximo = node;
        node.proximo = atual;
        node.anterior = atual.anterior;
        atual.anterior = node;

        contador++;
    } else if (index < 1) {
        this.AddFirst(dado);
    } else {
        this.AddLast(dado);
    }
}

RemoveFirst():

Descrição:

Remove o primeiro item.

this.RemoveFirst = function() {
    if (head) {

        head = head.proximo;
        contador--;
        //Se há apenas um item
        if (contador === 0) {
            tail = null;

        } else {
            // Não se esqueça do nó anterior. Ele também precisa que o conjunto de referência seja nulo.
            head.anterior = null;

        }
    }
}

RemoveLast():

Descrição:

Remove o último item.

this.RemoveLast = function() {
    if (head) {
        // existe apenas um item
        if (contador === 1) {
            head = null;
            tail = null;
        } else {
            tail.anterior.proximo = null;
            tail = tail.anterior;
        }

        contador--;
    }
}

RemoveAt():

Descrição:

Remove um item de uma posição específica.

this.RemoveAt = function(index) {
    // verifica valores fora dos limites
    if (index > 0 && index < contador - 1) {

        let atual = head;
        let i = 0;

        // encontre o local certo
        while (i++ < index) {
            atual = atual.proximo;
        }

        atual.anterior.proximo = atual.proximo;
        atual.proximo.anterior = atual.anterior;

        contador--;
    } else if (index < 1) {
        this.RemoveFirst();
    } else {
        this.RemoveLast();
    }
}
  • DISPLAYALL():
  • DISPLAYALLBACKWARDS():
  • DISPLAYAT(INDICE):
  • ADDFIRST(DADO):
  • ADDLAST(DADO):
  • ADD(DADO,INDICE):
  • REMOVEFIRST():
  • REMOVELAST():
  • REMOVEAT(INDICE):

Estrutura de Dados com JavaScript: Deque (Fila duplamente encadeada)

A fila duplamente encadeada é basicamente como uma fila, exceto que você pode adicionar ou remover de qualquer lado. Agora que você está um pouco mais acostumado a como isso funciona, eu gostaria de tornar as coisas um pouco mais difíceis.

function Deque() {
    let contador = 0;
    let head = null;
    let tail = null;

    // Permite visualizar o valor armazenado na cabeça
    this.getHead = function() {
        if (head) {
            return head.dado;
        }

        return null;
    }

    // Permite visualizar o valor armazenado no final
    this.getTaill = function() {
        if (tail) {
            return tail.dado;
        }
        return null;
    }

    // Retorna o número de itens na fila
    this.Getcontador = function() {
        return contador;
    }

    // Permite definir a estrutura do nó fora de cada método.
    // Dessa forma, será necessário fazer apenas uma vez
    let Node = function(dado) {
        this.dado = dado;
        this.proximo = null;
    }

}

 

A fila duplamente encadeada terá muito mais métodos que o outro, com um total de 10, os que você já viu e:

DisplayHeadToTail(), DisplayTailToHead() AddHead(data), AddTail(data),RemoveHead() e RemoveTail().

DisplayHeadToTail():

Descrição:

Retorna um array com os dados ou, se vazio, retorna null.

this.DisplayHeadToTail = function() {
    if (head != null) {
        let arr = new Array();
        let atual = head;

        // enquanto houver um atual
        while (atual) {

            // ATENÇÃO: Para quem é novo no javascript, dê uma olhada. Você consegue adivinhar o que esse método faz?
            arr.push(atual.dado);
            atual = atual.proximo;
        }

        return arr;
    } else {
        return null;
    }
}

DisplayTailToHead():

Descrição:

Retorna os dados da fila duplamente encadeada do início ao fim (oposto ao anterior).

this.DisplayTailToHead = function() {
    if (head != null) {

        // Chama DisplayHeadToTail() e inverte ela.
        let arr = this.DisplayHeadToTail();

        // Este é um dos grandes métodos do JavaScript.
        return arr.reverse();
    } else {
        return null;
    }
}

AddHead():

Descrição:

Adiciona ao início (head) da fila duplamente encadeada.

this.AddHead = function(dado) {

    // Como você pode ver, agora nós precisamos declarar um novo nó
    let node = new Node(dado);

    node.proximo = head;
    head = node;

    // Se a lista está vazia:
    if (!tail) {
        tail = head;
    }

    contador++;
}

AddTail():

Descrição:

Adiciona ao final (tail) da fila duplamente encadeada.

this.AddTail = function(dado) {
    let node = new Node(dado);

    // Se a lista está vazia
    if (!head) {
        head = node;
    } else {
        tail.proximo = node;
    }

    tail = node;
    contador++;
}

RemoveHead():

Descrição:

Remove o início(head) da fila duplamente encadeada.

this.RemoveHead = function() {
    if (head) {
        // Se é o item final
        if (contador === 1) {
            head = null;
            tail = null;
        } else {
            head = head.proximo;
        }

        contador--;
    }
}

RemoveTail():

Descrição:

Remove o elemento final (tail) da fila duplamente encadeada:

this.RemoveTail = function() {
    if (head) {
        // Se não é o último item
        if (contador === 1) {
            head = null;
            tail = null;
        } else {
            let atual = head;

            // precisamos ir tão longe quanto os dois antes da última
            while (atual.proximo.proximo) {
                atual = atual.proximo;
            }

            tail = atual;
            tail.proximo = null;
        }

        contador--;
    }
}
  • DisplayHeadToTail():
  • DisplayTailToHead():
  • AddHead(dado):
  • AddTail(dado):
  • RemoveHead():
  • RemoveHead():

Gostou deste artigo? Comente abaixo!

TypeScript: Adicionando description em um Enum

Dando continuidade ao meu artigo anterior: TypeScript: Enums, hoje eu irei demonstrar como criar uma descrição para cada um dos elementos de um enum, e como recuperar essa descrição a partir de suas chaves. Para isso, eu irei utilizar o enum criado no artigo anterior de dias da Semana.

Caso você não tenha lido o artigo anterior, segue o enum mencionando abaixo:

export enum DiaDaSemana {
    Segunda = 1,
    Terca = 2,
    Quarta = 3,
    Quinta = 4,
    Sexta = 5,
    Sabado = 6,
    Domingo = 7,
}

Conforme demonstrei no artigo anterior, nós podemos pegar os valores de um enum pela sua chave ou pelo seu valor.

Agora pensando em um cenário mais próximo do nosso dia dia e focando no enum acima, não seria mais interessante retornar : “Segunda-feira” ou “Terça-feira” … etc ?

Em outras linguagens como C# nós podemos utilizar as descriptions dos enums, mas e no TS como fazer isso?

Existem algumas formas, uma delas é com a utilização de um map. A seguir você tem um exemplo de criação de um map para retornar os dias da semana conforme mencionado acima.

export enum DiaDaSemana {
    Segunda = 1,
    Terca = 2,
    Quarta = 3,
    Quinta = 4,
    Sexta = 5,
    Sabado = 6,
    Domingo = 7,
}

export const DiaDaSemanaLabel = new Map<string, string>([
    ['Segunda', 'Segunda-feira'],
    ['Terca', 'Terça-feira'],
    ['Quarta', 'Quarta-feira'],
    ['Quinta', 'Quinta-feira'],
    ['Sexta', 'Sexta'],
    ['Sabado', 'Sábado'],
    ['Domingo', 'Domingo']
]);

Caso você tenha interesse em saber mais sobre o map, eu recomendo a leitura do seguinte artigo: [Dica rápida]TypeScript: map().

Agora para que possamos retornar a descrição do dia da semana, basta executar o trecho de código abaixo:

console.log(DiaDaSemanaLabel.get(DiaDaSemana[1]))

Resultado:

Bem simples né?

Dessa forma nós conseguimos mapear para que os nossos enums retorne um valor mais amigável para o nosso front.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/typescript-adicionando-description-em-um-enum

Gostou deste artigo? Comente abaixo as suas dúvidas!

Angular decode payload JWT

Veja nesse artigo como decodificar o seu token JWT e ler o seu payload.

Dando continuidade aos meus artigos sobre Angular e JWT, hoje eu irei demonstrar como decodificar os dados de um token no lado do seu front.

Caso tenha interesse em ler os meus artigos anteriores sobre esse assunto, segue o link de cada um deles abaixo:

O objetivo desse artigo não sera demonstrar como configurar o JWT em um projeto angular, ele será rápido e objetivo demonstrado através de alguns trechos de código.

O primeiro passo será importar o pacote jwt-decode. Para isso, abra um terminal no seu computador, navegue até o seu projeto e execute o comando abaixo:

npm i jwt-decode --save

Agora execute o comando abaixo para criar serviço no seu projeto para ser responsável por decodificar o token:

ng g s shared/authToken

Em seguida atualize ele com o seguinte trecho de código:

import { Injectable } from '@angular/core';
import * as jwt_decode from 'jwt-decode';


@Injectable({
  providedIn: 'root'
})
export class AuthTokenService {
  public getToken(): string {
    return localStorage.getItem('token');
  }

  public decodePayloadJWT(): any {
    try {
      return jwt_decode(this.getToken());
    } catch (Error) {
      return null;
    }
  }
}

Analisando o trecho de código anterior, note que nós temos um método chamado getToken(), responsável por pegar o token do seu localStorage e um outro método chamado decodePayloadJWT() retornando any, esse método irá decodificar o token e retornar os seus dados de payload.

Obs.: Esse método está retornando any porque o payload pode variar de projeto para projeto, caso você já tenha um contrato definido de retorno o ideal será criar um class ou interface com os dados de retorno no lugar de any.

Bem simples né?

Agora você pode injetar o seu código nos seus componentes e receber os dados do seu token 😉

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/angular-decode-payload-jwt

Gostou deste artigo? Comente abaixo!

Estrutura de Dados com JavaScript: Lista Encadeada

Listas encadeadas são estruturas de dados feitas de grupos de nós que juntos representam uma sequência. Você notará que a Fila e a Pilha foram criadas usando a ideia básica de uma lista encadeada. No entanto, eles têm regras especiais que os tornam diferentes em funcionalidade.

function ListaEncadeada() {
    let contador = 0;
    let head = null;

    this.GetCount = function(){
        return countador;
    }

} 

Nossa lista encadeada terá 6 métodos adicionais: DisplayAll (), DisplayAt (índice), AddFirst (dados), Add (dados, índice), RemoveFirst (), RemoveAt() .

DisplayAll():

Descrição:

O nome já diz tudo. Retorna um array com os dados ou, se vazio, retorna nulo.

this.DisplayAll = function() {
    // se está vazio
    if (head === null) {
        return null;
    } else {
        //senão, percorre a lista e a coloca em um array.
        let arr = new Array();
        let atual = head;

        for (let i = 0; i < contador; i++) {
            arr[i] = atual.dado;
            atual = atual.próximo;
        }
        return arr;
    }
}

DisplayAt():

Descrição:

Como o método PeekAt (indice) anterior da Fila, é exibido em um índice específico ou, fora dos limites, ele retorna null.

this.DisplayAt = function(indice) {
    // verifique se há valores fora dos limites
    if (indice > -1 && indice < contador) {
        let atual = head;
        let i = 0;

        // não fui eu, é da nczonline (veja fonte).
        // É uma maneira diferente de implementar o FOR que estamos usando
        // e eu queria que todos tivessem a chance de conhecê-lo.
        while (i++ < indice) {
            atual = atual.proximo;
        }

        return atual.dado;
    } else {
        return null;
    }
}

AddFirst():

Descrição:

Adiciona à frente da lista. Se você está se perguntando, frente é onde o índice é 0 e referenciado pelo cabeçalho.

this.AddFirst = function(dado) {
    // Cria um novo nó
    let node = {
        dado: dado,
        proximo: head
    };

    head = node;
    contador++;
}

Add()

Descrição:

Adiciona um item à lista na posição especificada.

this.Add = function(dado, indice) {
    // se o índice escolhido for 0, faça o método AddFirst (dado).
    if (indice === 0) {
        this.AddFirst(dado);
    }
    // verifique se há valores fora dos limites
    else if (indice > -1 && indice < contador) {
        let node = {
            dado: dado,
            proximo: null
        };

        let anterior;
        let atual = head;
        let i = 0;

        // encontre o local certo
        while (i++ < indice) {
            anterior = atual;
            atual = atual.proximo;
        }

        anterior.proximo = node;
        node.proximo = atual;

        contador++;
    } else {
        alert("fora de alcance");
    }
}

RemoveFirst()

Descrição:

Remove o primeiro item.

this.RemoveFirst = function() {
    // se não há itens na lista, retorna nulo
    if (head === null) {
        return null;
    } else {
        let out = head;
        head = head.proximo;

        if (contador > 0) {
            contador--;
        }

        return out.dado;
    }
}

RemoveAt()

Descrição:

Remove um item de um índice específico.

this.RemoveAt = function(indice) {
    if (indice === 0) {
        return this.RemoveFirst(indice);
    }
    // verifique se há valores fora dos limites
    else if (indice > -1 && indice < contador) {

        let atual = head;
        let anterior;
        let i = 0;

        // encontre a localização correta
        while (i++ < indice) {
            anterior = atual;
            atual = atual.proximo;
        }

        // pule o item para remover
        anterior.proximo = atual.proximo;

        // diminuir o comprimento
        contador--;
    } else {
        return null;
    }

    // retorna o valor
    return atual.dado;
}
  • DISPLAYALL():
  • DISPLAYAT(INDICE):
  • ADDFIRST(DADO):
  • ADD(DADO,INDICE):
  • REMOVEFIRST():
  • REMOVEAT(INDICE):

Gostou deste artigo? Comente abaixo!