Casino: Diseño

Deberemos construir una página de un casino con los siguientes apartados:

– Inicio
– Registro
– Fotos

Además incluiremos enlaces a los cuatro juegos que se van a jugar:

Slot Machine
Dados
Blackjack
Ruleta

Tendremos una página javascript, allí tendremos una variable ‘saldo’ que es el dinero del jugador y que de momento valdrá 100.

Ejemplo jQuery

 <button id="anyadir">Añadir</button>
 <button id="delFirst">Eliminar primera</button>
 <button id="delLast">Eliminar última</button>
 <button id="suma">Sumar</button>
 <button id="suma2">Sumar 2</button>
 
 <table border="1" id="lista">
 <tr><td>1</td></tr>
 </table>
$(function () {

$('#anyadir').click(function () {
var numero = Math.floor(Math.random() * 10) + 1;
$('#lista').append("<tr><td>" + numero + "</td></tr>");
});
$('#delFirst').click(function () {
$('#lista tr:first-child').remove();
});
$('#delLast').click(function () {
$('#lista tr:last-child').remove();
});
$('#suma').click(function () {
var suma = 0;
for (var i = 1; i <= $('#lista tr').length; i++) {
suma += parseInt($('#lista tr:nth-child(' + i + ') td').html());
}
$('#lista').before("Suma: " + suma);
});

$('#suma2').click(function () {
var suma = 0;
$('#lista td').each(function () {
suma += parseInt($(this).html());
});
$('#lista').before("Suma: " + suma);
});
});

Ejemplo jQuery

 

 <input type="text" id="texto">
 <p>Hola que tal</p>
 <p>Yo muy bien</p>
 <div id="resultado"></div>
 <button id="boton">Pulsar</button>
 <button id="mas">Añadir</button>
 <button id="eliminar">Eliminar</button>
$(function () {
$('#boton').click(function () {
$('p').animate({fontSize: "30px"}, 3000)
.animate({fontSize: "10px"}, 3000)
.animate({fontSize: "30px"}, 3000);
});
$('#eliminar').click(function () {
$('p:last-child').remove();
});
$('#mas').click(function () {
// var div = $('#resultado').html();
// div += "<p>" + $('#texto').val() + "</p>";
// $('#resultado').html(div);
$('#resultado').append("<p>" + $('#texto').val() + "</p>")
$('#texto').val('');
$('p').click(function () {
$(this).remove();
});
});

$('#texto').keyup(function (event) {
if (event.keyCode === 13) {
$('#mas').click();
}
});

});

Más objetos

function Empleado(nombre, sueldo) {
    this.nombre = nombre;
    this.sueldo = sueldo;
    this.empresa = "Netmind";
    this.departamento = "";
    this.sueldoNeto = function () {
        return this.sueldo * (1-this.irpf());
    };
    this.irpf = function () {
        if (this.sueldo < 1500) {
            return .2;
        }
        if (this.sueldo >= 1500 && this.sueldo < 3000) {
            return .3;
        }
        return .4;
    };
    this.neto=function(){
      var sueldo=this.sueldo;
      var irpf=this.irpf();
      var neto=sueldo-sueldo*irpf;
      return neto;
    };
}

function Empresa(nombre) {
    this.nombre = nombre;
    this.jefe = new Empleado("Jefe", 3000);
    this.empleados = [];
    for (var i = 0; i < 10; i++) {
        this.empleados.push(new Empleado("Empleado" + i, 1400 + i * 100));
    }

    this.comerciales = [];
    for (var i = 0; i < 3; i++) {
        var e = new Empleado("Comercial" + i, 1400 + i * 100);
        e.departamento = "Comercial";
        this.comerciales.push(e);
    }
}

function Holding(emp1, emp2) {
    this.empresas = [emp1, emp2];
}
var netmind = new Empresa("Netmind");
var activity = new Empresa("Activity");

var conglomerado = new Holding(netmind, activity);

var ana = new Empleado("Ana Pérez", 1500);
var juan = new Empleado("Juan Pi", 1400);

var empleados = [];
for (var i = 0; i < 10; i++) {
    empleados.push(new Empleado("Empleado" + i, 1400 + i * 100));
}

String.prototype.oracion = function () {
    return this.valueOf().charAt(0).toUpperCase() + this.valueOf().slice(1).toLowerCase();
}

function Producto(nombre,precio){
    this.nombre=nombre;
    this.precio=precio;
    this.iva=.21;
    this.referencia=("0000" + Math.floor(Math.random()*10000)).slice(-4);
    this.pvp=function(){
        return this.precio*(1+this.iva);
    }
    this.pvpConDescuento=function(descuento){
        return this.pvp()*(1-descuento/100);
    }
}

var tornillo = new Producto("tornillo",100);

Ejemplos objetos

var pepe = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue",
completo:function(){
return this.firstName+" "+this.lastName;
},
mayorEdad:function(){
return this.age>=18;
}
};

function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}

var ana=new Person("Ana","Pi",40,"azul")

var juan=new Person("Juan","Perez",50,"marrón")
for (var p in pepe){
if (typeof pepe[p]!=="function"){
console.log(p+" - "+pepe[p]);
}
else{
console.log(p+" - "+pepe[p]());
}
}

function normal(){
return "Hola";
}

var noNormal=function(){
return "adios";
}

noNormal=function(){
return "funcion nueva";
}

Ejemplos funciones

function tipoOracion(cadena) {
var primera = cadena.charAt(0);
var resto = cadena.slice(1);
return primera.toUpperCase() + resto.toLowerCase();
}

function tipoTitulo(cadena) {
var palabras = cadena.split(" ");
for (var i = 0; i < palabras.length; i++) {
palabras[i] = tipoOracion(palabras[i]);
}
return palabras.join(" ");
}

function tipoTitulo2(cadena) {
var palabras = cadena.split(" ");
var res = "";
for (var i = 0; i < palabras.length; i++) {
res += tipoOracion(palabras[i]) + " ";
}
return res.trim();
}
function tipoTitulo3(cadena) {
var res = cadena.charAt(0).toUpperCase();
for (var i = 1; i < cadena.length; i++) {
if (cadena.charAt(i - 1) === " ") {
res += cadena.charAt(i).toUpperCase();
} else {
res += cadena.charAt(i).toLowerCase();

}
}
return res;
}

function tipoHipster(cadena) {
var res = "";
for (var i = 0; i < cadena.length; i++) {
var letra = cadena.charAt(i);
if (esVocal(letra)) {
res += letra.toUpperCase();
} else {
res += letra.toLowerCase();
}
}
return res;
}

function tipoHipster2(cadena) {
var letras = cadena.split("");
for (var i = 0; i < letras.length; i++) {
if (esVocal(letras[i])) {
letras[i] = letras[i].toUpperCase();
} else {
letras[i] = letras[i].toLowerCase();
}
}
return letras.join('');
}

function esVocal(letra) {
var vocales = "aeiouáéíóúàèìòùü";
return vocales.indexOf(letra.toLowerCase()) !== -1;
}

function eliminarVocales(cadena) {
var res = "";
for (var i = 0; i < cadena.length; i++) {
var letra = cadena.charAt(i);
if (!esVocal(letra)) {
res += letra;
}
}
return res;
}
function eliminarVocalesReg(cadena) {
return cadena.replace(/[aeiouáéíóúàèìòùü]/gi, "");
}

function palabraMasLarga(cadena) {
var palabras = cadena.split(" ");
var larga = "";
for (var i = 0; i < palabras.length; i++) {
if (palabras[i].length > larga.length) {
larga = palabras[i];
}
}
return larga;
}

function palabraMasLargaSort(cadena) {
var palabras = cadena.split(" ");
palabras.sort(function (a, b) {
return b.length - a.length;
});
return palabras[0];
}

function trimTotal(cadena) {
cadena = cadena.trim();
var res = cadena.charAt(0);
for (var i = 1; i < cadena.length; i++) {
if (!(cadena.charAt(i) === " " && cadena.charAt(i - 1) === " ")) {
res += cadena.charAt(i);
}
}
return res;
}

function trimTotalArr(cadena) {
var palabras = cadena.split(" ");
for (var i = palabras.length - 1; i >= 0; i--) {
if (palabras[i] === "") {
palabras.splice(i, 1);
}
}
return palabras.join(" ");
}

function trimTotalReplace(cadena) {
while (cadena.indexOf(" ") !== -1) {
cadena = cadena.replace(/ /g, " ");
}
return cadena.trim();
}
function trimTotalReg(cadena) {
cadena = cadena.replace(/[ ]+/g, " ");
return cadena.trim();
}

Ejemplos funciones cadenas

function tipoOracion(cadena) {
var primera = cadena.charAt(0);
var resto = cadena.slice(1);
return primera.toUpperCase() + resto.toLowerCase();
}

function tipoTitulo(cadena) {
var palabras = cadena.split(" ");
for (var i = 0; i < palabras.length; i++) {
palabras[i] = tipoOracion(palabras[i]);
}
return palabras.join(" ");
}

function tipoTitulo2(cadena) {
var palabras = cadena.split(" ");
var res = "";
for (var i = 0; i < palabras.length; i++) {
res += tipoOracion(palabras[i]) + " ";
}
return res.trim();
}
function tipoTitulo3(cadena) {
var res = cadena.charAt(0).toUpperCase();
for (var i = 1; i < cadena.length; i++) {
if (cadena.charAt(i - 1) === " ") {
res += cadena.charAt(i).toUpperCase();
} else {
res += cadena.charAt(i).toLowerCase();

}
}
return res;
}

function tipoHipster(cadena){
var res="";
for(var i=0;i<cadena.length;i++){
var letra=cadena.charAt(i);
if (esVocal(letra)){
res+=letra.toUpperCase();
}
else{
res+=letra.toLowerCase();
}
}
return res;
}

function tipoHipster2(cadena){
var letras=cadena.split("");
for(var i=0;i<letras.length;i++){
if (esVocal(letras[i])){
letras[i]=letras[i].toUpperCase();
}
else{
letras[i]=letras[i].toLowerCase();
}
}
return letras.join('');
}

function esVocal(letra){
var vocales="aeiouáéíóúàèìòùü";
return vocales.indexOf(letra.toLowerCase())!==-1;
}

Resolución de problemas

Pensar

¿Qué es lo que me piden? ¿Cómo lo resolvería? ¿Qué estrategias tengo para acercarme al problema? ¿Qué camino puedo recorrer para llegar a la meta?

Algoritmo

Una vez tengo una estrategia debo especificarla en un algoritmo. Son los pasos mecánicos, bien definidos, que me llevarán a la resolución de problemas.

Implementación

Traducir el algoritmo abstracto al lenguaje que estoy utilizando. Dependiendo de las características de éste y de nuestros conocimientos el programa puede ser más sencillo o más complicado.

Divide y vencerás

Todo problema puede dividirse en problemas más pequeños. Siempre es una buena estrategia definir las partes del problema mayor y enfrentarse a retos más sencillos.

Primero lo más sencillo

Hagamos en primer lugar los requisitos más sencillos y que no nos causen problemas, nos irán haciendo una estructura que nos facilitará la resolución global.

Soluciones parciales

Una buena estrategia es ir probando diferentes soluciones que resuelven parcialmente el problema y nos van acercando a la solución final.

Internet

Siempre se puede usar como fuente de inspiración, pero ¡cuidado! sabiendo qué buscamos y cómo utilizarlo.