Code Monkey home page Code Monkey logo

meu-primeiro-jogo-multiplayer's Introduction

meu-primeiro-jogo-multiplayer

Um jogo multiplayer simples o suficiente para qualquer pessoa aprender conceitos importantes sobre arquitetura e desenvolvimento de software.

Ele foi projetado de uma forma modificável/hackeável para que você consiga implementar suas próprias ideias ou até reimplementar do zero em outras linguagens. Inclusive este repositório é um playground de experimentos e qualquer tentativa será bem-vinda.

Antes de prosseguir, é extremamente importante você assistir esse vídeo introdutório com toda explicação por trás deste projeto, inclusive todos os passos utilizados para programar ele: Assistir introdução no YouTube

Experimentos

Autor Descrição
Prova de Conceito (POC) por @filipedeschamps
Eu nunca tinha programado um jogo multiplayer e queria entender o que eu não entendia sobre o assunto para, em seguida, reimplementar um MVP com práticas melhores. Dessa experiência foi criada uma Playlist no YouTube com 12 vídeos sobre design pattern e arquitetura de software.
Rodar no Gitpod / Abrir código
Estilo Jogo da Cobrinha por @vassourita
Jogadores são como cobrinhas que crescem a cada fruta comida. Se você esbarrar em outra cobra os seus pontos e toda sua extensão do seu rabo passam a pertencer a ela.
Rodar no Gitpod / Abrir código
Minimum Viable Product (MVP) por @filipedeschamps
Versão da POC reimplementada utilizando boas práticas.
Rodar no Gitpod / Abrir código
Teleporte do Jogador no limite do Canvas por @PoorlyDefinedBehaviour
Esta versão adiciona uma estratégia interessante para a coleta de frutinhas, porque o jogador pode se teleportar de um lado para o outro apenas atravessando o limite do canvas.
Rodar no Gitpod / Abrir código
Implementação com Score @JonasFreireAlcantara
Esta versão extende a versão do Teleporte e implementa a feature de score. Inclusive utiliza a CSS da POC, o que dá outra cara para o jogo.
Rodar no Gitpod / Abrir código
Skin para Jogadores e Frutas @JonasFreireAlcantara
Esta versão ao invés de mostrar pixels siples na tela, mostra ícones mais robustos para as frutas e jogadores.
Rodar no Gitpod / Abrir código
Simples PWA @Allanksr
Esta versão é uma cópia de skin para jogadores e frutas implementado agora a Aplicação progressiva web(PWA).
Rodar no Gitpod / Abrir código
Colidindo com players, novos skins e som @doriclaudino
Trabalho impressionante que traz toda uma dinâmica nova ao jogo através de captura de itens com pontos diferentes, colisão entre players com disperção dos itens, choque na borda do jogo, vale muito a pena conferir.
Rodar no Gitpod / Abrir código
Versão Xadrez @marcosjcs
Mais um trabalho impressionante que traz agora uma dinâmica de xadrez (com layout e peças) e inclusive com a feature de pedir o nome do jogador.
Rodar no Gitpod / Abrir código
Versão stateful serverless com Cloudflare Worker e Durable Objects @boemekeld
O Lucas Boemeke recebeu acesso para a versão beta do Durable Objects da Cloudflare e substituiu o backend por isso.
Abrir / Abrir código

Como enviar o seu experimento

Este é um projeto simples e pode ser desenvolvido em qualquer lugar, mas ultimamente estou utilizando uma IDE Online chamada Gitpod e nela consigo deixar o ambiente 100% configurado (tanto o frontend quanto o backend) para você apenas sentar e programar. Inclusive, eu vou reprogramar o jogo todo por dentro dela e para você programar também, basta seguir os passos abaixo:

  1. Caso você queira só futucar o código ou ver o jogo rodando, clique aqui para ele clonar o meu workspace com o meu repositório. O acesso ao Gitpod é gratuito e ele vai pedir para você se conectar com a conta do Github.
  2. Caso queira desenvolver sua própria versão ou modificação, faça um fork deste repositório para dentro da sua conta no Github.
  3. Depois disso, simplesmente adicione gitpod.io/# na frente da URL do seu repositório para clonar o workspace já com este repositório do jogo rodando.
  4. Você vai encontrar dentro da pasta playground todos os experimentos, então crie uma pasta nova para colocar o seu experimento.
  5. Você pode escrever todo o código do zero para acompanhar os vídeos tutoriais da playlist, mas também pode copiar a pasta de um outro experimento e fazer as suas modificações.
  6. Faça o commit de suas alterações, envie para seu fork e abra um Pull Request. Para o Gitpod ter acesso de escrita no seu repositório, você deve habilitar isto nas preferências do Access Control.

Autor


@filipedeschamps

meu-primeiro-jogo-multiplayer's People

Contributors

allanksr avatar boemekeld avatar doriclaudino avatar filipedeschamps avatar jonasfreirealcantara avatar leonardo-io avatar marcosjcs avatar poorlydefinedbehaviour avatar vassourita avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

meu-primeiro-jogo-multiplayer's Issues

[NPX] SyntaxError: Unexpected token '?'

Ao rodar npx serve,

A seguinte mensagem é exibida:

(node:2411) ExperimentalWarning: The ESM module loader is experimental.
file:///home/gitpod/.npm/_npx/2411/lib/node_modules/serve/build/main.js:130
      url.port = url.port ?? "3000";
                           ^

SyntaxError: Unexpected token '?'
    at Loader.moduleStrategy (internal/modules/esm/translators.js:83:18)
    at async link (internal/modules/esm/module_job.js:36:21)

Alguém tem alguma ideia da origem deste erro?

socket.io não prove um export padrão

eu tava tentando abrir somente o servidor para uns testes

import express from 'express'
import http from 'http'
import socketio from 'socket.io'


const app = express()
const server = http.createServer(app)
const sockets = socketio(server)

app.use(express.static('public'))

server.listen(8080, () => {
    console.log(`> Server listening on port: 8080`)
})

mas eu recebo o erro

import socketio from 'socket.io'
      ^^^^^^^^
SyntaxError: The requested module 'socket.io' does not provide an export named 'default'

como eu resolvo?

Como rodar no navegador o meu-primeiro-jogo-multiplayer

Olá, tudo bem? sou novo na programação, então não tenho conhecimentos em Node.JS, ou muito em JavaScript, queria tentar utilizar o projeto no ngrok, pra compreender esse sistema de hospedagem local, acredito que facilitaria muito para mim, quando fosse desenvolver projetos mais longos ao decorrer do tempo, mas eu não estou compreendendo como consigo fazer isso, seria possível alguém me ajudar nisso por favor? já instalei o Node, Ngrok, então creio já estar meio caminho andado, consigo fazer ngrok http 80, mas não sei como fazer para conseguir rodar o projeto através do ngrok e navegador, será que alguém consegue me ajudar nessa? agradeceria muito.

att,
Matheus.

usar variável socket globalmente

Fala Felipe, beleza?
Uma forma de usar a variável socket, é tornar ela global

globa.SOCKET = socket;

Assim quando o server iniciar, você consegue usar ela em controllers e models.

Abraços

Fluidez de animação, usando o anti-aliasing

Ainda não sei bem como fazer, mas após tentar implementar atrasado a função Throttle, que segue um fix, add um segundo emit, sem a flag broardcast, pra fazer um update também do server pro cliente, e sincronizando os dois...

image

Continuando, nas minhas tentativas, vi que o canvas, ele aplica um anti-aliasing, ao tentar movimentar uma fração pixel, o que mi deu a ideia, de fazer um rastro, com uma transição de opacidade, para simular linhas guias de animação, seria válido fazer tal coisa?

image

Como dar deploy disso na Vercel?

Tentei dar deploy mas fica gerando o seguinte erro no console do navegador:

polling.js:307     GET https://multiplayer-game-7ztxqj1zr-marcuth.vercel.app/socket.io/?EIO=4&transport=polling&t=OWhMXjG 404

Como posso trocar os quadrados por imagens (Ícones)

com base no 1st release estou tentando importar uma imagem pra representar o jogador no lugar do quadrado colorido tentei usando:

var icone = new Image();
icone.onload = function() {
context.drawImage(img, 10, 10);
}
icone.src = 'image.png';`

porém quando faço isso o game não carrega e o ícone para :(

COMO STARTA ESSE JOGO

pessoal ja tentei de tudo até intalei o ubuntu e tentei rodar por lá mas mesmo assim nao vai.

primeiramente abro o console no diretorio do jogo e coloco nvm install 13.3.0 depois npm install e npm start. porem nao vai
o nvm 13.3.0 ele nem reconhece como comando
image

depois coloco npm install
image

e por fim npm start, ai vem um monte de erro
image

Diferentes cores para pontuações mais altas

Pessoal eu tava pensando que seria legal a gente fazer uma coloração diferente para jogadores com diferentes níveis de pontuação, por exemplo, um jogador com mais pontuação estaria em um nível mais próximo do vermelho, enquanto outro com pontuação estaria mais baixo, seria uma escala de cores, seria interessante por que com o passar do tempo a tela ficaria toda colorida, rsrsrs.

Usar .env para a porta do servidor

Fala turma!
Estava pensando em utilizar o .env para definir a porta, assim outros serviços como o heroku poderiam rodar o servidor. Acho que o código ficaria parecido com isso:

const port = procces.env.PORT || 80

webServer.listen(port, function(){
  console.log('> Server listening on port:', port)
});

Um protocolo?

Fazendo aqui minha versão em PHP do repositório, da pra notar que seria bem interessante ter a spec de um protocolo, que além de documentar vai abrir a possibilidade de implementação em vários outros back-ends, daria até pro front-end escolher em qual game-server ele vai se conectar.
Acabei já mapeando as mensagens aqui.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.