Sesión de preguntas y respuestas

Clase 33 de 50 • Curso de Programación Básica 2014

Contenido del curso

Bienvenido

Introducción básica a HTML y Javascript para programar

Variables, Matrices y Objetos en Javascript

Ciclos y Dibujos con Canvas

Programando juegos con canvas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Cómo crear un algoritmo para el juego del ahorcado

Pregúntale a Freddy lo que quieras ... acerca de programación ;)

34
Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 1
32:25 min
35
Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 2
56:14 min

Conceptos básicos de programación: Frontend-Backend

Crea tu primer servidor web con Node.JS

Aprende a volar un dron con Javascript

Complementos del curso

50
Publica tu sitio web usando GitHub Pages
01:41 min

Tomar examen

Comentarios

Erick Orlando Velasco Martínez

student•

De todas maneras haré la tarea :)

Eduardo Lemus Zavala

student•

Cierto no hay que rendirse antes de tiempo. Primero hay que intentarlo..

Julio Cesar Labrador Rosales

student•

Buena sección de preguntas y respuestas

Santiago Iván Almaraz Segovia

student•

Juego de ahorcado con contador de victorias y derrotas

HTML

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <title>Ahorcado</title>  
        <link rel="stylesheet" href="">  
        <script src="ahorcado.js" type="text/javascript"></script>  
    </head>  
    <body>  
        <p>  
            Elige una letra:  
            <input type="text" id="letra"/>  
            <input type="button" id="boton" value="Boom!!"/>  
        </p>  
        <div>  
            <h2>Marcador</h2>  
            <p>win</p>  
            <p id="win"></p>  
            <p>lose</p>  
            <p id="lose"></p>  
        </div>  
        <h2 id="pista">_ _ _ _ _ _ _ _ _</h2>  
        <canvas id="c"></canvas>  
        <br>  
        <input type="button" id="Reinicio" value="Reiniciar!!" align="left" />  
        <script type="text/javascript">  
            iniciar();  
        </script>  
    </body>  
</html>

JAVASCRIPT

var palabra = ["amor","platzi","sonrie","mejorandola","programacion"];  
var paljuego;  
var hombre, l;  
var completo;  
var ganados = 0, derrotas = 0;  
  
var Ahorcado = function (con)  
{  
    this.contexto = con;  
    this.maximo = 5;  
    this.intentos = 0;  
    this.vivo = true;  
  
    this.dibujar();  
}  
Ahorcado.prototype.dibujar = function ()  
{  
    var dibujo = this.contexto;  
  
    //Dibujando el poste  
    dibujo.beginPath();  
    dibujo.moveTo(150,100);  
    dibujo.lineTo(150,50);  
    dibujo.lineTo(400,50);  
    dibujo.lineTo(400,350);  
    dibujo.lineWidth = 15;  
    dibujo.strokeStyle = "#000";  
    dibujo.stroke();  
    dibujo.closePath();  
  
    if(this.intentos > 0)  
    {  
        // intentos = 1 --> rostro  
        dibujo.beginPath();  
        dibujo.arc(150, 140, 40, 0, Math.PI * 2, false);  
        dibujo.strokeStyle = "red";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
  
        if(this.intentos > 1)  
        {  
            // intentos = 2 --> torso  
            dibujo.beginPath();  
            dibujo.moveTo(150,180);  
            dibujo.lineTo(150,250);  
            dibujo.strokeStyle = "red";  
            dibujo.lineWidth = 5;  
            dibujo.stroke();  
            dibujo.closePath();  
  
            if(this.intentos > 2)  
            {  
                // intentos = 3 --> brazos  
                dibujo.beginPath();  
                dibujo.moveTo(120,220);  
                dibujo.lineTo(150,180);  
                dibujo.lineTo(180,220);  
                dibujo.strokeStyle = "red";  
                dibujo.lineWidth = 5;  
                dibujo.stroke();  
                dibujo.closePath();  
  
                if(this.intentos > 3)  
                {  
                    // intentos = 4 --> piernas  
                    dibujo.beginPath();  
                    dibujo.moveTo(120,290);  
                    dibujo.lineTo(150,250);  
                    dibujo.lineTo(180,290);  
                    dibujo.strokeStyle = "red";  
                    dibujo.lineWidth = 5;  
                    dibujo.stroke();  
                    dibujo.closePath();  
  
                    if(this.intentos > 4)  
                    {  
                        // intentos = 5 --> ojos muertos  
                        dibujo.beginPath();  
                        //Ojo izquierdo  
                        dibujo.moveTo(125,120);  
                        dibujo.lineTo(145,145);  
                        dibujo.moveTo(145,120);  
                        dibujo.lineTo(125,145);  
  
                        //Ojo derecho  
                        dibujo.moveTo(155,120);  
                        dibujo.lineTo(175,145);  
                        dibujo.moveTo(175,120);  
                        dibujo.lineTo(155,145);  
  
                        dibujo.strokeStyle = "blue";  
                        dibujo.lineWidth = 5;  
                        dibujo.stroke();  
                        dibujo.closePath();  
                    }  
                }  
            }  
  
        }  
  
    }  
}  
Ahorcado.prototype.trazar = function ()  
{  
    this.intentos++;  
    if(this.intentos >= this.maximo)  
    {  
        this.vivo = false;  
    }  
    this.dibujar();  
}  
  
function iniciar ()   
{  
    l = document.getElementById("letra");  
    var b = document.getElementById("boton");  
    var re = document.getElementById("Reinicio");  
    var w = document.getElementById("win");  
    var lo = document.getElementById("lose");  
    var canvas = document.getElementById("c");  
    canvas.width = 500;  
    canvas.height = 400;  
    var contexto = canvas.getContext("2d");  
    w.innerText = "" + ganados;  
    lo.innerText = "" + derrotas;  
    hombre = new Ahorcado(contexto);  
    elegirpalabra();  
      
    paljuego = paljuego.toUpperCase();  
  
    espacio = new Array(paljuego.length);  
  
    b.addEventListener("click", agregarLetra);  
    re.addEventListener("click", reiniciarjuego);  
  
    mostrarPista(espacio);  
}  
function elegirpalabra () {  
       
    var n = palabra.length;  
  
    var r = Math.floor(Math.random() * (n - 1) + 1)  
  
    paljuego = palabra[r];  
  
    completo = false;  
        
}  
function agregarLetra()  
{  
    var letra = l.value;  
    l.value = "";  
    if(!hombre.vivo)  
    {  
        alert("¡Estás muerto vuelve a intentarlo!");  
        mostrarpalabra();  
    }  
    else  
    {  
        if (completo)  
        {  
            alert("¡Has ganado reinicia para jugar nuevamente!");  
            mostrarpalabra();  
        }  
        else  
        {  
            mostrarPalabra(paljuego, hombre, letra);  
        }  
    }  
}  
function mostrarPalabra(palabra, ahorcado, letra)  
{  
    var encontrado = false;  
    var p;  
    letra = letra.toUpperCase();  
    for (p in palabra)  
    {  
        if (letra == palabra[p])  
        {  
            espacio[p] = letra;  
            encontrado = true;  
        }  
    }  
    mostrarPista(espacio);  
  
    // Si NO lo encontré  
    if(!encontrado)  
    {  
        ahorcado.trazar();  
    }  
  
    if(!ahorcado.vivo)  
    {  
        alert("¡Estás muerto!");  
        mostrarpalabra();  
        derrotas++;  
        var lo = document.getElementById("lose");  
        lo.innerText = "" + derrotas;  
    }  
    if (completo)  
    {  
        alert("¡Has gando!");  
        mostrarpalabra();  
        ganados++;  
        var w = document.getElementById("win");  
        w.innerText = "" + ganados;  
    }  
}  
function mostrarPista(espacio)  
{  
    var pista = document.getElementById("pista");  
    var texto = "";  
    var i;  
    var largo = espacio.length;  
    var terminado = true;  
  
    for(i = 0; i<largo; i++)  
    {  
        if(espacio[i] != undefined)  
        {  
            texto = texto + espacio[i] + " ";  
        }  
        else  
        {  
            texto += "_ ";  
            terminado = false;  
        }  
    }  
    pista.innerText = texto;  
    if (terminado)  
    {  
        completo = true;  
    }  
}  
function mostrarpalabra()  
{  
    var pista = document.getElementById("pista");  
    var texto = "";  
    var i;  
    var largo = espacio.length;  
  
    for(i = 0; i<largo; i++)  
    {  
        texto = texto + paljuego[i] + " ";  
    }  
    pista.innerText = texto;  
    var b = document.getElementById("boton");  
}  
function reiniciarjuego()  
{  
    var canvas = document.getElementById("c");  
    canvas.width = 500;  
    canvas.height = 400;  
    var contexto = canvas.getContext("2d");  
    hombre = new Ahorcado(contexto);  
    elegirpalabra();  
    paljuego = paljuego.toUpperCase();  
    espacio = new Array(paljuego.length);  
    hombre.intentos = 0;  
    hombre.vivo = true;  
    completo = false;  
    mostrarPista(espacio);  
    hombre.dibujar();  
}

Sally Lorena

student•

Este es mi juego de Tres en Raya  
  
<html>  
<head>  
    <title></title>  
    <script type="text/javascript" src="canvas.js"></script>  
    <link rel="stylesheet" href="style.js" type="text/css">  
</head>  
<body>  
    <select id="selectorColor">  
        <option>Black</option>  
        <option>Blue</option>  
        <option>Fuchsia</option>  
        <option>Green</option>  
        <option>Lime</option>  
        <option>Maroon</option>  
        <option>Navy</option>  
        <option>Olive</option>  
        <option>Orange</option>  
        <option>Purple</option>  
        <option>Red</option>  
        <option>Silver</option>  
        <option>Teal</option>  
        <option>Yellow</option>  
    </select>  
    <br>  
    <button id="botonColorAzar">colores al azar</button>  
    <br>  
    <button id="botonIntercambiarColores">Intercambiar colores</button>  
    <br>  
    <button id="botonColor1">1 jugador</button>  
    <div class="muestracolor" id="colorelegido1"></div>  
    <button id="botonColor2">2 jugador</button>  
    <div class="muestracolor" id="colorelegido2"></div>  
    <button id="botonEmpezar">empezar</button>  
    <br>  
    <button id="botonFinalizar">finalizar</button>  
    <div id="contenedorTabla">  
        <table>  
            <tr>  
                <td id="celda1"></td>  
                <td id="celda2"></td>  
                <td id="celda3"></td>  
            </tr>  
            <tr>  
                <td id="celda4"></td>  
                <td id="celda5"></td>  
                <td id="celda6"></td>  
            </tr>  
            <tr>  
                <td id="celda7"></td>  
                <td id="celda8"></td>  
                <td id="celda9"></td>  
            </tr>  
        </table>  
        <p id="texto"></p>  
    </div>  
</body>  
</html>  
            
  
muestracolor  
{  
    height:50px;  
    width: 50px;  
    border: double 3px blue;  
}  
#colorelegido1  
{  
    background-color: gold;  
}  
#colorelegido2  
{  
    background-color: silver;  
}  
td  
{  
    width: 50px;  
    height: 50px;  
    border: dashed green 3px;  
}  
table  
{  
    border: double blue 5px;  
}  
div#contenedorTabla  
{  
    position: absolute;  
    top: 0%;  
    left: 35%;  
}  
  
  
  
    var color1 = "orange";var color2 = "silver";  
var jugador = 1;  
var fichasJ1 = 0;  
var fichasJ2 = 0;  
var idCeldas;  
var bgcCeldas;  
var muestraMensaje;  
var ganador;  
var contadorMensaje;  
  
window.onload = function ()  
{  
    var selector;  
    var i;  
    selector = document.getElementById("contenedorTabla");  
    selector.onmouseover = mueveDiv;  
    selector = document.getElementById("botonColorAzar");  
    selector.onclick = colorAzar;  
    selector = document.getElementById("botonIntercambiarColores");  
    selector.onclick = intercambiarColores;  
    selector = document.getElementById("botonColor1");  
    selector.onclick = color1Jugador;  
    selector = document.getElementById("botonColor2");  
    selector.onclick = color2Jugador;  
    selector = document.getElementById("botonEmpezar");  
    selector.onclick = empezarJuego;  
    selector = document.getElementById("botonFinalizar");  
    selector.onclick = finalizarJuego;  
    selector = document.getElementsByTagName("td");  
    idCeldas = new Array (selector.length)  
    for (i=0;i<selector.length;++i) {  
        idCeldas[i] = selector[i].id;   
    }  
    bgcCeldas = new Array(3);  
    for (i=0;i<3;i++)  
    {  
        bgcCeldas[i]= new Array(3);  
    }  
    muestraMensaje = document.getElementById("texto").innerHTML;  
      
}  
function mueveDiv()  
{  
    var aleatorio;  
    this.style.left = (parseInt(Math.random()*50)+25)+"%";  
    this.style.top = (parseInt(Math.random()*60))+"%";  
}  
function colorAzar()//aleatoriamente cambia los 2 colores de los jugadores  
{  
    var selector;  
    var contenedor;  
    var aleatorio;  
    selector = document.getElementById("selectorColor");  
    aleatorio = parseInt(Math.random()*13);  
    color1 = selector[aleatorio].value;  
    color1 = color1.toLowerCase(color1);  
    aleatorio = parseInt(Math.random()*13);  
    color2 = selector[aleatorio].value;  
    color2 = color2.toLowerCase(color2);  
    if (color1==color2)  
    {  
        colorAzar();  
    }  
    else  
    {  
        contenedor = document.getElementById("colorelegido1");  
        contenedor.style.backgroundColor=color1;  
        contenedor = document.getElementById("colorelegido2");  
        contenedor.style.backgroundColor=color2;          
    }  
}  
function intercambiarColores()//intercambia el color del jugador 1 con el color del jugador 2   
{  
    var auxiliar;  
    auxiliar = color1;  
    color1 = color2;  
    color2 = auxiliar;  
    contenedor = document.getElementById("colorelegido1");  
    contenedor.style.backgroundColor=color1;  
    contenedor = document.getElementById("colorelegido2");  
    contenedor.style.backgroundColor=color2;   
}  
function color1Jugador()//funcion para cambiar el color del 1º jugador  
{  
    var contenedor;  
    var selector;  
    selector = document.getElementById("selectorColor");  
    color1 = selector.value;  
    color1 = color1.toLowerCase(color1);  
    contenedor = document.getElementById("colorelegido1");  
    contenedor.style.backgroundColor=color1;  
}  
function color2Jugador()//funcion para cambiar el color del 2º jugador  
{  
    var contenedor;  
    var selector;  
    selector = document.getElementById("selectorColor");  
    color2 = selector.value;  
    color2 = color2.toLowerCase(color2);  
    contenedor = document.getElementById("colorelegido2");  
    contenedor.style.backgroundColor=color2;  
}  
function partidaEmpezada()  
{  
    alert("no puedes cambiar el color ya que co menzo el juego")  
}  
function empezarJuego()//funcion para poner todas las variables iniciales y activar funciones para empezar la partida  
{  
    if (color1==color2)  
    {  
        alert("deben coger colores diferente");  
        return;  
    }  
    var selector;  
    var i;  
    var j;  
    var celdas;  
    selector = document.getElementById("contenedorTabla");  
    selector.onmouseover = "";  
    selector.style.left = "35%";  
    selector.style.top = "0%";  
    selector = document.getElementById("botonColorAzar");  
    selector.onclick = partidaEmpezada;  
    selector = document.getElementById("botonIntercambiarColores");  
    selector.onclick = partidaEmpezada;  
    selector = document.getElementById("botonColor1");  
    selector.onclick = partidaEmpezada;  
    selector = document.getElementById("botonColor2");  
    selector.onclick = partidaEmpezada;  
    celdas = document.getElementsByTagName("td"); //me faltaba esta linea  
    for (i=0;i<celdas.length;++i)  
    {  
        celdas[i].style.backgroundColor="white";  
        celdas[i].onclick=cambiaColor;  
    }  
    for (i=0;i<bgcCeldas.length;++i)  
    {  
        for (j=0;j<bgcCeldas[i].length;++j)  
        {  
            bgcCeldas[i][j]="white";  
        }  
    }  
    jugador = 1;  
    fichasJ1 = 0;  
    fichasJ2 = 0;  
    ganador = false;  
    document.getElementById("texto").innerHTML="Empieza el jugador 1";  
}  
function finalizarJuego()//funcion para desactivar las funciones del juego y activar las de eleccion de color para acabar la partida  
{  
    var selector;  
    var i;  
    var celdas;      
    selector = document.getElementById("contenedorTabla");  
    selector.onmouseover = mueveDiv;  
    selector = document.getElementById("botonColorAzar");  
    selector.onclick = colorAzar;  
    selector = document.getElementById("botonIntercambiarColores");  
    selector.onclick = intercambiarColores;  
    selector = document.getElementById("botonColor1");  
    selector.onclick = color1Jugador;  
    selector = document.getElementById("botonColor2");  
    selector.onclick = color2Jugador;  
    celdas = document.getElementsByTagName("td");  
    for (i=0;i<celdas.length;++i)  
    {  
        celdas[i].onclick="";  
    }  
}  
//------------------------------------------  
//---------------3 en raya------------------  
//------------------------------------------  
function cambiaColor()//funcion principal que cambia el color y la principal del juego que llama a diferente funciones para que todo funcione  
{  
    var color;  
    color = this.style.backgroundColor;  
    if (jugador==1 && fichasJ1==3)  
    {  
        if (color==color1)  
        {  
            this.style.backgroundColor = "white";  
            cambiaComprobador(this);  
            fichasJ1--  
        }  
    }  
    else if (jugador==2 && fichasJ2==3)  
    {  
        if (color==color2)  
        {  
            this.style.backgroundColor = "white";  
            cambiaComprobador(this);  
            fichasJ2--  
        }  
    }  
    else if (jugador==1 && color=="white")   
    {  
        this.style.backgroundColor=color1;  
        jugador=2;  
        fichasJ1++;  
        cambiaComprobador(this);  
        ganador = comprobarGanador(this);  
        contadorMensaje = 0;  
    }  
    else if (jugador==2 && color=="white")  
    {  
        this.style.backgroundColor=color2;  
        jugador=1;  
        fichasJ2++  
        cambiaComprobador(this);  
        ganador = comprobarGanador(this);  
        contadorMensaje = 0;  
    }  
    cambiaMensaje(this);  
}  
function cambiaComprobador(casilla)//funcion para cambiar la matriz creada para comprobar el 3 en raya  
{  
    var i;  
    var j;  
    var x;  
    x = 0;  
    for (i=0;i<bgcCeldas.length;++i)  
    {  
        for (j=0;j<bgcCeldas[i].length;++j)  
        {  
            if (casilla.id==idCeldas[x])  
            {  
                bgcCeldas[i][j] = casilla.style.backgroundColor;  
                return;  
            }  
            ++x  
        }  
    }  
}  
function comprobarGanador(casilla)//comprueba en la matriz todas las opciones posibles por si hubiese un ganador  
{  
    var color;  
    var i;  
    color = casilla.style.backgroundColor;  
    for (i=0;i<3;++i)  
    {  
        if (bgcCeldas[i][0]==color && bgcCeldas[i][1]==color && bgcCeldas[i][2]==color)  
        {  
            return true;  
        }  
        if (bgcCeldas[0][i]==color && bgcCeldas[1][i]==color && bgcCeldas[2][i]==color)  
        {  
            return true;  
        }  
    }  
    if (bgcCeldas[0][0]==color && bgcCeldas[1][1]==color && bgcCeldas[2][2]==color)  
    {  
        return true;  
    }  
    if (bgcCeldas[0][2]==color && bgcCeldas[1][1]==color && bgcCeldas[2][0]==color)  
    {  
        return true;  
    }  
}  
  
function cambiaMensaje(casilla)//escribe el mensaje para saver que a de hacer el jugador al que le toque  
{  
    var color;  
    color = casilla.style.backgroundColor;  
    if (ganador)  
    {  
        if (jugador!=1)  
        {  
            document.getElementById("texto").innerHTML = "Ha ganado el jugador 1";  
            finalizarJuego();  
        }  
        else  
        {  
            document.getElementById("texto").innerHTML = "Ha ganado el jugador 2";  
            finalizarJuego();  
        }  
    }  
    else if (jugador==1 && fichasJ1==3)  
    {  
        document.getElementById("texto").innerHTML = "Has de borrar una ficha de tu color, jugador 1";  
    }  
    else if (jugador==2 && fichasJ2==3)  
    {  
        document.getElementById("texto").innerHTML = "has de borrar una ficha de tu color, jugador 2";  
    }  
    else if (jugador==1)  
    {  
        if (contadorMensaje<1)  
        {  
            document.getElementById("texto").innerHTML = "le toca al jugador 1";  
            contadorMensaje++  
        }  
        else  
        {  
            document.getElementById("texto").innerHTML = "solo puedes poner ficha en una celda blanca";  
        }  
    }  
    else if (jugador==2)  
    {  
        if (contadorMensaje<1)  
        {  
            document.getElementById("texto").innerHTML = "le toca al jugador 2";  
            contadorMensaje++  
        }  
        else  
        {  
            document.getElementById("texto").innerHTML = "solo puedes poner ficha en una celda blanca";  
        }  
    }  
}  
var jugador = 1;  
var fichasJ1 = 0;  
var fichasJ2 = 0;  
var idCeldas;  
var bgcCeldas;  
var muestraMensaje;  
var ganador;  
var contadorMensaje;  
window.onload = function ()  
{  
    var selector;  
    var i;  
    selector = document.getElementById("contenedorTabla");  
    selector.onmouseover = mueveDiv;  
    selector = document.getElementById("botonColorAzar");  
    selector.onclick = colorAzar;  
    selector = document.getElementById("botonIntercambiarColores");  
    selector.onclick = intercambiarColores;  
    selector = document.getElementById("botonColor1");  
    selector.onclick = color1Jugador;  
    selector = document.getElementById("botonColor2");  
    selector.onclick = color2Jugador;  
    selector = document.getElementById("botonEmpezar");  
    selector.onclick = empezarJuego;  
    selector = document.getElementById("botonFinalizar");  
    selector.onclick = finalizarJuego;  
    selector = document.getElementsByTagName("td");  
    idCeldas = new Array (selector.length)  
    for (i=0;i<selector.length;++i) {  
        idCeldas[i] = selector[i].id;   
    }  
    bgcCeldas = new Array(3);  
    for (i=0;i<3;i++)  
    {  
        bgcCeldas[i]= new Array(3);  
    }  
    muestraMensaje = document.getElementById("texto").innerHTML;  
      
}  
function mueveDiv()  
{  
    var aleatorio;  
    this.style.left = (parseInt(Math.random()*50)+25)+"%";  
    this.style.top = (parseInt(Math.random()*60))+"%";  
}  
function colorAzar()//aleatoriamente cambia los 2 colores de los jugadores  
{  
    var selector;  
    var contenedor;  
    var aleatorio;  
    selector = document.getElementById("selectorColor");  
    aleatorio = parseInt(Math.random()*13);  
    color1 = selector[aleatorio].value;  
    color1 = color1.toLowerCase(color1);  
    aleatorio = parseInt(Math.random()*13);  
    color2 = selector[aleatorio].value;  
    color2 = color2.toLowerCase(color2);  
    if (color1==color2)  
    {  
        colorAzar();  
    }  
    else  
    {  
        contenedor = document.getElementById("colorelegido1");  
        contenedor.style.backgroundColor=color1;  
        contenedor = document.getElementById("colorelegido2");  
        contenedor.style.backgroundColor=color2;          
    }  
}  
function intercambiarColores()//intercambia el color del jugador 1 con el color del jugador 2   
{  
    var auxiliar;  
    auxiliar = color1;  
    color1 = color2;  
    color2 = auxiliar;  
    contenedor = document.getElementById("colorelegido1");  
    contenedor.style.backgroundColor=color1;  
    contenedor = document.getElementById("colorelegido2");  
    contenedor.style.backgroundColor=color2;   
}  
function color1Jugador()//funcion para cambiar el color del 1º jugador  
{  
    var contenedor;  
    var selector;  
    selector = document.getElementById("selectorColor");  
    color1 = selector.value;  
    color1 = color1.toLowerCase(color1);  
    contenedor = document.getElementById("colorelegido1");  
    contenedor.style.backgroundColor=color1;  
}  
function color2Jugador()//funcion para cambiar el color del 2º jugador  
{  
    var contenedor;  
    var selector;  
    selector = document.getElementById("selectorColor");  
    color2 = selector.value;  
    color2 = color2.toLowerCase(color2);  
    contenedor = document.getElementById("colorelegido2");  
    contenedor.style.backgroundColor=color2;  
}  
function partidaEmpezada()  
{  
    alert("no puedes cambiar el color ya que co menzo el juego")  
}  
function empezarJuego()//funcion para poner todas las variables iniciales y activar funciones para empezar la partida  
{  
    if (color1==color2)  
    {  
        alert("deben coger colores diferente");  
        return;  
    }  
    var selector;  
    var i;  
    var j;  
    var celdas;  
    selector = document.getElementById("contenedorTabla");  
    selector.onmouseover = "";  
    selector.style.left = "35%";  
    selector.style.top = "0%";  
    selector = document.getElementById("botonColorAzar");  
    selector.onclick = partidaEmpezada;  
    selector = document.getElementById("botonIntercambiarColores");  
    selector.onclick = partidaEmpezada;  
    selector = document.getElementById("botonColor1");  
    selector.onclick = partidaEmpezada;  
    selector = document.getElementById("botonColor2");  
    selector.onclick = partidaEmpezada;  
    celdas = document.getElementsByTagName("td"); //me faltaba esta linea  
    for (i=0;i<celdas.length;++i)  
    {  
        celdas[i].style.backgroundColor="white";  
        celdas[i].onclick=cambiaColor;  
    }  
    for (i=0;i<bgcCeldas.length;++i)  
    {  
        for (j=0;j<bgcCeldas[i].length;++j)  
        {  
            bgcCeldas[i][j]="white";  
        }  
    }  
    jugador = 1;  
    fichasJ1 = 0;  
    fichasJ2 = 0;  
    ganador = false;  
    document.getElementById("texto").innerHTML="Empieza el jugador 1";  
}  
function finalizarJuego()//funcion para desactivar las funciones del juego y activar las de eleccion de color para acabar la partida  
{  
    var selector;  
    var i;  
    var celdas;      
    selector = document.getElementById("contenedorTabla");  
    selector.onmouseover = mueveDiv;  
    selector = document.getElementById("botonColorAzar");  
    selector.onclick = colorAzar;  
    selector = document.getElementById("botonIntercambiarColores");  
    selector.onclick = intercambiarColores;  
    selector = document.getElementById("botonColor1");  
    selector.onclick = color1Jugador;  
    selector = document.getElementById("botonColor2");  
    selector.onclick = color2Jugador;  
    celdas = document.getElementsByTagName("td");  
    for (i=0;i<celdas.length;++i)  
    {  
        celdas[i].onclick="";  
    }  
}  
//------------------------------------------  
//---------------3 en raya------------------  
//------------------------------------------  
function cambiaColor()//funcion principal que cambia el color y la principal del juego que llama a diferente funciones para que todo funcione  
{  
    var color;  
    color = this.style.backgroundColor;  
    if (jugador==1 && fichasJ1==3)  
    {  
        if (color==color1)  
        {  
            this.style.backgroundColor = "white";  
            cambiaComprobador(this);  
            fichasJ1--  
        }  
    }  
    else if (jugador==2 && fichasJ2==3)  
    {  
        if (color==color2)  
        {  
            this.style.backgroundColor = "white";  
            cambiaComprobador(this);  
            fichasJ2--  
        }  
    }  
    else if (jugador==1 && color=="white")   
    {  
        this.style.backgroundColor=color1;  
        jugador=2;  
        fichasJ1++;  
        cambiaComprobador(this);  
        ganador = comprobarGanador(this);  
        contadorMensaje = 0;  
    }  
    else if (jugador==2 && color=="white")  
    {  
        this.style.backgroundColor=color2;  
        jugador=1;  
        fichasJ2++  
        cambiaComprobador(this);  
        ganador = comprobarGanador(this);  
        contadorMensaje = 0;  
    }  
    cambiaMensaje(this);  
}  
function cambiaComprobador(casilla)//funcion para cambiar la matriz creada para comprobar el 3 en raya  
{  
    var i;  
    var j;  
    var x;  
    x = 0;  
    for (i=0;i<bgcCeldas.length;++i)  
    {  
        for (j=0;j<bgcCeldas[i].length;++j)  
        {  
            if (casilla.id==idCeldas[x])  
            {  
                bgcCeldas[i][j] = casilla.style.backgroundColor;  
                return;  
            }  
            ++x  
        }  
    }  
}  
function comprobarGanador(casilla)//comprueba en la matriz todas las opciones posibles por si hubiese un ganador  
{  
    var color;  
    var i;  
    color = casilla.style.backgroundColor;  
    for (i=0;i<3;++i)  
    {  
        if (bgcCeldas[i][0]==color && bgcCeldas[i][1]==color && bgcCeldas[i][2]==color)  
        {  
            return true;  
        }  
        if (bgcCeldas[0][i]==color && bgcCeldas[1][i]==color && bgcCeldas[2][i]==color)  
        {  
            return true;  
        }  
    }  
    if (bgcCeldas[0][0]==color && bgcCeldas[1][1]==color && bgcCeldas[2][2]==color)  
    {  
        return true;  
    }  
    if (bgcCeldas[0][2]==color && bgcCeldas[1][1]==color && bgcCeldas[2][0]==color)  
    {  
        return true;  
    }  
}  
function cambiaMensaje(casilla)//escribe el mensaje para saver que a de hacer el jugador al que le toque  
{  
    var color;  
    color = casilla.style.backgroundColor;  
    if (ganador)  
    {  
        if (jugador!=1)  
        {  
            document.getElementById("texto").innerHTML = "Ha ganado el jugador 1";  
            finalizarJuego();  
        }  
        else  
        {  
            document.getElementById("texto").innerHTML = "Ha ganado el jugador 2";  
            finalizarJuego();  
        }  
    }  
    else if (jugador==1 && fichasJ1==3)  
    {  
        document.getElementById("texto").innerHTML = "Has de borrar una ficha de tu color, jugador 1";  
    }  
    else if (jugador==2 && fichasJ2==3)  
    {  
        document.getElementById("texto").innerHTML = "has de borrar una ficha de tu color, jugador 2";  
    }  
    else if (jugador==1)  
    {  
        if (contadorMensaje<1)  
        {  
            document.getElementById("texto").innerHTML = "le toca al jugador 1";  
            contadorMensaje++  
        }  
        else  
        {  
            document.getElementById("texto").innerHTML = "solo puedes poner ficha en una celda blanca";  
        }  
    }  
    else if (jugador==2)  
    {  
        if (contadorMensaje<1)  
        {  
            document.getElementById("texto").innerHTML = "le toca al jugador 2";  
            contadorMensaje++  
        }  
        else  
        {  
            document.getElementById("texto").innerHTML = "solo puedes poner ficha en una celda blanca";  
        }  
    }  
}

Roberto Prince

student•

C++11 que es una version implementada ya hace un buen rato si tiene un equivalente, no a

 for( var index in arreglo){ /* arreglo[index] */} //js

pero si equivalente a

for(var valor of arreglo){ /*valor */} //js ES6

disponible ya en los mejores browsers de javascript. Y bueno en C++11 seria

for(auto valor : myvector ){/*valor*/} //C++11

auto en este contexto es equivalente var es decir, simboliza a cualquier tipo

DTB-C Consulting

student•

Seguro que Freddy ya no me contestará al día de hoy :(

Wilson Castro Gil

student•

Hola a todos, con JavaScript puedo crear gráficos tipo torta, barras o columnas como en Python?

Ricardo Azpeitia P.

student•

Si, si quieres algo rápido y fácil usa google charts.

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <title>Ahorcado</title>  
        <link rel="stylesheet" href="">  
        <script src="ahorcado.js" type="text/javascript"></script>  
    </head>  
    <body>  
        <p>  
            Elige una letra:  
            <input type="text" id="letra"/>  
            <input type="button" id="boton" value="Boom!!"/>  
        </p>  
        <div>  
            <h2>Marcador</h2>  
            <p>win</p>  
            <p id="win"></p>  
            <p>lose</p>  
            <p id="lose"></p>  
        </div>  
        <h2 id="pista">_ _ _ _ _ _ _ _ _</h2>  
        <canvas id="c"></canvas>  
        <br>  
        <input type="button" id="Reinicio" value="Reiniciar!!" align="left" />  
        <script type="text/javascript">  
            iniciar();  
        </script>  
    </body>  
</html>

var palabra = ["amor","platzi","sonrie","mejorandola","programacion"];  
var paljuego;  
var hombre, l;  
var completo;  
var ganados = 0, derrotas = 0;  
  
var Ahorcado = function (con)  
{  
    this.contexto = con;  
    this.maximo = 5;  
    this.intentos = 0;  
    this.vivo = true;  
  
    this.dibujar();  
}  
Ahorcado.prototype.dibujar = function ()  
{  
    var dibujo = this.contexto;  
  
    //Dibujando el poste  
    dibujo.beginPath();  
    dibujo.moveTo(150,100);  
    dibujo.lineTo(150,50);  
    dibujo.lineTo(400,50);  
    dibujo.lineTo(400,350);  
    dibujo.lineWidth = 15;  
    dibujo.strokeStyle = "#000";  
    dibujo.stroke();  
    dibujo.closePath();  
  
    if(this.intentos > 0)  
    {  
        // intentos = 1 --> rostro  
        dibujo.beginPath();  
        dibujo.arc(150, 140, 40, 0, Math.PI * 2, false);  
        dibujo.strokeStyle = "red";  
        dibujo.lineWidth = 5;  
        dibujo.stroke();  
        dibujo.closePath();  
  
        if(this.intentos > 1)  
        {  
            // intentos = 2 --> torso  
            dibujo.beginPath();  
            dibujo.moveTo(150,180);  
            dibujo.lineTo(150,250);  
            dibujo.strokeStyle = "red";  
            dibujo.lineWidth = 5;  
            dibujo.stroke();  
            dibujo.closePath();  
  
            if(this.intentos > 2)  
            {  
                // intentos = 3 --> brazos  
                dibujo.beginPath();  
                dibujo.moveTo(120,220);  
                dibujo.lineTo(150,180);  
                dibujo.lineTo(180,220);  
                dibujo.strokeStyle = "red";  
                dibujo.lineWidth = 5;  
                dibujo.stroke();  
                dibujo.closePath();  
  
                if(this.intentos > 3)  
                {  
                    // intentos = 4 --> piernas  
                    dibujo.beginPath();  
                    dibujo.moveTo(120,290);  
                    dibujo.lineTo(150,250);  
                    dibujo.lineTo(180,290);  
                    dibujo.strokeStyle = "red";  
                    dibujo.lineWidth = 5;  
                    dibujo.stroke();  
                    dibujo.closePath();  
  
                    if(this.intentos > 4)  
                    {  
                        // intentos = 5 --> ojos muertos  
                        dibujo.beginPath();  
                        //Ojo izquierdo  
                        dibujo.moveTo(125,120);  
                        dibujo.lineTo(145,145);  
                        dibujo.moveTo(145,120);  
                        dibujo.lineTo(125,145);  
  
                        //Ojo derecho  
                        dibujo.moveTo(155,120);  
                        dibujo.lineTo(175,145);  
                        dibujo.moveTo(175,120);  
                        dibujo.lineTo(155,145);  
  
                        dibujo.strokeStyle = "blue";  
                        dibujo.lineWidth = 5;  
                        dibujo.stroke();  
                        dibujo.closePath();  
                    }  
                }  
            }  
  
        }  
  
    }  
}  
Ahorcado.prototype.trazar = function ()  
{  
    this.intentos++;  
    if(this.intentos >= this.maximo)  
    {  
        this.vivo = false;  
    }  
    this.dibujar();  
}  
  
function iniciar ()   
{  
    l = document.getElementById("letra");  
    var b = document.getElementById("boton");  
    var re = document.getElementById("Reinicio");  
    var w = document.getElementById("win");  
    var lo = document.getElementById("lose");  
    var canvas = document.getElementById("c");  
    canvas.width = 500;  
    canvas.height = 400;  
    var contexto = canvas.getContext("2d");  
    w.innerText = "" + ganados;  
    lo.innerText = "" + derrotas;  
    hombre = new Ahorcado(contexto);  
    elegirpalabra();  
      
    paljuego = paljuego.toUpperCase();  
  
    espacio = new Array(paljuego.length);  
  
    b.addEventListener("click", agregarLetra);  
    re.addEventListener("click", reiniciarjuego);  
  
    mostrarPista(espacio);  
}  
function elegirpalabra () {  
       
    var n = palabra.length;  
  
    var r = Math.floor(Math.random() * (n - 1) + 1)  
  
    paljuego = palabra[r];  
  
    completo = false;  
        
}  
function agregarLetra()  
{  
    var letra = l.value;  
    l.value = "";  
    if(!hombre.vivo)  
    {  
        alert("¡Estás muerto vuelve a intentarlo!");  
        mostrarpalabra();  
    }  
    else  
    {  
        if (completo)  
        {  
            alert("¡Has ganado reinicia para jugar nuevamente!");  
            mostrarpalabra();  
        }  
        else  
        {  
            mostrarPalabra(paljuego, hombre, letra);  
        }  
    }  
}  
function mostrarPalabra(palabra, ahorcado, letra)  
{  
    var encontrado = false;  
    var p;  
    letra = letra.toUpperCase();  
    for (p in palabra)  
    {  
        if (letra == palabra[p])  
        {  
            espacio[p] = letra;  
            encontrado = true;  
        }  
    }  
    mostrarPista(espacio);  
  
    // Si NO lo encontré  
    if(!encontrado)  
    {  
        ahorcado.trazar();  
    }  
  
    if(!ahorcado.vivo)  
    {  
        alert("¡Estás muerto!");  
        mostrarpalabra();  
        derrotas++;  
        var lo = document.getElementById("lose");  
        lo.innerText = "" + derrotas;  
    }  
    if (completo)  
    {  
        alert("¡Has gando!");  
        mostrarpalabra();  
        ganados++;  
        var w = document.getElementById("win");  
        w.innerText = "" + ganados;  
    }  
}  
function mostrarPista(espacio)  
{  
    var pista = document.getElementById("pista");  
    var texto = "";  
    var i;  
    var largo = espacio.length;  
    var terminado = true;  
  
    for(i = 0; i<largo; i++)  
    {  
        if(espacio[i] != undefined)  
        {  
            texto = texto + espacio[i] + " ";  
        }  
        else  
        {  
            texto += "_ ";  
            terminado = false;  
        }  
    }  
    pista.innerText = texto;  
    if (terminado)  
    {  
        completo = true;  
    }  
}  
function mostrarpalabra()  
{  
    var pista = document.getElementById("pista");  
    var texto = "";  
    var i;  
    var largo = espacio.length;  
  
    for(i = 0; i<largo; i++)  
    {  
        texto = texto + paljuego[i] + " ";  
    }  
    pista.innerText = texto;  
    var b = document.getElementById("boton");  
}  
function reiniciarjuego()  
{  
    var canvas = document.getElementById("c");  
    canvas.width = 500;  
    canvas.height = 400;  
    var contexto = canvas.getContext("2d");  
    hombre = new Ahorcado(contexto);  
    elegirpalabra();  
    paljuego = paljuego.toUpperCase();  
    espacio = new Array(paljuego.length);  
    hombre.intentos = 0;  
    hombre.vivo = true;  
    completo = false;  
    mostrarPista(espacio);  
    hombre.dibujar();  
}

Este es mi juego de Tres en Raya  
  
<html>  
<head>  
    <title></title>  
    <script type="text/javascript" src="canvas.js"></script>  
    <link rel="stylesheet" href="style.js" type="text/css">  
</head>  
<body>  
    <select id="selectorColor">  
        <option>Black</option>  
        <option>Blue</option>  
        <option>Fuchsia</option>  
        <option>Green</option>  
        <option>Lime</option>  
        <option>Maroon</option>  
        <option>Navy</option>  
        <option>Olive</option>  
        <option>Orange</option>  
        <option>Purple</option>  
        <option>Red</option>  
        <option>Silver</option>  
        <option>Teal</option>  
        <option>Yellow</option>  
    </select>  
    <br>  
    <button id="botonColorAzar">colores al azar</button>  
    <br>  
    <button id="botonIntercambiarColores">Intercambiar colores</button>  
    <br>  
    <button id="botonColor1">1 jugador</button>  
    <div class="muestracolor" id="colorelegido1"></div>  
    <button id="botonColor2">2 jugador</button>  
    <div class="muestracolor" id="colorelegido2"></div>  
    <button id="botonEmpezar">empezar</button>  
    <br>  
    <button id="botonFinalizar">finalizar</button>  
    <div id="contenedorTabla">  
        <table>  
            <tr>  
                <td id="celda1"></td>  
                <td id="celda2"></td>  
                <td id="celda3"></td>  
            </tr>  
            <tr>  
                <td id="celda4"></td>  
                <td id="celda5"></td>  
                <td id="celda6"></td>  
            </tr>  
            <tr>  
                <td id="celda7"></td>  
                <td id="celda8"></td>  
                <td id="celda9"></td>  
            </tr>  
        </table>  
        <p id="texto"></p>  
    </div>  
</body>  
</html>  
            
  
muestracolor  
{  
    height:50px;  
    width: 50px;  
    border: double 3px blue;  
}  
#colorelegido1  
{  
    background-color: gold;  
}  
#colorelegido2  
{  
    background-color: silver;  
}  
td  
{  
    width: 50px;  
    height: 50px;  
    border: dashed green 3px;  
}  
table  
{  
    border: double blue 5px;  
}  
div#contenedorTabla  
{  
    position: absolute;  
    top: 0%;  
    left: 35%;  
}  
  
  
  
    var color1 = "orange";var color2 = "silver";  
var jugador = 1;  
var fichasJ1 = 0;  
var fichasJ2 = 0;  
var idCeldas;  
var bgcCeldas;  
var muestraMensaje;  
var ganador;  
var contadorMensaje;  
  
window.onload = function ()  
{  
    var selector;  
    var i;  
    selector = document.getElementById("contenedorTabla");  
    selector.onmouseover = mueveDiv;  
    selector = document.getElementById("botonColorAzar");  
    selector.onclick = colorAzar;  
    selector = document.getElementById("botonIntercambiarColores");  
    selector.onclick = intercambiarColores;  
    selector = document.getElementById("botonColor1");  
    selector.onclick = color1Jugador;  
    selector = document.getElementById("botonColor2");  
    selector.onclick = color2Jugador;  
    selector = document.getElementById("botonEmpezar");  
    selector.onclick = empezarJuego;  
    selector = document.getElementById("botonFinalizar");  
    selector.onclick = finalizarJuego;  
    selector = document.getElementsByTagName("td");  
    idCeldas = new Array (selector.length)  
    for (i=0;i<selector.length;++i) {  
        idCeldas[i] = selector[i].id;   
    }  
    bgcCeldas = new Array(3);  
    for (i=0;i<3;i++)  
    {  
        bgcCeldas[i]= new Array(3);  
    }  
    muestraMensaje = document.getElementById("texto").innerHTML;  
      
}  
function mueveDiv()  
{  
    var aleatorio;  
    this.style.left = (parseInt(Math.random()*50)+25)+"%";  
    this.style.top = (parseInt(Math.random()*60))+"%";  
}  
function colorAzar()//aleatoriamente cambia los 2 colores de los jugadores  
{  
    var selector;  
    var contenedor;  
    var aleatorio;  
    selector = document.getElementById("selectorColor");  
    aleatorio = parseInt(Math.random()*13);  
    color1 = selector[aleatorio].value;  
    color1 = color1.toLowerCase(color1);  
    aleatorio = parseInt(Math.random()*13);  
    color2 = selector[aleatorio].value;  
    color2 = color2.toLowerCase(color2);  
    if (color1==color2)  
    {  
        colorAzar();  
    }  
    else  
    {  
        contenedor = document.getElementById("colorelegido1");  
        contenedor.style.backgroundColor=color1;  
        contenedor = document.getElementById("colorelegido2");  
        contenedor.style.backgroundColor=color2;          
    }  
}  
function intercambiarColores()//intercambia el color del jugador 1 con el color del jugador 2   
{  
    var auxiliar;  
    auxiliar = color1;  
    color1 = color2;  
    color2 = auxiliar;  
    contenedor = document.getElementById("colorelegido1");  
    contenedor.style.backgroundColor=color1;  
    contenedor = document.getElementById("colorelegido2");  
    contenedor.style.backgroundColor=color2;   
}  
function color1Jugador()//funcion para cambiar el color del 1º jugador  
{  
    var contenedor;  
    var selector;  
    selector = document.getElementById("selectorColor");  
    color1 = selector.value;  
    color1 = color1.toLowerCase(color1);  
    contenedor = document.getElementById("colorelegido1");  
    contenedor.style.backgroundColor=color1;  
}  
function color2Jugador()//funcion para cambiar el color del 2º jugador  
{  
    var contenedor;  
    var selector;  
    selector = document.getElementById("selectorColor");  
    color2 = selector.value;  
    color2 = color2.toLowerCase(color2);  
    contenedor = document.getElementById("colorelegido2");  
    contenedor.style.backgroundColor=color2;  
}  
function partidaEmpezada()  
{  
    alert("no puedes cambiar el color ya que co menzo el juego")  
}  
function empezarJuego()//funcion para poner todas las variables iniciales y activar funciones para empezar la partida  
{  
    if (color1==color2)  
    {  
        alert("deben coger colores diferente");  
        return;  
    }  
    var selector;  
    var i;  
    var j;  
    var celdas;  
    selector = document.getElementById("contenedorTabla");  
    selector.onmouseover = "";  
    selector.style.left = "35%";  
    selector.style.top = "0%";  
    selector = document.getElementById("botonColorAzar");  
    selector.onclick = partidaEmpezada;  
    selector = document.getElementById("botonIntercambiarColores");  
    selector.onclick = partidaEmpezada;  
    selector = document.getElementById("botonColor1");  
    selector.onclick = partidaEmpezada;  
    selector = document.getElementById("botonColor2");  
    selector.onclick = partidaEmpezada;  
    celdas = document.getElementsByTagName("td"); //me faltaba esta linea  
    for (i=0;i<celdas.length;++i)  
    {  
        celdas[i].style.backgroundColor="white";  
        celdas[i].onclick=cambiaColor;  
    }  
    for (i=0;i<bgcCeldas.length;++i)  
    {  
        for (j=0;j<bgcCeldas[i].length;++j)  
        {  
            bgcCeldas[i][j]="white";  
        }  
    }  
    jugador = 1;  
    fichasJ1 = 0;  
    fichasJ2 = 0;  
    ganador = false;  
    document.getElementById("texto").innerHTML="Empieza el jugador 1";  
}  
function finalizarJuego()//funcion para desactivar las funciones del juego y activar las de eleccion de color para acabar la partida  
{  
    var selector;  
    var i;  
    var celdas;      
    selector = document.getElementById("contenedorTabla");  
    selector.onmouseover = mueveDiv;  
    selector = document.getElementById("botonColorAzar");  
    selector.onclick = colorAzar;  
    selector = document.getElementById("botonIntercambiarColores");  
    selector.onclick = intercambiarColores;  
    selector = document.getElementById("botonColor1");  
    selector.onclick = color1Jugador;  
    selector = document.getElementById("botonColor2");  
    selector.onclick = color2Jugador;  
    celdas = document.getElementsByTagName("td");  
    for (i=0;i<celdas.length;++i)  
    {  
        celdas[i].onclick="";  
    }  
}  
//------------------------------------------  
//---------------3 en raya------------------  
//------------------------------------------  
function cambiaColor()//funcion principal que cambia el color y la principal del juego que llama a diferente funciones para que todo funcione  
{  
    var color;  
    color = this.style.backgroundColor;  
    if (jugador==1 && fichasJ1==3)  
    {  
        if (color==color1)  
        {  
            this.style.backgroundColor = "white";  
            cambiaComprobador(this);  
            fichasJ1--  
        }  
    }  
    else if (jugador==2 && fichasJ2==3)  
    {  
        if (color==color2)  
        {  
            this.style.backgroundColor = "white";  
            cambiaComprobador(this);  
            fichasJ2--  
        }  
    }  
    else if (jugador==1 && color=="white")   
    {  
        this.style.backgroundColor=color1;  
        jugador=2;  
        fichasJ1++;  
        cambiaComprobador(this);  
        ganador = comprobarGanador(this);  
        contadorMensaje = 0;  
    }  
    else if (jugador==2 && color=="white")  
    {  
        this.style.backgroundColor=color2;  
        jugador=1;  
        fichasJ2++  
        cambiaComprobador(this);  
        ganador = comprobarGanador(this);  
        contadorMensaje = 0;  
    }  
    cambiaMensaje(this);  
}  
function cambiaComprobador(casilla)//funcion para cambiar la matriz creada para comprobar el 3 en raya  
{  
    var i;  
    var j;  
    var x;  
    x = 0;  
    for (i=0;i<bgcCeldas.length;++i)  
    {  
        for (j=0;j<bgcCeldas[i].length;++j)  
        {  
            if (casilla.id==idCeldas[x])  
            {  
                bgcCeldas[i][j] = casilla.style.backgroundColor;  
                return;  
            }  
            ++x  
        }  
    }  
}  
function comprobarGanador(casilla)//comprueba en la matriz todas las opciones posibles por si hubiese un ganador  
{  
    var color;  
    var i;  
    color = casilla.style.backgroundColor;  
    for (i=0;i<3;++i)  
    {  
        if (bgcCeldas[i][0]==color && bgcCeldas[i][1]==color && bgcCeldas[i][2]==color)  
        {  
            return true;  
        }  
        if (bgcCeldas[0][i]==color && bgcCeldas[1][i]==color && bgcCeldas[2][i]==color)  
        {  
            return true;  
        }  
    }  
    if (bgcCeldas[0][0]==color && bgcCeldas[1][1]==color && bgcCeldas[2][2]==color)  
    {  
        return true;  
    }  
    if (bgcCeldas[0][2]==color && bgcCeldas[1][1]==color && bgcCeldas[2][0]==color)  
    {  
        return true;  
    }  
}  
  
function cambiaMensaje(casilla)//escribe el mensaje para saver que a de hacer el jugador al que le toque  
{  
    var color;  
    color = casilla.style.backgroundColor;  
    if (ganador)  
    {  
        if (jugador!=1)  
        {  
            document.getElementById("texto").innerHTML = "Ha ganado el jugador 1";  
            finalizarJuego();  
        }  
        else  
        {  
            document.getElementById("texto").innerHTML = "Ha ganado el jugador 2";  
            finalizarJuego();  
        }  
    }  
    else if (jugador==1 && fichasJ1==3)  
    {  
        document.getElementById("texto").innerHTML = "Has de borrar una ficha de tu color, jugador 1";  
    }  
    else if (jugador==2 && fichasJ2==3)  
    {  
        document.getElementById("texto").innerHTML = "has de borrar una ficha de tu color, jugador 2";  
    }  
    else if (jugador==1)  
    {  
        if (contadorMensaje<1)  
        {  
            document.getElementById("texto").innerHTML = "le toca al jugador 1";  
            contadorMensaje++  
        }  
        else  
        {  
            document.getElementById("texto").innerHTML = "solo puedes poner ficha en una celda blanca";  
        }  
    }  
    else if (jugador==2)  
    {  
        if (contadorMensaje<1)  
        {  
            document.getElementById("texto").innerHTML = "le toca al jugador 2";  
            contadorMensaje++  
        }  
        else  
        {  
            document.getElementById("texto").innerHTML = "solo puedes poner ficha en una celda blanca";  
        }  
    }  
}  
var jugador = 1;  
var fichasJ1 = 0;  
var fichasJ2 = 0;  
var idCeldas;  
var bgcCeldas;  
var muestraMensaje;  
var ganador;  
var contadorMensaje;  
window.onload = function ()  
{  
    var selector;  
    var i;  
    selector = document.getElementById("contenedorTabla");  
    selector.onmouseover = mueveDiv;  
    selector = document.getElementById("botonColorAzar");  
    selector.onclick = colorAzar;  
    selector = document.getElementById("botonIntercambiarColores");  
    selector.onclick = intercambiarColores;  
    selector = document.getElementById("botonColor1");  
    selector.onclick = color1Jugador;  
    selector = document.getElementById("botonColor2");  
    selector.onclick = color2Jugador;  
    selector = document.getElementById("botonEmpezar");  
    selector.onclick = empezarJuego;  
    selector = document.getElementById("botonFinalizar");  
    selector.onclick = finalizarJuego;  
    selector = document.getElementsByTagName("td");  
    idCeldas = new Array (selector.length)  
    for (i=0;i<selector.length;++i) {  
        idCeldas[i] = selector[i].id;   
    }  
    bgcCeldas = new Array(3);  
    for (i=0;i<3;i++)  
    {  
        bgcCeldas[i]= new Array(3);  
    }  
    muestraMensaje = document.getElementById("texto").innerHTML;  
      
}  
function mueveDiv()  
{  
    var aleatorio;  
    this.style.left = (parseInt(Math.random()*50)+25)+"%";  
    this.style.top = (parseInt(Math.random()*60))+"%";  
}  
function colorAzar()//aleatoriamente cambia los 2 colores de los jugadores  
{  
    var selector;  
    var contenedor;  
    var aleatorio;  
    selector = document.getElementById("selectorColor");  
    aleatorio = parseInt(Math.random()*13);  
    color1 = selector[aleatorio].value;  
    color1 = color1.toLowerCase(color1);  
    aleatorio = parseInt(Math.random()*13);  
    color2 = selector[aleatorio].value;  
    color2 = color2.toLowerCase(color2);  
    if (color1==color2)  
    {  
        colorAzar();  
    }  
    else  
    {  
        contenedor = document.getElementById("colorelegido1");  
        contenedor.style.backgroundColor=color1;  
        contenedor = document.getElementById("colorelegido2");  
        contenedor.style.backgroundColor=color2;          
    }  
}  
function intercambiarColores()//intercambia el color del jugador 1 con el color del jugador 2   
{  
    var auxiliar;  
    auxiliar = color1;  
    color1 = color2;  
    color2 = auxiliar;  
    contenedor = document.getElementById("colorelegido1");  
    contenedor.style.backgroundColor=color1;  
    contenedor = document.getElementById("colorelegido2");  
    contenedor.style.backgroundColor=color2;   
}  
function color1Jugador()//funcion para cambiar el color del 1º jugador  
{  
    var contenedor;  
    var selector;  
    selector = document.getElementById("selectorColor");  
    color1 = selector.value;  
    color1 = color1.toLowerCase(color1);  
    contenedor = document.getElementById("colorelegido1");  
    contenedor.style.backgroundColor=color1;  
}  
function color2Jugador()//funcion para cambiar el color del 2º jugador  
{  
    var contenedor;  
    var selector;  
    selector = document.getElementById("selectorColor");  
    color2 = selector.value;  
    color2 = color2.toLowerCase(color2);  
    contenedor = document.getElementById("colorelegido2");  
    contenedor.style.backgroundColor=color2;  
}  
function partidaEmpezada()  
{  
    alert("no puedes cambiar el color ya que co menzo el juego")  
}  
function empezarJuego()//funcion para poner todas las variables iniciales y activar funciones para empezar la partida  
{  
    if (color1==color2)  
    {  
        alert("deben coger colores diferente");  
        return;  
    }  
    var selector;  
    var i;  
    var j;  
    var celdas;  
    selector = document.getElementById("contenedorTabla");  
    selector.onmouseover = "";  
    selector.style.left = "35%";  
    selector.style.top = "0%";  
    selector = document.getElementById("botonColorAzar");  
    selector.onclick = partidaEmpezada;  
    selector = document.getElementById("botonIntercambiarColores");  
    selector.onclick = partidaEmpezada;  
    selector = document.getElementById("botonColor1");  
    selector.onclick = partidaEmpezada;  
    selector = document.getElementById("botonColor2");  
    selector.onclick = partidaEmpezada;  
    celdas = document.getElementsByTagName("td"); //me faltaba esta linea  
    for (i=0;i<celdas.length;++i)  
    {  
        celdas[i].style.backgroundColor="white";  
        celdas[i].onclick=cambiaColor;  
    }  
    for (i=0;i<bgcCeldas.length;++i)  
    {  
        for (j=0;j<bgcCeldas[i].length;++j)  
        {  
            bgcCeldas[i][j]="white";  
        }  
    }  
    jugador = 1;  
    fichasJ1 = 0;  
    fichasJ2 = 0;  
    ganador = false;  
    document.getElementById("texto").innerHTML="Empieza el jugador 1";  
}  
function finalizarJuego()//funcion para desactivar las funciones del juego y activar las de eleccion de color para acabar la partida  
{  
    var selector;  
    var i;  
    var celdas;      
    selector = document.getElementById("contenedorTabla");  
    selector.onmouseover = mueveDiv;  
    selector = document.getElementById("botonColorAzar");  
    selector.onclick = colorAzar;  
    selector = document.getElementById("botonIntercambiarColores");  
    selector.onclick = intercambiarColores;  
    selector = document.getElementById("botonColor1");  
    selector.onclick = color1Jugador;  
    selector = document.getElementById("botonColor2");  
    selector.onclick = color2Jugador;  
    celdas = document.getElementsByTagName("td");  
    for (i=0;i<celdas.length;++i)  
    {  
        celdas[i].onclick="";  
    }  
}  
//------------------------------------------  
//---------------3 en raya------------------  
//------------------------------------------  
function cambiaColor()//funcion principal que cambia el color y la principal del juego que llama a diferente funciones para que todo funcione  
{  
    var color;  
    color = this.style.backgroundColor;  
    if (jugador==1 && fichasJ1==3)  
    {  
        if (color==color1)  
        {  
            this.style.backgroundColor = "white";  
            cambiaComprobador(this);  
            fichasJ1--  
        }  
    }  
    else if (jugador==2 && fichasJ2==3)  
    {  
        if (color==color2)  
        {  
            this.style.backgroundColor = "white";  
            cambiaComprobador(this);  
            fichasJ2--  
        }  
    }  
    else if (jugador==1 && color=="white")   
    {  
        this.style.backgroundColor=color1;  
        jugador=2;  
        fichasJ1++;  
        cambiaComprobador(this);  
        ganador = comprobarGanador(this);  
        contadorMensaje = 0;  
    }  
    else if (jugador==2 && color=="white")  
    {  
        this.style.backgroundColor=color2;  
        jugador=1;  
        fichasJ2++  
        cambiaComprobador(this);  
        ganador = comprobarGanador(this);  
        contadorMensaje = 0;  
    }  
    cambiaMensaje(this);  
}  
function cambiaComprobador(casilla)//funcion para cambiar la matriz creada para comprobar el 3 en raya  
{  
    var i;  
    var j;  
    var x;  
    x = 0;  
    for (i=0;i<bgcCeldas.length;++i)  
    {  
        for (j=0;j<bgcCeldas[i].length;++j)  
        {  
            if (casilla.id==idCeldas[x])  
            {  
                bgcCeldas[i][j] = casilla.style.backgroundColor;  
                return;  
            }  
            ++x  
        }  
    }  
}  
function comprobarGanador(casilla)//comprueba en la matriz todas las opciones posibles por si hubiese un ganador  
{  
    var color;  
    var i;  
    color = casilla.style.backgroundColor;  
    for (i=0;i<3;++i)  
    {  
        if (bgcCeldas[i][0]==color && bgcCeldas[i][1]==color && bgcCeldas[i][2]==color)  
        {  
            return true;  
        }  
        if (bgcCeldas[0][i]==color && bgcCeldas[1][i]==color && bgcCeldas[2][i]==color)  
        {  
            return true;  
        }  
    }  
    if (bgcCeldas[0][0]==color && bgcCeldas[1][1]==color && bgcCeldas[2][2]==color)  
    {  
        return true;  
    }  
    if (bgcCeldas[0][2]==color && bgcCeldas[1][1]==color && bgcCeldas[2][0]==color)  
    {  
        return true;  
    }  
}  
function cambiaMensaje(casilla)//escribe el mensaje para saver que a de hacer el jugador al que le toque  
{  
    var color;  
    color = casilla.style.backgroundColor;  
    if (ganador)  
    {  
        if (jugador!=1)  
        {  
            document.getElementById("texto").innerHTML = "Ha ganado el jugador 1";  
            finalizarJuego();  
        }  
        else  
        {  
            document.getElementById("texto").innerHTML = "Ha ganado el jugador 2";  
            finalizarJuego();  
        }  
    }  
    else if (jugador==1 && fichasJ1==3)  
    {  
        document.getElementById("texto").innerHTML = "Has de borrar una ficha de tu color, jugador 1";  
    }  
    else if (jugador==2 && fichasJ2==3)  
    {  
        document.getElementById("texto").innerHTML = "has de borrar una ficha de tu color, jugador 2";  
    }  
    else if (jugador==1)  
    {  
        if (contadorMensaje<1)  
        {  
            document.getElementById("texto").innerHTML = "le toca al jugador 1";  
            contadorMensaje++  
        }  
        else  
        {  
            document.getElementById("texto").innerHTML = "solo puedes poner ficha en una celda blanca";  
        }  
    }  
    else if (jugador==2)  
    {  
        if (contadorMensaje<1)  
        {  
            document.getElementById("texto").innerHTML = "le toca al jugador 2";  
            contadorMensaje++  
        }  
        else  
        {  
            document.getElementById("texto").innerHTML = "solo puedes poner ficha en una celda blanca";  
        }  
    }  
}

Sesión de preguntas y respuestas

Bienvenido

Aprender a programar es fácil

La Web con Visión Profesional

Aprende sobre Algoritmos

Condicionales y operadores en programación

Qué lenguaje de programación aprender primero

Material del curso / Archivos del curso

Introducción básica a HTML y Javascript para programar

Uso del sistema de vídeo y notas

Lenguajes y compiladores

HTML y Javascript

Variables y funciones

Piedra, papel y tijera con Javascript

Variables, Matrices y Objetos en Javascript

Escribir HTML desde JS (document.write)

Matrices

Juego campo minado

Objetos del navegador

Objetos en JS

Preguntas

Ciclos y Dibujos con Canvas

Ciclos

Dibujos con canvas

Dibujar con eventos

Preguntas y respuestas

Programando juegos con canvas

Tipos de imágenes

Insertar imágenes en canvas

Dibujo de múltiples imágenes en canvas

Dibujar al enemigo y controlar a Diana