Criando jogos com javascript 和 P5.play
引言
P5.play
编码项目基础
P5.play 游戏规则
挑战
重要链接
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
引言
Muitas vezes、imaginamos que para criar jogos、énecessário usarengines (motores gráficos)super pesados and feitos especialmente para isso。科莫 Unity 和 Unreal。不。 Podemos craar jogos simples de navegador, useando unicamente Javascript。
您可以使用 Javascript 进行游戏，或者使用 alguma biblioteca criada para criar jogos，然后使用它。使用阿尔古玛图书馆来进行所有的操作和简化，详细了解游戏中的基本元素和快速速度，并使用示例计算。
P5.play
P5.play中提供了一个关于 Javascript 游戏的图书馆。一个 P5.play USA 或P5.js的全景。
P5.js 是一个关于图形编辑的图书馆。 P5.js 与 P5.play 上的游戏无关。
-
在 P5.play 中，您可以在页面上进行操作，但很简单，首先要准备好意大利面，
lib/并保存所有的书籍。 -
首先，下载 P5.js，首选压缩文件，或者可以选择下载选项，然后访问P5.js 下载页面
-
请注意，请注意 P5.play 的操作。您可以克隆P5.play 的 Github 存储库，或下载存储库的压缩包
准备所有意大利面lib/。 Ela deve ficar dessa 形式：
p5.min.js p5.play/
编码项目基础
Crie um arquivo HTML na raiz do seu projeto, 例如，index.htmle insira isso dentro do arquivo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jogo feito com P5.js</title>
<script src="lib/p5.min.js"></script>
<script src="lib/p5.play/lib/p5.play.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
接下来，重要的是 P5.js、P5.play 和 arquivo chamado script.js，所有这些都与我们的游戏逻辑有关。
Dentro do P5.play há duas funções que precisamos obrigatoriamente criar nosso código, a função setupea funçãodraw
设置画布游戏的功能，以便为画布上的主要元素做好准备。一个功能设置和执行即可完成。
在画布上进行设置，然后继续进行绘制，第二次将有 60 幅图。徽标的执行方式多种多样，但并非如此。
无论如何，Tentaremos fazer um jogo simples。 Um jogo onde temos um fourrado no meio da tela, que conseguimos mover usando o teclado. E que terão bolinhas que podem colidir com esse fourrado.如果是这样，请继续努力并继续努力。
P5.play 游戏规则
Crie um arquivo chamado script.js, dentro desse arquivo iremos colocar a lógica do jogo, dentro das funções setupedraw
然后，如果您想使用四方移动器setup，可以将 WASD 用作四方移动器。
Primeiramente vamos criar as duas funções, que podem facilmente ser escritas como funçõesnormais:
function setup(){
// código da função setup
}
function draw(){
// código da função draw
}
Criando o Canvas
集市setup是游戏的主要功能，也是游戏元素的画布。 Podemos fazer isso com a função createCanvas(comprimento, altura), colocando o comprimento ea altura em Pixels.
您可以在画布上看到有趣的图案draw。 Pois essa pintura deve ser feita a cada 框架，保证 que tudo poderia ter aparecido antes na tela，seja removido，e sobreescrito por um novo conteúdo。我的主要观点是实践中的例子。我们使用的功能是0background(cor)和256。我们可以使用特定的cor核心green。 O código que devemos fazer é este：red
function setup(){
createCanvas(700, 700)
}
function draw(){
background(230)
}
下一步，我们将使用 700 或 700 像素的画布，并在 230 英寸的画布上进行预渲染。
继续前进
Agora precisamos criar oquadrado na tela。 Para isso, precisaremos criar um sprite, e atribuir uma imagem a esse sprite, que no caso é uma imagem de umquadado ou até mesmo qualquer imagem. Isso vai ser feito na funçãosetup
在此，请注意控制四方运动，以便控制四方运动。
最初的目的是在全球范围内进行各种不同的操作，在设置和抽奖功能中开发正常功能，然后在所有四方中进行操作，例如，或名称square。
var square; // criação do quadrado de forma global
function setup(){
// código da função setup já preenchido
}
function draw(){
// código da função draw já preenchido
}
功能setup和附加说明没有最终目的：
square = createSprite(350, 350)
squareImg = loadImage('https://raw.githubusercontent.com/lissaferreira/criando-jogos-com-js-e-p5/main/assets/square.png')
square.addImage(squareImg)
- 最初的声音是四方精灵，位置为 350 X 和 350 Y，方向为 seria 或 meio da tela。
- 第二个卡雷加图像是外部图像，它是一个四方图像，它不是 github 上的存储库，可以保护我们的作品
- 我们将在接下来的一段时间里
squareImg对图像进行调整，并继续为精灵提供图像。 Assim criando oquadrado na tela。
Caso você tenha se perdido, a função setupeaparte de cima do código deve estar assim:
var square
function setup(){
createCanvas(700, 700)
square = createSprite(350, 350)
squareImg = loadImage('https://raw.githubusercontent.com/lissaferreira/criando-jogos-com-js-e-p5/main/src/assets/square.png')
square.addImage(squareImg)
}
在游戏中，draw您可以尽情享受游戏中的各种乐趣、乐趣，以及精灵和精灵的乐趣drawSprites()。
drawAssim，一个开发drawSprites()assim的功能：
function draw(){
background(230)
drawSprites()
}
Com isso, o nosso jogo ficará assim:
Dando vida ao nosso quadrado!
Agora vamos fazer o nosso fourdado se movimentar com WASD, que será bem simples.
a P5.play fornece para nos, uma função já criada chamada KeyDown(tecla), que retornará truese essa tecla foi pressionada, e falsese a tecla não foi pressionada. Apenas precisamos criar condições para cada tecla (WASD), e se esse resultado da keyDown()for verdadeiro, mudar a posição do fourrado.
这是一个功能draw，也是一个重复的过程，具体取决于框架。
Juntando a função keyDown()com uma condicional, ficará algo assim:
if (keyDown('W')){
}
Agora precisamos preencher essa função que vamos usar para mover or fourrado.在 P5.play 中，使用square.positionX 方向或 Y 方向的按钮，演示 isso，然后进行功能设置，然后在测试中进行测试，然后在 console.log 中进行操作square.position。
function setup(){
createCanvas(700, 700)
square = createSprite(350, 350)
squareImg = loadImage('https://raw.githubusercontent.com/lissaferreira/criando-jogos-com-js-e-p5/main/src/assets/square.png')
square.addImage(squareImg)
// novo código
console.log(square.position)
}
com isso, quando o sprite é criado, será logado no console as suas posições.
控制台上的声音是这样的：
当 X 和 Y 做四边形时，可以使用简单的方式，将其添加到示例中，或者 X 做四边形square.position.x
请使用除臭剂
console.log来了解相关信息。
Agora Podemos mudar a condição feita anteriormente, decrementando Y doquadado, pois W será a tecla que vai mandar oquadrado para cima:
if (keyDown('W')){
square.position.y -= 5
}
随着勇气的结束，5 小时会减少勇气。
集市上，您可以尽情享受游戏，或者享受一场精彩的游戏！
Agora Podemos criar isso para todas as outras teclas, seguindo a exata mesma lógica, apenas mudando de Y para X
if (keyDown('W')){
square.position.y -= 5
}
if (keyDown('S')){
square.position.y += 5
}
if (keyDown('A')){
square.position.x -= 5
}
if (keyDown('D')){
square.position.x += 5
}
Agora podemos usar as telas WASD para livremente mover pelo canvas！
最后的结果draw如下：
function draw(){
background(230)
if (keyDown('W')){
square.position.y -= 5
}
if (keyDown('S')){
square.position.y += 5
}
if (keyDown('A')){
square.position.x -= 5
}
if (keyDown('D')){
square.position.x += 5
}
drawSprites()
}
添加困难
Agora vamos adicionar um elemento de diificuldade no jogo。 Vamos adicionar bolinhas que aparecem das bordas do canvas, voam até o fourdado.这些博林哈斯是一个四方、一个游戏和一个页面，并记录了新的部分。
setInterval您可以使用Javascript功能。该功能可以让您在不同的时间间隔重复使用不同的音调，以实现个性化。
setInterval如果您想执行此功能，请setup执行以下操作。
Com isso, vamos adicionar á setupa setIntervalque precisamos, e criar a variável circlesendo global:
var square;
var circle; // novo código
function setup(){
createCanvas(700, 700)
square = createSprite(350, 350)
squareImg = loadImage('https://raw.githubusercontent.com/lissaferreira/criando-jogos-com-js-e-p5/main/src/assets/square.png')
square.addImage(squareImg)
// novo código
setInterval(createEnemy, 1500)
}
Agora 的功能createEnemy是 1.5 秒。正常的个性化节奏。
Junto com a setInterval, precisaremos criar também uma função que crie a bolinha, em uma posição aleatória (vamos supor 4, topo-direita, topo-esquerda, baixo-direita e baixo-esquerda)。
没有 caso，essa função é a createEnemy。 Iremos usar 或 mesmo método que usamos para criar 或quadrado。 Mas com algumas adições:
function createEnemy(){
positions = [[700, 0], [0, 700], [700, 700], [0, 700]]
positionRandom = positions[Math.floor(Math.random() * positions.length)];
circle = createSprite(positionRandom[0], positionRandom[1])
circleImg = loadImage('https://raw.githubusercontent.com/lissaferreira/criando-jogos-com-js-e-p5/main/src/assets/circle.png')
circle.addImage(circleImg)
circle.attractionPoint(13, square.position.x, square.position.y)
}
- Na primeira linha, criamos uma matriz (um vetor de vetores) com as posições possíveis da bolinha。
- 第二个，pegamos um elemento aleatório dessa lista，não se preocupe com o método，isso pode ser pego facilmente em forruns como Stack Overflow
- Na terceira, criamos o sprite nessa posição X e Y que pegamos da
positionRandom - Na quarta, carregamos a imagem da bola ditamente do Github do projeto
- Na quinta adicionamos essa imagem ao sprite
- E na sexta usamos um recurso da P5.play, chamado
attractionPoint。 Que cria um ponto onde a nossa bolinha será atraida
在页面上进行集会，并以 bolinhas 的方式进行运动：
Agora precisamos criar o sistema de colisão，que será bem simples，vamos apenas adicionar um try...catch，que é uma estrutura que conseguimos tratar os os ros，masnese caso，vamos fazer nada caso recebermos um erro。 Isso apenas vai servir para evitar que o nosso jogo trave no browser。
function draw(){
background(230)
// novo código
try{
square.collide(circle, finishGame)
}catch(err){}
// fim do novo código
if (keyDown('W')){
square.position.y -= 5
}
if (keyDown('S')){
square.position.y += 5
}
if (keyDown('A')){
square.position.x -= 5
}
if (keyDown('D')){
square.position.x += 5
}
drawSprites()
}
Usamos para isso，um recurso da P5.play，chamado collide。 Que retorna truecaso oquadrado tenha se colidido com a bolinha, e falsese não colidiu.我们可以通过争论来解决这个问题，但我们仍然希望解决这个问题。 Essa função no caso é a finishGame。
finishGame这是一个四方去除剂的功能，可以提醒您经常使用的去除剂，并重新回到页面。德萨·马内拉：
function finishGame(){
square.remove()
alert('Você Perdeu!')
window.location.reload()
}
我们使用 Javascript 来实现 P5.play 的功能remove()，简单地删除精灵精灵。
很快！集会和游戏全面功能，Onde somos um Quadrado Roxo，以及 devemos desviar de bolinhas vermelhas que tentam nos acertar！
挑战
Alguns desafios que seria recomendado de você cumprir para aumentar a sua compreensão, são:
-
Criar um contador de quantas vezes que quem está jogando perdeu。 Isso pode ser feito tanto com a P5.play (resetando a posição dos sprites) or usando recursos do Javascript puro (como LocalStorage )
-
Criar bolinhas verdes que apareçam de tempos em tempos, e que se oquadado colidir com alguma dessas bolinhas, Incremental seus pontos.如果您重新设置了大肠杆菌，则可能会出现中毒症状。
重要链接
Muito obrigada por ler ❤️🏳️⚧️ e me segue nas redes, é tudo @lissatransborda 👀
文章来源：https://dev.to/lissatransborda/criando-jogos-com-javascript-e-p5-play-2b47