Categoría: JavaScript

Chat socket io

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('index.html');
});
users = [];
io.on('connection', function(socket){
  console.log('A user connected');
  socket.on('setUsername', function(data){
    console.log(data);
    if(users.indexOf(data) > -1){
      socket.emit('userExists', data + ' username is taken! Try some other username.');
    }
    else{
      users.push(data);
      socket.emit('userSet', {username: data});
    }
  });
  socket.on('msg', function(data){
      //Send message to everyone
      io.sockets.emit('newmsg', data);
  })
});
http.listen(3000, function(){
  console.log('listening on localhost:3000');
});

index.html

 <!DOCTYPE html>
<html>
 <head><title>Hello world</title></head>
 <script src="/socket.io/socket.io.js"></script>
 <script>
 var socket = io();
 function setUsername(){
 socket.emit('setUsername', document.getElementById('name').value);
 };
 var user;
 socket.on('userExists', function(data){
 document.getElementById('error-container').innerHTML = data;
 });
 socket.on('userSet', function(data){
 user = data.username;
 document.body.innerHTML = '<input type="text" id="message">\
 <button type="button" name="button" onclick="sendMessage()">Send</button>\
 <div id="message-container"></div>';
 });
 function sendMessage(){
 var msg = document.getElementById('message').value;
 if(msg){
 socket.emit('msg', {message: msg, user: user});
 }
 }
 socket.on('newmsg', function(data){
 if(user){
 document.getElementById('message-container').innerHTML += '<div><b>' + data.user + '</b>: ' + data.message + '</div>'
 }
 })
 </script>
 <body>
 <div id="error-container"></div>
 <input id="name" type="text" name="name" value="" placeholder="Enter your name!">
 <button type="button" name="button" onclick="setUsername()">Let me chat!</button>
 </body>
</html>

Ejemplo de multihilo con node

function longRunningOperation(callback) {
// simulate a 3 second operation
setTimeout(callback, 3000);
}

function userClicked() {
console.log(‘starting a long operation’);
longRunningOperation(function () {
console.log(‘ending a long operation’);
});
}
// simulate a user action
userClicked();

 

Cada uno con su closure:

function longRunningOperation(callback) {
// simulate a 3 second operation
setTimeout(callback, 3000);
}

function webRequest(request) {
console.log(‘starting a long operation for request:’, request.id);
longRunningOperation(function () {
console.log(‘ending a long operation for request:’, request.id);
});
}
// simulate a web request
webRequest({ id: 1 });
// simulate a second web request
webRequest({ id: 2 });

IDEs para node

https://www.jetbrains.com/webstorm/

https://netbeans.org/

https://www.visualstudio.com/

https://www.slant.co/topics/46/~best-ides-for-node-js

Intercambio de datos con JSON

Página ciudades PHP:

<?php
include "bd.php";
$pais = filter_input(INPUT_GET, 'pais');
$sql = "select * from city where country_id=" . $pais;
$ciudades = getSqlRows($sql);
echo json_encode($ciudades);

Página html:

 $('#paises').change(function () {
                    $.get('ciudades.php?pais=' + $(this).val(), function (data, status) {
                        var ciudades = JSON.parse(data);

                        $("#ciudades option").remove();

                        for (var d in ciudades) {

                            $('#ciudades').append($('', {
                                value: ciudades[d].city_id,
                                text: ciudades[d].city
                            }));
                        }
                    });
                });

Necesitaré tener lo siguiente:

 <select id="paises">
 <option value="0">Seleccione un país...</option>
 <?php
 foreach ($paises as $pais) {
 ?>
 <option value="<?= $pais['country_id'] ?>"><?= $pais['country'] ?></option>
 <?php
 }
 ?>
 </select>
 <select id="ciudades"><option value="0">Seleccione un país para ver sus ciudades</option></select>

Blackjack

Para el juego del blackjack primero necesitamos conocer las reglas del juego:

BlackJack

Hay un jugador y una banca. Se reparten dos cartas a cada uno. El objetivo es sumar 21 o lo más cercano pero sin pasarse. Las figuras valen 10 y los ases 1 u 11, dependiendo de lo que nos interese. El resto de cartas su valor. Una vez repartidas las dos cartas el jugador puede plantarse o pedir carta. Si pide carta y se pasa, ha perdido. Si no, otra vez puede pedir carta o pararse. Cuando se para es el turno de la banca.

Para gestionar las decisiones de la banca puede parecer que necesitamos una inteligencia artificial, pero por suerte no es así.  Si la puntuación es menor de 16 tiene que pedir carta, si es 17 o superior tiene que plantarse.

¿Cómo lo haremos?

En primer lugar crearemos un array con las 52 cartas de la baraja. Este array lo desordenaremos y ya estaremos listos para empezar a repartir.

Se reparten dos cartas a la banca y dos al jugador. Las podemos guardar en un array. Las de la banca se oculta la primera y se muestra la segunda. Las del jugador se muestran todas.

A partir de aquí tenemos dos botones:

  • Pedir carta. Le damos otra carta al jugador. Tenemos que contar la puntuación; si se ha pasado pierde. En caso contrario no hacemos nada.
  • Plantarse. Pasamos al turno de la banca

Cuando es el turno de la banca esta tiene que hacer:

  • Si su puntuación es menor que 17, pedir carta. Si se pasa pierde.
  • Si es mayor plantarse.

Si no se ha pasado ninguno de los dos el jugador que tiene el mayor número es el que gana. Y vuelta a empezar.

baraja

Algoritmo ruleta

Botón reset-> Actualizar la página
Arrastrar fichas: en el drop guardar valores:

  var apuesta_ruleta = ['rojo', 'negro', 'par', 'impar', 'passe', 'manque'];
    var apuestas = [];
    $(".ficha").draggable();
    $(".apuesta").droppable({
        drop: function (event, ui) {
            var apuesta = $(this).attr("title");
            var cantidad = $(ui.draggable).attr("title");
            $(ui.draggable).draggable('disable');
            apuestas[apuesta] = cantidad;
            $('#info').append("Apuesta " + cantidad + " al " + apuesta_ruleta[apuesta] + "<br/>");

        }
    });

En el botón de jugar tenemos que hacer:
– Descontar del saldo el total de las apuestas:

  var total=0;
        for (var i in apuestas){
            total+=parseInt(apuestas[i]);
        }
		saldo-=total;

– Obtener un número entre 0 y 36
– Si el número es cero avisar de que ha perdido.
– Si el número es rojo y ha apostado a rojo darle de premio la apuesta
– Idem negro
– Idem par
– Idem impar
– Idem passe
– Idem manque
– Informar de número, premios, saldo, etcétera.