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>
[ <line x1="110" y1="20" x2="20" y2="110" class="delay"></line> ]
y[ <line x1="20" y1="20" x2="110" y2="110"></line> ]