JavaScript: debuxa un punto

Imos aprender a debuxar un punto en JavaScript nun navegador.. non é técnicamente difícil, pero só para aqueles que non están preparados para debuxar un punto en Internet: este é, por suposto, todo un logro.

Hai moitas formas de debuxar un punto, vexámolos

Construtores de xogos



Usando Unity/Godot/microStudio ou calquera dos miles de creadores de xogos... todos eles crearán algún código dun xeito ou outro que será JavaScript ou Webassembly, e aínda nos mostrarán o punto.Non nos interesa este camiño.non entenderemos realmente o que está a suceder, o control sobre o código será mínimo e ilexible no código fonte, ademais é enorme.

Marcos de JavaScript

Este camiño dos Jedi está o máis próximo posible a nós, porque.o noso código non será grande e claro como o día, non abstraeremos moito, non aumentaremos moito o noso código coas bibliotecas.O control do código tamén sería xenial

JavaScript puro

Este é, por suposto, o camiño dos Jedi.O código é o máis complicado posible, o máximo control das cousas que, por así dicilo, non precisan ser controladas.Os códigos fonte son os máis mínimos e co coñecemento do JavaScript de Golimy, podemos ir con seguridade para buscar un emprego, porque.necesitamos xente así.

Pero a nosa tarefa non é atopar traballo, senón debuxar un punto dun xeito sinxelo e sinxelo.O noso vector é a velocidade e a flexibilidade.

Eu escollín a biblioteca

p5js para debuxar un punto.Non se trata só de que, por suposto, se a tarefa fose debuxar un punto e xa está, claro, todo habería que facerse en simple JavaScript, pero estou facendo isto en perspectiva, .k.entón ti e mais eu faremos outras cousas que parecerán incribles, e para iso necesitamos unha boa ferramenta.Un deles é p5js.

En JavaScript de golim, necesitamos crear un lenzo para definir as funcións de inicialización e redeseño, en p5 tamén se fai, pero de forma moi concisa.

Pero primeiro..

Configuración do contorno mínimo para o desenvolvemento de JavaScript

Descargar

p5.min.js e mantelo lado a lado.

como isto

índice.html

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

bosquexo.js

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

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

Isto abrirase no teu navegador así:

Ben, HTML é comprensible, pero que tipo de código JavaScript é este?

a función de configuración é a inicialización, execútase unha vez, nela creamos un lenzo, é dicir.zona onde debuxaremos un punto.window.innerWidth, window.innerHeight

é o ancho e o alto da pantalla, é dicir.definimos un lenzo a pantalla completa e si, o HTML tamén ten un estilo moi importante para isto

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

Non necesitamos inicializar nada máis, só necesitamos debuxar un punto.Mira o principio aquí .. a función de debuxo execútase, por exemplo, 60 veces por segundo, e 60 veces por segundo debuxaremos o noso punto .. Parece que isto é estúpido, só necesitamos debuxar un punto e iso é iso, pero no futuro será a base para toda a animación xeral.

En xeral, o código para debuxar un punto é moi sinxelo:

point(10,10)

e xa está!

Non obstante, o noso código é un pouco maior

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

fondo negro

estrela branca

grosor do punto 10

e debuxámolo no centro da vertical e horizontal.

Pois... debuxamos un punto no lenzo, todo está como debe ser, pero ata poderíamos debuxalo en HTML puro sen ningún JavaScript.. Como sería?

Faino elemental e aínda máis sinxelo, pero os principios son completamente diferentes, aquí está o código final para debuxar un cadrado no centro da pantalla

<!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 é case o mesmo

Si, é bastante sinxelo debuxar algo no centro en HTML, pero para engadir animacións, e máis aínda un interactivo sensato, terás que pensar segundo os principios de CSS.Aínda que é unha tarefa bastante interesante.Só unha cousa elemental mata todo isto, non hai números aleatorios en CSS, isto matará todos os nosos intentos no futuro, polo que darei menos preferencia a esta dirección.

Se imaxino que quero facer un ceo estrelado en CSS espido, entón todo non me funcionará, porqueas estrelas deberían aparecer en posicións aleatorias, e se teñen coordenadas creadas previamente, non será tan bonito nin tan sinxelo, porque podes escribir un xerador de números aleatorios en CSS, pero tal código parecerá completamente feo, ilexible e difícil de leer. entende!



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