Tecnologia
Guia definitivo para a linguagem de processamento Parte II: Construindo um jogo simples
Esta é a segunda parte do guia definitivo para a linguagem de processamento. Dentro a primeira parte , Eu dei um passo a passo básico da linguagem de processamento. A próxima etapa para você aprender a Processar é simplesmente programação mais prática.
Neste artigo, vou mostrar como usar o Processing para implementar seu próprio jogo, passo a passo. Cada etapa será explicada em detalhes. Em seguida, iremos portar o jogo para a web.
Antes de começarmos o tutorial de processamento, Aqui é o código do exercício do logotipo do DVD da parte anterior. Se você tiver alguma dúvida, deixe um comentário.
Tutorial de processamento: um jogo simples
O jogo Vamos construir neste tutorial de processamento é uma espécie de combinação de Flappy Bird, Pong e Brick Breaker. A razão pela qual escolhi um jogo como este é que ele possui a maioria dos conceitos com os quais os iniciantes lutam ao aprender o desenvolvimento de jogos. Isso é baseado na minha experiência de quando eu era um assistente de ensino, ajudando novos programadores a aprender como usar o Processing. Esses conceitos incluem gravidade, colisões, pontuação, manipulação de telas diferentes e interações teclado / mouse. Flappy Pong tem todos eles nele.
Sem usar conceitos de programação orientada a objetos (OOP), não é fácil construir jogos complexos, como jogos de plataforma com vários níveis, jogadores, entidades etc. Conforme avançamos, você verá como o código fica complicado muito rápido. Fiz o meu melhor para manter este tutorial de processamento organizado e simples.
Aconselho você a seguir o artigo, pegar o código completo, brincar com ele sozinho, começar a pensar em seu próprio jogo o mais rápido possível e começar a implementá-lo.
Então, vamos começar.
Construindo Flappy Pong
Tutorial de processamento na etapa 1: inicializar e manipular telas diferentes
O primeiro passo é inicializar nosso projeto. Para começar, vamos escrever nossa configuração e desenhar blocos como de costume, nada sofisticado ou novo. Em seguida, lidaremos com diferentes telas (tela inicial, tela do jogo, tela do jogo, etc.). Então surge a pergunta: como fazemos o Processing mostrar a página correta no momento correto?
Realizar essa tarefa é bastante simples. Teremos uma variável global que armazena as informações da tela atualmente ativa. Em seguida, desenhamos o conteúdo da tela correta dependendo da variável. No bloco de desenho, teremos uma instrução if que verifica a variável e exibe o conteúdo da tela de acordo. Sempre que quisermos mudar a tela, vamos mudar essa variável para o identificador da tela que queremos mostrar. Dito isso, aqui está a aparência de nosso código de esqueleto:
/********* VARIABLES *********/ // We control which screen is active by settings / updating // gameScreen variable. We display the correct screen according // to the value of this variable. // // 0: Initial Screen // 1: Game Screen // 2: Game-over Screen int gameScreen = 0; /********* SETUP BLOCK *********/ void setup() { size(500, 500); } /********* DRAW BLOCK *********/ void draw() { // Display the contents of the current screen if (gameScreen == 0) { initScreen(); } else if (gameScreen == 1) { gameScreen(); } else if (gameScreen == 2) { gameOverScreen(); } } /********* SCREEN CONTENTS *********/ void initScreen() { // codes of initial screen } void gameScreen() { // codes of game screen } void gameOverScreen() { // codes for game over screen } /********* INPUTS *********/ public void mousePressed() { // if we are on the initial screen when clicked, start the game if (gameScreen==0) { startGame(); } } /********* OTHER FUNCTIONS *********/ // This method sets the necessary variables to start the game void startGame() { gameScreen=1; } Isso pode parecer assustador no início, mas tudo o que fizemos foi construir a estrutura básica e separar as diferentes partes com blocos de comentários.
Como você pode ver, definimos um método diferente para cada tela a ser exibida. Em nosso bloco de desenho, simplesmente verificamos o valor de nosso gameScreen variável e chame o método correspondente.
No void mousePressed(){...} parte, estamos ouvindo cliques do mouse e se a tela ativa for 0, a tela inicial, chamamos de startGame() método que inicia o jogo como você esperava. A primeira linha deste método muda gameScreen variável para 1, a tela do jogo.
Se isso for entendido, o próximo passo é implementar nossa tela inicial. Para fazer isso, iremos editar o initScreen() método. Aqui vai:
void initScreen() { background(0); textAlign(CENTER); text('Click to start', height/2, width/2); } Agora nossa tela inicial tem um fundo preto e um texto simples, “Clique para iniciar”, localizado no meio e alinhado ao centro. Mas quando clicamos, nada acontece. Ainda não especificamos nenhum conteúdo para a tela do nosso jogo. O método gameScreen() não tem nada nele, então não estamos cobrindo o conteúdo anterior retirado da última tela (o texto) com background() como a primeira linha de desenho. É por isso que o texto ainda está lá, embora o text() a linha não está sendo mais chamada (assim como o exemplo da bola em movimento da última parte que estava deixando um rastro) . O fundo ainda é preto pelo mesmo motivo. Então, vamos começar a implementar a tela do jogo.
void gameScreen() { background(255); } Após esta alteração, você notará que o fundo fica branco e o texto desaparece.
Etapa 2 do tutorial de processamento: Criação da bola e implementação da gravidade
Agora, vamos começar a trabalhar na tela do jogo. Vamos primeiro criar nossa bola. Devemos definir variáveis para suas coordenadas, cor e tamanho porque podemos querer alterar esses valores mais tarde. Por exemplo, se quisermos aumentar o tamanho da bola conforme o jogador pontua mais alto, para que o jogo seja mais difícil. Precisaremos mudar seu tamanho, então deve ser uma variável. Definiremos a velocidade da bola também, após implementarmos a gravidade.
Primeiro, vamos adicionar o seguinte:
... int ballX, ballY; int ballSize = 20; int ballColor = color(0); ... void setup() { ... ballX=width/4; ballY=height/5; } ... void gameScreen() { ... drawBall(); } ... void drawBall() { fill(ballColor); ellipse(ballX, ballY, ballSize, ballSize); } Definimos as coordenadas como variáveis globais, criamos um método que desenha a bola, chamado de gameScreen método. A única coisa a prestar atenção aqui é que nós inicializado coordenadas, mas nós as definimos em setup(). A razão pela qual fizemos isso é que queríamos que a bola começasse em um quarto da esquerda e um quinto do topo. Não há nenhuma razão especial para querermos isso, mas é um bom ponto para a bola começar. Portanto, precisávamos obter o width e height do esboço de forma dinâmica. O tamanho do esboço é definido em setup(), após a primeira linha. width e height não são definidos antes de setup() é executado, é por isso que não poderíamos alcançar isso se definíssemos as variáveis no topo.
Gravidade
Agora, implementar a gravidade é na verdade a parte fácil. Existem apenas alguns truques. Aqui está a implementação primeiro:
... float gravity = 1; float ballSpeedVert = 0; ... void gameScreen() { ... applyGravity(); keepInScreen(); } ... void applyGravity() { ballSpeedVert += gravity; ballY += ballSpeedVert; } void makeBounceBottom(float surface) { ballY = surface-(ballSize/2); ballSpeedVert*=-1; } void makeBounceTop(float surface) { ballY = surface+(ballSize/2); ballSpeedVert*=-1; } // keep ball in the screen void keepInScreen() { // ball hits floor if (ballY+(ballSize/2) > height) { makeBounceBottom(height); } // ball hits ceiling if (ballY-(ballSize/2) <0) { makeBounceTop(0); } } E o resultado é:
Segure seus cavalos, físico. Eu sei que não é como a gravidade funciona na vida real . Em vez disso, este é mais um processo de animação do que qualquer coisa. A variável que definimos como gravity é apenas um valor numérico — a float para que possamos usar valores decimais, não apenas inteiros - que adicionamos a ballSpeedVert em cada loop. E ballSpeedVert é a velocidade vertical da bola, que é adicionada à coordenada Y da bola (ballY) em cada loop. Observamos as coordenadas da bola e nos certificamos de que ela permaneça na tela. Se não o fizéssemos, a bola cairia para o infinito. Por enquanto, nossa bola só se move verticalmente. Portanto, observamos os limites do piso e do teto da tela. Com keepInScreen() método, verificamos se ballY ( + o raio) é menor que height e, da mesma forma, ballY ( - o raio) é maior que 0. Se as condições não atenderem, fazemos a bola quicar (de baixo ou de cima) com makeBounceBottom() e makeBounceTop() métodos. Para fazer a bola pular, simplesmente movemos a bola para o local exato onde ela deveria pular e multiplicar a velocidade vertical (ballSpeedVert) por -1 (multiplicar por -1 muda o sinal). Quando o valor da velocidade tem um sinal de menos, adicionando a coordenada Y, a velocidade se torna ballY + (-ballSpeedVert), que é ballY - ballSpeedVert. Assim, a bola muda imediatamente de direção com a mesma velocidade. Então, ao adicionarmos gravity para ballSpeedVert e ballSpeedVert tem um valor negativo, começa a se aproximar de 0, eventualmente se torna 0 e começa a aumentar novamente. Isso faz a bola subir, subir mais devagar, parar e começar a cair.
No entanto, há um problema com nosso processo de animação - a bola continua quicando. Se este fosse um cenário do mundo real, a bola teria enfrentado resistência do ar e atrito cada vez que tocasse uma superfície. Esse é o comportamento que queremos para o processo de animação do nosso jogo, então implementá-lo é fácil. Adicionamos o seguinte:
... float airfriction = 0.0001; float friction = 0.1; ... void applyGravity() { ... ballSpeedVert -= (ballSpeedVert * airfriction); } void makeBounceBottom(int surface) { ... ballSpeedVert -= (ballSpeedVert * friction); } void makeBounceTop(int surface) { ... ballSpeedVert -= (ballSpeedVert * friction); } E agora nosso processo de animação produz isso:
Como o nome sugere, friction é o atrito da superfície e airfriction é a fricção do ar. Obviamente, friction tem que ser aplicado cada vez que a bola tocar qualquer superfície. airfriction no entanto, tem que ser aplicado constantemente. Então foi isso que fizemos. applyGravity() método é executado em cada loop, então retiramos 0.0001 por cento de seu valor atual de ballSpeedVert em cada loop. makeBounceBottom() e makeBounceTop() métodos executados quando a bola toca qualquer superfície. Então, nesses métodos, fizemos a mesma coisa, só que desta vez com friction .
Etapa 3 do tutorial de processamento: Criação da raquete
Agora precisamos de uma raquete para a bola saltar. Devíamos estar controlando a raquete. Vamos torná-lo controlável com o mouse. Aqui está o código:
... color racketColor = color(0); float racketWidth = 100; float racketHeight = 10; ... void gameScreen() { ... drawRacket(); ... } ... void drawRacket(){ fill(racketColor); rectMode(CENTER); rect(mouseX, mouseY, racketWidth, racketHeight); } Definimos a cor, largura e altura da raquete como uma variável global, podemos querer que mudem durante o jogo. Implementamos um método drawRacket() que faz o que seu nome sugere. Definimos rectMode para o centro, de modo que nossa raquete fique alinhada ao centro do cursor.
Agora que criamos a raquete, temos que fazer a bola quicar nela.
... int racketBounceRate = 20; ... void gameScreen() { ... watchRacketBounce(); ... } ... void watchRacketBounce() { float overhead = mouseY - pmouseY; if ((ballX+(ballSize/2) > mouseX-(racketWidth/2)) && (ballX-(ballSize/2) E aqui está o resultado:
Então, o que watchRacketBounce() faz é garantir que a raquete e a bola colidam. Há duas coisas a verificar aqui, que é se a bola e a raquete estão alinhadas verticalmente e horizontalmente. A primeira instrução if verifica se a coordenada X do lado direito da bola é maior que a coordenada X do lado esquerdo da raquete (e vice-versa). Se for, a segunda declaração verifica se a distância entre a bola e a raquete é menor ou igual ao raio da bola (o que significa que eles estão colidindo) . Portanto, se essas condições atenderem, makeBounceBottom() método é chamado e a bola quica em nossa raquete (em mouseY, onde a raquete está).
Você notou a variável overhead que é calculado por mouseY - pmouseY? pmouseX e pmouseY variáveis armazenam as coordenadas do mouse no quadro anterior. Como o mouse pode se mover muito rápido, há uma boa chance de não detectarmos a distância entre a bola e a raquete corretamente entre os quadros se o mouse estiver se movendo em direção à bola rápido o suficiente. Então, nós levamos a diferença das coordenadas do mouse entre os quadros e levamos isso em consideração ao detectar a distância. Quanto mais rápido o mouse estiver se movendo, maior será a distância aceitável.
Também usamos overhead por outro motivo. Detectamos para que lado o mouse está se movendo verificando o sinal de overhead. Se a sobrecarga for negativa, o mouse estava em algum lugar abaixo no quadro anterior, então nosso mouse (raquete) está se movendo para cima. Nesse caso, queremos adicionar uma velocidade extra à bola e movê-la um pouco além do salto normal para simular o efeito de bater na bola com a raquete. Se overhead for menor que 0, nós o adicionaremos a ballY e ballSpeedVert para fazer a bola ir mais alto e mais rápido. Portanto, quanto mais rápido a raquete atingir a bola, mais alto e mais rápido ela se moverá.
Etapa 4 do tutorial de processamento: Movimento horizontal e controle da bola
Nesta seção, adicionaremos movimento horizontal à bola. Então, vamos tornar possível controlar a bola horizontalmente com nossa raquete. Aqui vamos nós:
... // we will start with 0, but for we give 10 just for testing float ballSpeedHorizon = 10; ... void gameScreen() { ... applyHorizontalSpeed(); ... } ... void applyHorizontalSpeed(){ ballX += ballSpeedHorizon; ballSpeedHorizon -= (ballSpeedHorizon * airfriction); } void makeBounceLeft(float surface){ ballX = surface+(ballSize/2); ballSpeedHorizon*=-1; ballSpeedHorizon -= (ballSpeedHorizon * friction); } void makeBounceRight(float surface){ ballX = surface-(ballSize/2); ballSpeedHorizon*=-1; ballSpeedHorizon -= (ballSpeedHorizon * friction); } ... void keepInScreen() { ... if (ballX-(ballSize/2) width){ makeBounceRight(width); } } E o resultado é:
A ideia aqui é a mesma que fizemos para o movimento vertical. Criamos uma variável de velocidade horizontal, ballSpeedHorizon. Criamos um método para aplicar a velocidade horizontal a ballX e tirar o atrito do ar. Adicionamos mais duas instruções if ao keepInScreen() método que observará a bola para acertar as bordas esquerda e direita da tela. Finalmente criamos makeBounceLeft() e makeBounceRight() métodos para lidar com os saltos da esquerda e da direita.
Agora que adicionamos velocidade horizontal ao jogo, queremos controlar a bola com a raquete. Como no famoso jogo Atari Saia e em todos os outros jogos de quebra de tijolos, a bola deve ir para a esquerda ou direita de acordo com o ponto da raquete que atingir. As bordas da raquete devem dar à bola mais velocidade horizontal, enquanto o meio não deve ter nenhum efeito. Código primeiro:
void watchRacketBounce() { ... if ((ballX+(ballSize/2) > mouseX-(racketWidth/2)) && (ballX-(ballSize/2) O resultado é:
Adicionando essa linha simples ao watchRacketBounce() fez o trabalho. O que fizemos foi determinar a distância do ponto em que a bola atinge o centro da raquete com ballX - mouseX. Então, tornamos isso a velocidade horizontal. A diferença real era muito grande, então fiz algumas tentativas e percebi que um décimo do valor parece o mais natural.
Etapa 5 do tutorial de processamento: Criando as paredes
Nosso esboço está começando a parecer mais um jogo a cada passo. Nesta etapa, vamos adicionar paredes movendo-se para a esquerda, assim como em Flappy Bird:
... int wallSpeed = 5; int wallInterval = 1000; float lastAddTime = 0; int minGapHeight = 200; int maxGapHeight = 300; int wallWidth = 80; color wallColors = color(0); // This arraylist stores data of the gaps between the walls. Actuals walls are drawn accordingly. // [gapWallX, gapWallY, gapWallWidth, gapWallHeight] ArrayList walls = new ArrayList(); ... void gameScreen() { ... wallAdder(); wallHandler(); } ... void wallAdder() { if (millis()-lastAddTime > wallInterval) { int randHeight = round(random(minGapHeight, maxGapHeight)); int randY = round(random(0, height-randHeight)); // {gapWallX, gapWallY, gapWallWidth, gapWallHeight} int[] randWall = {width, randY, wallWidth, randHeight}; walls.add(randWall); lastAddTime = millis(); } } void wallHandler() { for (int i = 0; i E isso resultou em:
Mesmo que o código pareça longo e intimidante, prometo que não há nada difícil de entender. A primeira coisa a notar é ArrayList. Para aqueles de vocês que não sabem o que é um ArrayList ou seja, é apenas uma implementação de lista que atua como um Array, mas tem algumas vantagens sobre isso. É redimensionável e possui métodos úteis como list.add(index), list.get(index) e list.remove(index). Mantemos os dados de parede como matrizes de inteiros dentro da lista de matrizes. Os dados que mantemos nas matrizes são para o intervalo entre duas paredes. As matrizes contêm os seguintes valores:
[gap wall X, gap wall Y, gap wall width, gap wall height] As paredes reais são desenhadas com base nos valores da parede da lacuna. Observe que tudo isso poderia ser tratado melhor e mais limpo usando classes, mas como o uso de Programação Orientada a Objetos (OOP) não está no escopo deste tutorial de Processamento, é assim que vamos lidar com isso. Temos dois métodos básicos para gerenciar as paredes, wallAdder() e wallHandler.
wallAdder() método simplesmente adiciona novas paredes em cada wallInterval milissegundo para o arraylist. Temos uma variável global lastAddTime que armazena a hora em que a última parede foi adicionada (em milissegundos) . Se o milissegundo atual millis() menos o último milissegundo adicionado lastAddTime é maior que nosso valor de intervalo wallInterval, significa que agora é hora de adicionar uma nova parede. As variáveis de intervalo aleatório são geradas com base nas variáveis globais definidas no topo. Em seguida, uma nova parede (matriz inteira que armazena os dados da parede da lacuna) é adicionada à lista de matrizes e ao lastAddTime é definido para o milissegundo atual millis().
wallHandler() circula pelas paredes atuais que estão na lista de arranjos. E para cada item em cada loop, ele chama wallRemover(i), wallMover(i) e wallDrawer(i) pelo valor de índice do arraylist. Esses métodos fazem o que seu nome sugere. wallDrawer() desenha as paredes reais com base nos dados da parede da lacuna. Ele pega a matriz de dados da parede do arraylist e chama rect() método para desenhar as paredes onde elas realmente deveriam estar. wallMover() método pega o elemento da lista de arraylist, muda sua localização X com base no wallSpeed variável global. Finalmente, wallRemover() remove as paredes da arraylist que estão fora da tela. Se não fizéssemos isso, o Processing os teria tratado como ainda estão na tela. E isso teria sido uma grande perda de desempenho. Portanto, quando uma parede é removida da lista de arranjos, ela não é desenhada nos loops subsequentes.
O último desafio que resta a fazer é detectar colisões entre a bola e as paredes.
void wallHandler() { for (int i = 0; i wallTopX) && (ballX-(ballSize/2)wallTopY) && (ballY-(ballSize/2)wallBottomX) && (ballX-(ballSize/2)wallBottomY) && (ballY-(ballSize/2)watchWallCollision() método é chamado para cada parede em cada loop. Pegamos as coordenadas da parede da lacuna, calculamos as coordenadas das paredes reais (superior e inferior) e verificamos se as coordenadas da bola colidem com as paredes.
Processando a etapa 6 do tutorial: Saúde e pontuação
Agora que podemos detectar as colisões da bola com as paredes, podemos decidir sobre a mecânica do jogo. Depois de alguns ajustes no jogo, consegui torná-lo um tanto jogável. Mesmo assim, foi muito difícil. Meu primeiro pensamento sobre o jogo foi torná-lo parecido com o Flappy Bird, quando a bola tocar nas paredes, o jogo termina. Mas então percebi que seria impossível jogar. Então aqui está o que eu pensei:
Deve haver uma barra de saúde no topo da bola. A bola deve perder saúde enquanto toca as paredes. Com essa lógica, não faz sentido fazer a bola quicar nas paredes. Então, quando a saúde é 0, o jogo deve terminar e devemos mudar para a tela de jogo. Aqui vamos nos:
int maxHealth = 100; float health = 100; float healthDecrease = 1; int healthBarWidth = 60; ... void gameScreen() { ... drawHealthBar(); ... } ... void drawHealthBar() { // Make it borderless: noStroke(); fill(236, 240, 241); rectMode(CORNER); rect(ballX-(healthBarWidth/2), ballY - 30, healthBarWidth, 5); if (health > 60) { fill(46, 204, 113); } else if (health > 30) { fill(230, 126, 34); } else { fill(231, 76, 60); } rectMode(CORNER); rect(ballX-(healthBarWidth/2), ballY - 30, healthBarWidth*(health/maxHealth), 5); } void decreaseHealth(){ health -= healthDecrease; if (health <= 0){ gameOver(); } } E aqui está uma execução simples:
Criamos uma variável global health para manter a saúde da bola. E então criou um método drawHealthBar() que desenha dois retângulos no topo da bola. A primeira é a barra de saúde base, a outra é a ativa que mostra a saúde atual. A largura do segundo é dinâmica e calculada com healthBarWidth*(health/maxHealth), a proporção de nossa saúde atual em relação à largura da barra de saúde. Finalmente, as cores de preenchimento são definidas de acordo com o valor da saúde. Por último mas não menos importante, pontuações :
... void gameOverScreen() { background(0); textAlign(CENTER); fill(255); textSize(30); text('Game Over', height/2, width/2 - 20); textSize(15); text('Click to Restart', height/2, width/2 + 10); } ... void wallAdder() { if (millis()-lastAddTime > wallInterval) { ... // added another value at the end of the array int[] randWall = {width, randY, wallWidth, randHeight, 0}; ... } } void watchWallCollision(int index) { ... int wallScored = wall[4]; ... if (ballX > gapWallX+(gapWallWidth/2) && wallScored==0) { wallScored=1; wall[4]=1; score(); } } void score() { score++; } void printScore(){ textAlign(CENTER); fill(0); textSize(30); text(score, height/2, 50); } Precisávamos marcar quando a bola ultrapassava a parede. Mas precisamos adicionar no máximo 1 pontuação por parede. Ou seja, se a bola passar por uma parede, então voltar e passar novamente, outra pontuação não deve ser adicionada. Para conseguir isso, adicionamos outra variável à matriz da parede da lacuna dentro da lista de matrizes. As novas lojas de variáveis 0 se a bola ainda não passou por aquela parede e 1 se assim fosse. Em seguida, modificamos o watchWallCollision() método. Adicionamos uma condição que dispara score() método e marca a parede como passada quando a bola passa por uma parede pela qual não havia passado antes.
Agora estamos muito perto do fim. A última coisa a fazer é implementar click to restart na tela do jogo. Precisamos definir todas as variáveis que usamos para seus valores iniciais e reiniciar o jogo. Aqui está:
... public void mousePressed() { ... if (gameScreen==2){ restart(); } } ... void restart() { score = 0; health = maxHealth; ballX=width/4; ballY=height/5; lastAddTime = 0; walls.clear(); gameScreen = 0; } Vamos adicionar mais algumas cores.
Voila! Temos Flappy Pong!
O código completo do jogo Processing pode ser encontrado Aqui .
Portando o código do jogo de processamento para a web usando p5.js
p5.js é uma biblioteca JavaScript com um muito parecido sintaxe para a da linguagem de programação Processing. Não é uma biblioteca capaz de simplesmente executar o código de processamento existente; em vez disso, p5.js requer a escrita de código JavaScript real - semelhante à porta JavaScript de Processing, conhecida como Processing.js . Nossa tarefa é converter o código de processamento em JavaScript usando a API p5.js. A biblioteca tem um conjunto de funções e uma sintaxe semelhante ao Processing, e temos que fazer certas alterações em nosso código para fazê-los funcionar em JavaScript - mas como o Processing e o JavaScript compartilham semelhanças com o Java, é menos complicado do que parece . Mesmo se você não for um Desenvolvedor JavaScript , as mudanças são muito triviais e você deve ser capaz de acompanhar muito bem.
Primeiro de tudo, precisamos criar um simples index.html e adicione p5.min.js ao nosso cabeçalho. Também precisamos criar outro arquivo chamado flappy_pong.js que abrigará nosso código convertido.
Flappy Pong canvas { box-shadow: 0 0 20px lightgray; } Nossa estratégia ao converter o código deve ser copiar e colar todo o nosso código em flappy_pong.js e depois fazer todas as alterações. E é isso que eu fiz. E aqui estão as etapas que executei para atualizar o código:
-
Javascript é uma linguagem sem tipo (não há declarações de tipo como int e float). Portanto, precisamos alterar todas as declarações de tipo para var.
-
Não há void em Javascript. Devemos mudar tudo para function.
-
Precisamos remover as declarações de tipo de argumentos de assinaturas de função. (ou seja, void wallMover(var index) { para function wallMover(index) {)
-
Não há ArrayList em JavaScript. Mas podemos conseguir a mesma coisa usando arrays JavaScript. Fazemos as seguintes alterações:
ArrayList walls = new ArrayList(); para var walls = [];walls.clear(); para walls = [];walls.add(randWall); para walls.push(randWall);walls.remove(index); para walls.splice(index,1);walls.get(index); para walls[index]walls.size() para walls.length
-
Altere a declaração da matriz var randWall = {width, randY, wallWidth, randHeight, 0}; para var randWall = [width, randY, wallWidth, randHeight, 0];
-
Remover tudo public palavras-chave.
-
Mover tudo color(0) declarações em function setup() porque color() não será definido antes de setup() ligar.
-
Alterar size(500, 500); para createCanvas(500, 500);
-
Renomear function gameScreen(){ para algo como function gamePlayScreen(){ porque já temos uma variável global chamada gameScreen. Quando estávamos trabalhando com Processing, um era uma função e o outro era um int variável. Mas JavaScript os confunde, pois não são tipificados.
-
A mesma coisa vale para score(). Eu o renomei para addScore().
O código JavaScript completo cobrindo tudo neste tutorial de processamento pode ser encontrado Aqui .
Processando o código do jogo: você também pode fazer isso
Neste tutorial de processamento, tentei explicar como construir um jogo muito simples. No entanto, o que fizemos neste artigo é apenas a ponta do iceberg. Com a linguagem de programação Processing, quase tudo pode ser conseguida. Na minha opinião, é a melhor ferramenta para programar o que você está imaginando. Minha intenção real com este tutorial de Processamento era, ao invés de ensinar Processamento e construir um jogo, provar que programar não é tão difícil. Construir seu próprio jogo não é apenas um sonho. Queria mostrar que com um pouco de esforço e entusiasmo, você consegue. Eu realmente espero que esses dois artigos inspirem a todos a experimentar a programação.
Compreender o básico
Em que se baseia a linguagem de processamento?
O processamento é baseado em Java. Visto que o JavaScript também se parece com o Java superficialmente, portar o código de processamento para a web é bastante simples usando a biblioteca p5.js.
O que é 'traço' no processamento?
O traço se refere à borda desenhada em torno de uma forma.
O que um float faz no Processing?
Um float contém um valor decimal. Em contraste, um int só pode conter valores inteiros (números inteiros positivos ou negativos).
