Jump to content

O Retorno dos Membros VIP Junte-se ao Clube

Obtenha destaque e desfrute os benefícios exclusivos para VIP.
Clique Aqui

Reporte bugs e nos ajude a melhorar!

Nos ajude a descobrir bugs! Além de melhorar a comunidade.
Reporte aqui!

Conheça a Lotérica e arrisque sua sorte!

Descubra o quão sortudo você pode ser.
Saiba mais
Notícia
  • Junte-se ao Clube de membros VIP!
  • Teste sua sorte em nossa loteria e concorra a uma fortuna de webcoins!
Cr4cko

[NodeJS] Chat Online com Jogos

Recommended Posts

Bom pessoal, vou ser breve e objetivo aqui. Tava ali conversando com o pessoal no chat e surgiu a ideia lá de fazer algum tipo de mini-game no chat, mais avançado do que o comando /roll que gera um numero de 1 a 6.

Não tenho acesso ao codigo do forum aqui nem ao banco de dados, então resolvi fazer um chat do zero com a ideia que dei: duelo valendo coins.

 

Eu fiz o chat seguindo o getstarted do socket.io em NodeJS. Nada demais. Apenas acrescentei alguns comandos:

  • /roll - joga um dado com valor de 1 a 6
  • /name <nome_novo> - altera o nome do usuario
  • /duel <user_id> <coins> - aposta com um usuário uma quantidade de coins.

 

O usuário começa sem nome, e por default eu dou nome de anonimo. Eu também dou inicialmente um valor de 5000 coins para apostar. Nada demais, um chat em tempo real com esse joguinho de apostar coins.

 

Requerimentos

 

- Instalar o NodeJS (https://nodejs.org/en/)

 

Iniciando o Servidor

 

Vamos instalar as dependencias do package.json. Abra seu terminal/CMD e digite:

npm install

 

Agora vamos iniciar o servidor:

node app.js

 

Para ver o jogo rodando acesse: localhost:3000

 

PIHh8QH.png

 

 

Segue abaixo o código de toda estrutura. Jogue tudo numa mesma pasta.

[HIDE-THANKS]

package.json

{
 "name": "chat-wc",
 "version": "0.0.1",
 "description": "chat com roll e duelo",
 "dependencies": {
   "express": "^4.15.2",
   "socket.io": "^2.0.3"
 }
}

 

app.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
 res.sendFile(__dirname + '/index.html');
});

function user_exist(user_id){
 var socket_id = false;
 for (user in LIST_USERS){
   if (LIST_USERS[user].uid == user_id){
     socket_id = LIST_USERS[user].id;
   }
 }
 return socket_id
}
var LIST_USERS = {}
io.on('connection', function(socket){

 LIST_USERS[socket.id] = socket;
 LIST_USERS[socket.id]['uid'] = Math.floor(Math.random() * 9999) + 1;
 LIST_USERS[socket.id]['coins'] = 5000;
 LIST_USERS[socket.id].emit('chat message', "Bem vindo! Comandos disponiveis /roll, /name <novo nome>, /duel <user_id> <coins>");

 socket.on('chat message', function(msg){
   if(msg == '/roll'){
     var dice = Math.floor(Math.random() * 6) + 1;
     io.emit('chat message', "(id:" + LIST_USERS[socket.id].uid + ") " + (LIST_USERS[socket.id].name || "Anonimo") + " jogou um dado..." + dice.toString());
   }
   else if(msg.includes('/name')){
     var old_name = LIST_USERS[socket.id].name || "Anonimo";
     var name = msg.replace('/name', '').trim();
     LIST_USERS[socket.id].name = name;
     io.emit('chat message', "(id:" + LIST_USERS[socket.id].uid + ") " + old_name + " mudou de nome para " + "(" + LIST_USERS[socket.id].uid + ") " + LIST_USERS[socket.id].name)
   }
   else if (msg.includes('/duel')){
     msg_splited = msg.split(' ');
     var user_id = Number(msg_splited[1]);
     var coins = Number(msg_splited[2]);
     if (!isNaN(user_id) && !isNaN(coins)){
       var user_socket_id = user_exist(user_id);
       if(user_socket_id){
         if (coins <= LIST_USERS[socket.id].coins){
           var dice_you = Math.floor(Math.random() * 6) + 1;
           var dice_other_user = Math.floor(Math.random() * 6) + 1;
           io.emit('chat message', "(id:" + LIST_USERS[socket.id].uid + ") " + (LIST_USERS[socket.id].name || "Anonimo") + " [ " + dice_you + " ] -- vs -- [ " + dice_other_user + " ] " + "(" + LIST_USERS[user_socket_id].id + ") " + (LIST_USERS[user_socket_id].name || "Anonimo"));
           if (dice_you > dice_other_user){
             var restcoins = LIST_USERS[user_socket_id].coins - coins;
             if (restcoins >= 0){
               LIST_USERS[user_socket_id].coins = restcoins;
             } else{
                 LIST_USERS[user_socket_id].coins = 0;
             }
             LIST_USERS[socket.id].coins += coins;
             LIST_USERS[socket.id].emit('chat message', "Voce ganhou " + coins + " coins")
             LIST_USERS[user_socket_id].emit('chat message', "Voce perdeu " + coins + " coins")
           } else if(dice_other_user > dice_you) {
             LIST_USERS[socket.id].coins -= coins;
             LIST_USERS[user_socket_id].coins += coins;
             LIST_USERS[user_socket_id].emit('chat message', "Voce ganhou " + coins + " coins")
             LIST_USERS[socket.id].emit('chat message', "Voce perdeu " + coins + " coins")
           } else {
             LIST_USERS[socket.id].emit('chat message', "Empatou!")
             LIST_USERS[user_socket_id].emit('chat message', "Empatou!")
           }
         
         } else {
           LIST_USERS[socket.id].emit('chat message', 'Voce nao tem saldo o suficiente para essa aposta')
         }
       } else {
         LIST_USERS[socket.id].emit('chat message', 'Usuário inexistente')
       }
     } else {
       LIST_USERS[socket.id].emit('chat message', 'Exemplo de comando: /duel joao 1000')
     }
   }
   else {
     io.emit('chat message', "(id:" + LIST_USERS[socket.id].uid + ") " + (LIST_USERS[socket.id].name || "Anonimo") + " <" + LIST_USERS[socket.id].coins +" coins>" + ": " + msg);
   }
 });
 socket.on('disconnect', function(){
   console.log('user disconnected');
   delete LIST_USERS[socket.id];
 });
});

http.listen(3000, function(){
 console.log('Chat iniciado na porta *:3000');
});

 

index.html

<!doctype html>
<html>
 <head>
   <title>Chat WC - Duelo Coins</title>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body { font: 13px Helvetica, Arial; }
     form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
     form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
     form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
     #messages { list-style-type: none; margin: 0; padding: 0; }
     #messages li { padding: 5px 10px; }
     #messages li:nth-child(odd) { background: #eee; }
   </style>
 </head>
 <body>
   <ul id="messages"></ul>
   <form action="">
     <input id="m" autocomplete="off" /><button>Send</button>
   </form>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
   <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
   <script>
     $(function () {
       var socket = io();
       $('form').submit(function(){
         socket.emit('chat message', $('#m').val());
         $('#m').val('');
         return false;
       });
       socket.on('chat message', function(msg){
         $('#messages').prepend($('<li>').text(msg));
       });
     });
   </script>
 </body>
</html>

[/HIDE-THANKS]

 

Obs.: As mensagens estão sendo adicionadas sempre em cima, para quem não entendeu. Para mudar isso, troca no index.html o .prepend para .append. Também terá que adicionar um overflow-y: auto; para conseguir rolar as mensagens. Enfim, customizações ficam por conta de vocês :D abs

  • Like 3

Share this post


Link to post
Share on other sites

Estou começando meu curso de programação, acho que essa área vai me ajudar muito!

Parabéns pelo tópico.

  • Like 2

tumblr_static_tumblr_static_co3ex5ycb5wk44wcoswgc0skw_640.gif

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...