3

Hola tengo un problema en el archivo html, estoy tratando de adaptar un código que encontré en google de un juego, las tres en raya. El problema es que le cambie el tamaño original y a la hora de centrar las "X" no lo consigo por vueltas que le doy. Los ceros llegue a conseguirlo cambiando <circle cx="63" cy="63" r="40", pero como digo, en la "X" probé varias formas sin éxito. Se que debo cambiar el valor de x e y, pero no doy con la clave justa. Muestro el código .Gracias.

Aunque el problema esté en html muestro todo el código para que se vea el efecto, perdonen.

$(function () {
    // Moves to win
    var toWin = [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [1, 4, 7],
        [2, 5, 8],
        [3, 6, 9],
        [1, 5, 9],
        [3, 5, 7]
    ];

    function Player(name, mark) {
        this.name = name;
        this.mark = mark;
    }

    var computer = new Player('Player 2', 'x');
    var human = new Player('Player 1', 'o');
    var humanTurn = true;

    function getCurrentPlayer() {
        return humanTurn ? human : computer;
    }

    function hasMove(marks, move) {
        var resp;
        for (var i = 0; i < move.length; i++) {
            var value = move[i];
            if (marks.includes(value)) {
                resp = true;
            } else {
                return false;
            }
        }
        return resp;
    }

    function winSomebody() {
        var xMarks = $('.' + getCurrentPlayer().mark).map(
            function () {
                var value = parseInt($(this).attr('value'));
                return value;
            }).get();
        for (var i = 0; i < toWin.length; i++) {
            var move = toWin[i];
            if (hasMove(xMarks, move)) {
                return true;
            }
        }
        return false;
    }

    $('.col').click(function (event) {
        var currentPlayer = getCurrentPlayer();
        var target = $(event.currentTarget);
        target.addClass(currentPlayer.mark);
        target.find('.' + currentPlayer.mark).show();
        target.off('click');
        if (winSomebody()) {
            $('.player-' + currentPlayer.mark).css('background-color', '#53DD6C');
        } else {
            humanTurn = !humanTurn;
            currentPlayer = getCurrentPlayer();
            $('.player div').css('background-color', '#0A20D9');
            $('.player-' + currentPlayer.mark).css('background-color', '#3344D6');
        }
    });
});
body {
    background-color: #09B6ED;
    font-family: Roboto;
}

.container {
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

header {
    color: #fff;
}

.title {
    text-align: center;
}

.player {
    display: flex;
    background: #3344D6;
    width: 400px;
    margin: 20px auto;
}

.current {
    background-color: #0A20D9;
}

.player div {
    width: 50%;
    text-align: center;
    font-size: 100px;
}

.row {
    background-color: #3344D6;
    width: 100%;
    height: 33.33%;
    display: flex;
}

.col {
    border: 3px solid #0A20D9;
    width: 33.33%;
}

svg {
  max-width: 100%;
  max-height: 100%;
  
}

line {
    stroke: #fff;
    stroke-width: 12;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
    animation-name: draw;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.delay {
    animation-delay: 0.2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>las tres en raya</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
    <header>
        <div class="title">
            <h1>TRES EN RAYA</h1>
        </div>
        <div class="player">
            <div class="player-o current">
                o
            </div>
            <div class="player-x">
                x
            </div>
        </div>
    </header>
    <section>
        <div class="container">
            <div class="row">
                <div class="col" value="1">
                    <svg width="400" height="400" class="x" style="display: none">
                        <line x1="40" y1="40" x2="130" y2="130" />
                        <line x1="130" y1="40" x2="40" y2="130" class="delay" />
                    </svg>
                    <svg width="2000" height="2000" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
                <div class="col" value="2">
                    <svg width="400" height="400" class="x" style="display: none">
                        <line x1="40" y1="40" x2="130" y2="130" />
                        <line x1="130" y1="40" x2="40" y2="130" class="delay" />
                    </svg>
                    <svg width="2000" height="2000" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
                <div class="col" value="3">
                    <svg width="400" height="400" class="x" style="display: none">
                        <line x1="40" y1="40" x2="130" y2="130" />
                        <line x1="130" y1="40" x2="40" y2="130" class="delay" />
                    </svg>
                    <svg width="2000" height="2000" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
            </div>
            <div class="row">
                <div class="col" value="4">
                    <svg width="400" height="400" class="x" style="display: none">
                        <line x1="40" y1="40" x2="130" y2="130" />
                        <line x1="130" y1="40" x2="40" y2="130" class="delay" />
                    </svg>
                    <svg width="2000" height="2000" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
                <div class="col" value="5">
                    <svg width="400" height="400" class="x" style="display: none">
                        <line x1="40" y1="40" x2="130" y2="130" />
                        <line x1="130" y1="40" x2="40" y2="130" class="delay" />
                    </svg>
                    <svg width="2000" height="2000" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
                <div class="col" value="6">
                    <svg width="400" height="400" class="x" style="display: none">
                        <line x1="40" y1="40" x2="130" y2="130" />
                        <line x1="130" y1="40" x2="40" y2="130" class="delay" />
                    </svg>
                    <svg width="2000" height="2000" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
            </div>
            <div class="row">
                <div class="col" value="7">
                    <svg width="400" height="400" class="x" style="display: none">
                        <line x1="40" y1="40" x2="130" y2="130" />
                        <line x1="130" y1="40" x2="40" y2="130" class="delay" />
                    </svg>
                    <svg width="2000" height="2000" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
                <div class="col" value="8">
                    <svg width="400" height="400" class="x" style="display: none">
                        <line x1="40" y1="40" x2="130" y2="130" />
                        <line x1="130" y1="40" x2="40" y2="130" class="delay" />
                    </svg>
                    <svg width="2000" height="2000" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
                <div class="col" value="9">
                    <svg width="400" height="400" class="x" style="display: none">
                        <line x1="40" y1="40" x2="130" y2="130" />
                        <line x1="130" y1="40" x2="40" y2="130" class="delay" />
                    </svg>
                    <svg width="2000" height="2000" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
            </div>
        </div>
        <section>
</body>

</html>

6
  • 1
    Mira a ver si algo de esto te sirve: Centrar texto de un label HTML
    – lois6b
    Commented el 10 abr. 2018 a las 11:12
  • 1
    A mi me sirve con [ <line x1="110" y1="20" x2="20" y2="110" class="delay"></line> ] y [ <line x1="20" y1="20" x2="110" y2="110"></line> ] Commented el 10 abr. 2018 a las 11:19
  • Gracias por el aporte @lois6b , pero para usar esa teoria deberia de cambiar todo el codigo, cuando solo hay que cambiar los valores de "x " o de "y", o creo que los dos. El problema es que no se en que medida. Gracias. Commented el 10 abr. 2018 a las 11:21
  • Funciona @JaimitoPaco , ponlo como respuesta y la acepto para que pueda servir a otro. Gracias Commented el 10 abr. 2018 a las 11:33
  • 2
    Lo tenias ya todo hecho, solo te faltaba dar los valores correctos a los ejes de las lineas, no sería una respuesta como tal pero si quieres acepta la respuesta que existe mas abajo aunque sea de otro usuario y se da por respondida la pregunta, saludos y gracias por el reconocimiento. Commented el 10 abr. 2018 a las 11:42

1 respuesta 1

3

Veo 2 probelmas:

  1. El alto/ancho de los svg, lo he cambiado a valores de 100% para asegurar que ocupen el tama#o de los contenedores.

  2. El SVG de las X estan mal posicionados el origen y destino de las patas de la X. Estos valores, creo, se ven mejor.

<line x1="20" y1="20" x2="110" y2="110" />
<line x1="110" y1="20" x2="20" y2="110" class="delay" />

Solucion:

$(function () {
    // Moves to win
    var toWin = [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, 9],
        [1, 4, 7],
        [2, 5, 8],
        [3, 6, 9],
        [1, 5, 9],
        [3, 5, 7]
    ];

    function Player(name, mark) {
        this.name = name;
        this.mark = mark;
    }

    var computer = new Player('Player 2', 'x');
    var human = new Player('Player 1', 'o');
    var humanTurn = true;

    function getCurrentPlayer() {
        return humanTurn ? human : computer;
    }

    function hasMove(marks, move) {
        var resp;
        for (var i = 0; i < move.length; i++) {
            var value = move[i];
            if (marks.includes(value)) {
                resp = true;
            } else {
                return false;
            }
        }
        return resp;
    }

    function winSomebody() {
        var xMarks = $('.' + getCurrentPlayer().mark).map(
            function () {
                var value = parseInt($(this).attr('value'));
                return value;
            }).get();
        for (var i = 0; i < toWin.length; i++) {
            var move = toWin[i];
            if (hasMove(xMarks, move)) {
                return true;
            }
        }
        return false;
    }

    $('.col').click(function (event) {
        var currentPlayer = getCurrentPlayer();
        var target = $(event.currentTarget);
        target.addClass(currentPlayer.mark);
        target.find('.' + currentPlayer.mark).show();
        target.off('click');
        if (winSomebody()) {
            $('.player-' + currentPlayer.mark).css('background-color', '#53DD6C');
        } else {
            humanTurn = !humanTurn;
            currentPlayer = getCurrentPlayer();
            $('.player div').css('background-color', '#0A20D9');
            $('.player-' + currentPlayer.mark).css('background-color', '#3344D6');
        }
    });
});
body {
    background-color: #09B6ED;
    font-family: Roboto;
}

.container {
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

header {
    color: #fff;
}

.title {
    text-align: center;
}

.player {
    display: flex;
    background: #3344D6;
    width: 400px;
    margin: 20px auto;
}

.current {
    background-color: #0A20D9;
}

.player div {
    width: 50%;
    text-align: center;
    font-size: 100px;
}

.row {
    background-color: #3344D6;
    width: 100%;
    height: 33.33%;
    display: flex;
}

.col {
    border: 3px solid #0A20D9;
    width: 33.33%;
}

svg {
  max-width: 100%;
  max-height: 100%;  
}

line {
    stroke: #fff;
    stroke-width: 12;
    stroke-dasharray: 870;
    stroke-dashoffset: 870;
    animation-name: draw;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.delay {
    animation-delay: 0.2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>las tres en raya</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
    <header>
        <div class="title">
            <h1>TRES EN RAYA</h1>
        </div>
        <div class="player">
            <div class="player-o current">
                o
            </div>
            <div class="player-x">
                x
            </div>
        </div>
    </header>
    <section>
        <div class="container">
            <div class="row">
                <div class="col" value="1">
                    <svg width="100%" height="100%" class="x" style="display: none">
                        <line x1="20" y1="20" x2="110" y2="110" />
                        <line x1="110" y1="20" x2="20" y2="110" class="delay" />
                    </svg>
                    <svg width="100%" height="100%" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
                <div class="col" value="2">
                    <svg width="100%" height="100%" class="x" style="display: none">
                        <line x1="20" y1="20" x2="110" y2="110" />
                        <line x1="110" y1="20" x2="20" y2="110" class="delay" />
                    </svg>
                    <svg width="100%" height="100%" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
                <div class="col" value="3">
                    <svg width="100%" height="100%" class="x" style="display: none">
                        <line x1="20" y1="20" x2="110" y2="110" />
                        <line x1="110" y1="20" x2="20" y2="110" class="delay" />
                    </svg>
                    <svg width="100%" height="100%" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
            </div>
            <div class="row">
                <div class="col" value="4">
                    <svg width="100%" height="100%" class="x" style="display: none">
                        <line x1="20" y1="20" x2="110" y2="110" />
                        <line x1="110" y1="20" x2="20" y2="110" class="delay" />
                    </svg>
                    <svg width="100%" height="100%" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
                <div class="col" value="5">
                    <svg width="100%" height="100%" class="x" style="display: none">
                        <line x1="20" y1="20" x2="110" y2="110" />
                        <line x1="110" y1="20" x2="20" y2="110" class="delay" />
                    </svg>
                    <svg width="100%" height="100%" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
                <div class="col" value="6">
                    <svg width="100%" height="100%" class="x" style="display: none">
                        <line x1="20" y1="20" x2="110" y2="110" />
                        <line x1="110" y1="20" x2="20" y2="110" class="delay" />
                    </svg>
                    <svg width="100%" height="100%" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
            </div>
            <div class="row">
                <div class="col" value="7">
                    <svg width="100%" height="100%" class="x" style="display: none">
                        <line x1="20" y1="20" x2="110" y2="110" />
                        <line x1="110" y1="20" x2="20" y2="110" class="delay" />
                    </svg>
                    <svg width="100%" height="100%" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
                <div class="col" value="8">
                    <svg width="100%" height="100%" class="x" style="display: none">
                        <line x1="20" y1="20" x2="110" y2="110" />
                        <line x1="110" y1="20" x2="20" y2="110" class="delay" />
                    </svg>
                    <svg width="100%" height="100%" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
                <div class="col" value="9">
                    <svg width="100%" height="100%" class="x" style="display: none">
                        <line x1="20" y1="20" x2="110" y2="110" />
                        <line x1="110" y1="20" x2="20" y2="110" class="delay" />
                    </svg>
                    <svg width="100%" height="100%" class="o" style="display: none">
                        <circle cx="63" cy="63" r="40" fill="transparent" stroke-width="10" stroke="white" />
                    </svg>
                </div>
            </div>
        </div>
        <section>
</body>

</html>
Salu2..

3
  • Gracias @Emanuel Ve , efectivamente ese era el error. Lo que pasa es que me lo propuso Jaimito Paco en un comentario, y estaba esperando lo pusiera como respuesta. Me hace feo aceptar la tuya. Aunque se agradece el apoyo. Si no pusiera la respuesta, cojo la tuya.. Gracias. Commented el 10 abr. 2018 a las 11:39
  • @MiguelEspeso no hay problema! Gracias por el comentario! Commented el 10 abr. 2018 a las 11:44
  • Pongo tu respuesta, @EmanuelVe porque el compañero Jaimito Paco no la pone, y la tuya está igualmente bien. Gracias. Commented el 15 abr. 2018 a las 17:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.