Índice:

JeuTropFacile - WayTooEasyGame: 3 etapas
JeuTropFacile - WayTooEasyGame: 3 etapas

Vídeo: JeuTropFacile - WayTooEasyGame: 3 etapas

Vídeo: JeuTropFacile - WayTooEasyGame: 3 etapas
Vídeo: Как собрать кубик Рубика за 10 минут (Для начинающих) 2024, Novembro
Anonim
JeuTropFacile - WayTooEasyGame
JeuTropFacile - WayTooEasyGame

Este é um jogo inteiramente feito em HTML e JavaScript com a biblioteca P5js. Existem 2 arquivos chamados index.html e sketch.js. Eu sou muito iniciante em código, então lamento se não estiver claro.

Você pode jogar com este link

Com as setas do teclado você controla uma bola branca e tem que evitar a bola vermelha (atualmente só existe uma).

Eu criei 2 variáveis: posX = 200 e posY = 200

No sketch.js, criei um canva na configuração da função com 640x por 480y com um fundo cinza no desenho da função, então criei um círculo branco com posição posX, posY, 75, 75.

Etapa 1: mover o círculo

Movendo o Círculo
Movendo o Círculo

Como eu disse antes, você pode usar as setas do teclado para mover o círculo.

Para fazer isso, criei uma função updatePositionEllipse ().

Usei esta condição para fazer funcionar: if (keyIsDown (DOWN_ARROW)) {

posY + = 5;

}

Quando a tecla para baixo é pressionada, o círculo se move para baixo.

Usei-o em todas as outras teclas para que você possa mover para a esquerda, direita, para cima e para baixo.

Etapa 2: Criando Limites de Fronteiras

Criando Limites de Fronteiras
Criando Limites de Fronteiras

Para fazer a bola branca parar no final da canva, usei a função testOutOfScreen.

Dentro dele, usei a condição if (posX> 600) {

posX = 600; strokeWeight (6); traço ('azul'); linha (637, 0, 637, 480); }

se a posição de x for superior a 600: bloqueia a bola e traça uma linha azul com uma borda 6 colocada no lado direito da canva.

Eu faço isso para todas as fronteiras.

Recomendado: