JavaScript: desenhe um ponto

Vamos aprender a desenhar um ponto em JavaScript em um navegador.

Existem muitas maneiras de desenhar um ponto, vamos dar uma olhada nelas

Construtores de jogos



Usando Unity/Godot/microStudio ou qualquer um dos milhares de construtores de jogos... todos eles criarão algum código de uma forma ou de outra que será JavaScript ou Webassembly, e ainda nos mostrarão o ponto.Não estamos interessados ​​neste caminho.não vamos realmente entender o que está acontecendo, o controle sobre o código será mínimo e ilegível no código fonte, além de ser enorme.

Estruturas JavaScript

Este caminho do Jedi é o mais próximo possível de nós, porque.nosso código não será grande e claro como o dia, não abstrairemos muito, não aumentaremos muito nosso código com bibliotecas.O controle de código também seria ótimo

JavaScript puro

Este é, obviamente, o caminho dos Jedi.O código é o mais complicado possível, o controle máximo das coisas que, por assim dizer, não precisam ser controladas.Os códigos-fonte são os mais mínimos e com o conhecimento de JavaScript golimy, podemos ir com segurança para conseguir um emprego, porque.precisamos dessas pessoas.

Mas nossa tarefa não é encontrar um emprego, mas desenhar um ponto de maneira simples e fácil.Nosso vetor é velocidade e flexibilidade.

Eu escolhi a biblioteca

p5js para desenhar um ponto.Não é só isso, claro, se a tarefa fosse desenhar um ponto e pronto, claro, tudo teria que ser feito em JavaScript puro, mas estou fazendo isso em perspectiva, .k.então você e eu faremos outras coisas que ficarão incríveis, e para isso precisamos de uma boa ferramenta.Um deles é o p5js.

Em golim JavaScript, precisamos criar uma tela para definir as funções de inicialização e redesenho, em p5 isso também é feito, mas de forma muito concisa.

Mas primeiro..

Configuração mínima do ambiente para desenvolvimento JavaScript

Download

p5.min.js e mantê-lo lado a lado.

assim

index.html

    <html>
    <head>
        <script src="p5.min.js"></script>
        <script src="sketch.js"></script>
    </head>
    <body style="margin: 0px;">
        <main>
        </main>
    </body>
    </html>

sketch.js

    function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    }

    function draw() {
    background(0);
    stroke('white');
    strokeWeight(10);
    point(window.innerWidth/2,window.innerHeight/2);
    }

Como resultado, seu navegador abrirá assim

Bem, HTML é compreensível, mas que tipo de código JavaScript é esse?

a função setup é inicialização, ela é executada uma vez, nela criamos um canvas, ou seja.área onde vamos desenhar um ponto.window.innerWidth, window.innerHeight

é a largura e a altura da tela, ou seja,definimos um canvas em tela cheia e sim, o HTML tem um estilo muito importante para isso também

<body style="margin: 0px;">

Não precisamos inicializar mais nada, só precisamos desenhar um ponto.Veja o princípio aqui .. a função draw é executada, por exemplo, 60 vezes por segundo, e 60 vezes por segundo vamos desenhar nosso ponto .. parece que isso é estúpido, só precisamos desenhar um ponto e pronto mas no futuro será a base para toda a animação geral.

Em geral, o código para desenhar um ponto é extremamente simples:

point(10,10)

e tudo!

No entanto, nosso código é um pouco maior

  background(0);
  stroke('white');
  strokeWeight(10);
  point(window.innerWidth/2,window.innerHeight/2);

fundo preto

estrela branca

espessura do ponto 10

e desenhamos no centro da vertical e horizontal.

Bem.. desenhamos um ponto na tela, tudo está como deveria ser, mas poderíamos até desenhá-lo em HTML puro sem nenhum JavaScript.. Como seria?

Torna tudo elementar e ainda mais fácil, mas os princípios são completamente diferentes, aqui está o código final para desenhar um quadrado no centro da tela

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color: black;">
    <div style="position: fixed; top: 50%; left: 50%; background-color: white; width: 10px; height: 10px;"></div>
</body>
</html>

O resultado é quase o mesmo

Sim, é muito fácil desenhar algo no centro em HTML, mas para adicionar animações, e ainda mais uma interação sã, você terá que pensar de acordo com os princípios do CSS.Embora seja uma tarefa bastante interessante.Apenas uma coisa elementar mata tudo isso, não há números aleatórios em CSS, isso matará todas as nossas tentativas no futuro, e é por isso que darei menos preferência a essa direção.

Se eu imaginar que quero fazer um céu estrelado em CSS nu, tudo não vai dar certo para mim, porqueas estrelas devem aparecer em posições aleatórias, e se tiverem coordenadas pré-criadas, não será tão bonito e nem tão simples, pois você pode escrever um gerador de números aleatórios em CSS, mas tal código ficará completamente feio, ilegível e difícil de Compreendo!



bg bs ca ceb co cs cy da de el en eo es et fa fi fr fy ga gd gl gu ha haw hi hmn hr ht hu id ig is it iw ja jw ka kk km kn ko ku ky la lb lo lt lv mg mi mk ml mn mr ms mt my ne nl no ny or pa pl ps pt ro ru rw sd si sk sl sm sn so sr st su sv sw ta te tg th tk tl tr tt ug uk ur uz vi xh yi yo zh zu
Text to speech
QR-Code generator
Parsedown cheatsheet. Markdown
Filter data by column with regular expressions
Engines for creating games on LUA ?
JavaScript: draw a point
JavaScript: Speaking text in Chinese