How to center the crosses in the box?

Navigation
3

Hi, I have a problem in the html file, I'm trying to adapt a code that I found in Google of a game, all three in a row. The problem is that I change the original size and when it comes to centering the "X" I do not get it for laps I give it. The zeros get to get it changing <circle cx="63" cy="63" r="40" , but as I say, in the "X" I tried several ways without success. I know I have to change the value of x and y, but I do not give with the right key. I show the code. Thank you.

  

Even if the problem is in html I show all the code so that the effect is seen, sorry. 

$(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>
    
asked by Miguel Espeso 10.04.2018 в 13:09
source

1 answer

3

I see 2 problems:

  • The height / width of the svg, I have changed it to values of 100% to ensure that they occupy the size of the containers.

  • The SVG of the X are misplaced the origin and destination of the legs of the X. These values, I think, look better. 

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

    Solution: 

    $(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 ..     
    answered by 10.04.2018 / 13:35
    source
    Read / write char arrays in binary files Scroll from one div to another div in angular