Na tarde deste sábado (22), o Cruzeiro enfrenta o Red Bull Bragantino em um amistoso que servirá de preparação para o início do Brasileirão. O desafio é o último da Raposa antes do início da competição nacional que acontece no próximo dia 29.
A partida deste sábado, acontecerá às 18h30, no Estádio Nabi Abi Chedid, em Bragança Paulista. O confronto será transmitido na tv fechada pelo SporTV.
O técnico Leonardo Jardim comanda o Cruzeiro após um longo período de treinos. Depois de três partidas onde não havia tido tempo para implementar o seu estilo de jogo, o treinador português teve um grande tempo para preparar o time.
Para o jogo deste sábado, o técnico Leonardo Jardim não contará com Bolasie, que participou de parte do treino físico, mas ainda não tem condições de jogo. Além de Japa e Juan Dinenno que se recuperam de lesões. O zagueiro João Marcelo que foi submetido a um procedimento cirúrgico também não joga. Matheus Pereira também não viajou com o time, pois acompanhará o nascimento do seu filho.
No campo tático do Diário Celeste você pode brincar de técnico e montar a escalação ideal do Cruzeiro para todas as partidas do clube na temporada.
Monte a sua escalação ideal do Cruzeiro
/* Campo para Desktop */
#campo {
display: block;
position: relative;
width: 100%; /* Responsividade horizontal */
max-width: 1228px; /* Tamanho máximo */
height: auto; /* Altura ajustada automaticamente */
aspect-ratio: 1228 / 768; /* Mantém a proporção do campo */
overflow: auto; /* Barra de rolagem para não perder conteúdo */
background: url(‘https://www.diarioceleste.com.br/wp-content/uploads/2024/12/campo-tatico-monte-escalacao-cruzeiro.jpg’) no-repeat center center;
background-size: contain;
margin: auto; /* Centraliza o campo no container */
}
/* Campo para Mobile */
#campo-mobile {
display: none;
position: relative;
width: 100%;
max-width: 384px;
height: 614px;
margin: auto;
background: url(‘https://www.diarioceleste.com.br/wp-content/uploads/2024/12/campo-tatico-mobile-monte-escalacao-cruzeiro.jpg’) no-repeat center center;
background-size: cover;
}
/* Jogadores */
.jogador {
position: absolute;
width: 8.3%; /* Ajustado para caber melhor dentro do círculo */
height: 13%; /* Mantém proporção 1:1 */
background-color: rgba(0, 128, 255, 0.8);
background-size: contain; /* Garante que as imagens não sejam cortadas */
background-position: center; /* Centraliza as imagens */
background-repeat: no-repeat;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
user-select: none;
touch-action: none;
white-space: nowrap;
}
.jogador.select-active {
outline: 2px dashed rgba(255, 255, 255, 0.5); /* Destaca jogador selecionado */
}
.jogador select {
display: none;
}
/* Nome do jogador */
.nome-jogador {
font-size: 1.2vw; /* Reduzido e escalável */
color: white;
text-shadow: 1px 1px 0 blue, -1px -1px 0 blue, 1px -1px 0 blue, -1px 1px 0 blue;
position: absolute;
top: 105%; /* Posição ajustada logo abaixo do círculo */
left: 50%;
transform: translate(-50%, 0%);
white-space: nowrap;
text-align: center;
visibility: visible; /* Ocultar durante o arraste */
}
.nome-jogador.hidden {
visibility: hidden; /* Oculta o nome */
}
/* Botão “NOVO” */
#btn-novo {
position: absolute;
top: 1.3%; /* Proporcional ao campo desktop (10px/768px) */
left: 0.81%; /* Proporcional ao campo desktop (10px/1228px) */
padding: 10px;
background-color: #00BFFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
}
/* Estilos adaptativos */
@media (max-width: 768px) {
#campo {
display: none;
}
#campo-mobile {
display: block;
}
.jogador {
width: 50px;
height: 50px;
}
.nome-jogador {
font-size: 14px;
}
#btn-novo {
top: 10px;
left: 10px;
}
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
const commonJogadores = [
{‘value’: ‘Bruno Alves’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2025/02/bruno-alves-zagueiro-cruzeiro-escale.png’},
{‘value’: ‘Christian’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2000/12/christian-meia-do-cruzeiro.png’},
{‘value’: ‘Dudu’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2025/01/dudu-atacante-do-cruzeiro.png’},
{‘value’: ‘Eduardo’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2025/01/eduardo-meia-do-cruzeiro.png’},
{‘value’: ‘Fabrício Bruno’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2025/01/fabricio-bruno-zagueiro-do-cruzeiro.png’},
{‘value’: ‘Fagner’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2025/01/fagner-lateral-do-cruzeiro.png’},
{‘value’: ‘Gabigol’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1996/08/gabigol-atacante-do-cruzeiro-1.png’},
{‘value’: ‘Jonathan Jesus’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2024/09/Jonathan-Jesus.png.webp’},
{‘value’: ‘Kaiki’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2003/03/Kaiki-2.png.webp’},
{‘value’: ‘Kaique Kenji’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2006/01/kaique-kenji-2024.png’},
{‘value’: ‘Kaio Jorge’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2024/07/KaioJorge.png.webp’},
{‘value’: ‘Lautaro Díaz’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2024/07/Lautaro-Diaz.png.webp’},
{‘value’: ‘Lucas Romero’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1994/04/LUCAS_ROMERO_-_meio-campista_site.png.webp’},
{‘value’: ‘Lucas Silva’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1993/02/LucasSilva.png.webp’},
{‘value’: ‘Lucas Villalba’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1994/08/lucas-villalba-zagueiro-do-cruzeiro.png’},
{‘value’: ‘Marquinhos’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2025/01/marquinhos-atacante-do-cruzeiro.png’},
{‘value’: ‘Marlon’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1997/05/Marlon.png.webp’},
{‘value’: ‘Matheus Henrique’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2024/07/Matheus-Henrique.png.webp’},
{‘value’: ‘Mateo Gamarra’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2000/10/mateo-gamarra-zagueiro-do-cruzeiro.png’},
{‘value’: ‘Rodriguinho’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2003/06/rodriguinho-meia-do-cruzeiro.png’},
{‘value’: ‘Wanderson’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2025/02/wanderson-atacante-do-cruzeiro.png’},
{‘value’: ‘Walace’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/2024/07/Walace.png’},
{‘value’: ‘William’, ‘img’: ‘https://www.diarioceleste.com.br/wp-content/uploads/1995/04/William-1.png.webp’}
];
const jogadoresData = {
1: [
{ value: “Cássio”, img: “https://www.diarioceleste.com.br/wp-content/uploads/1987/06/cassio-goleiro-do-cruzeiro.png” },
{ value: “Léo Aragão”, img: “https://www.diarioceleste.com.br/wp-content/uploads/2002/04/LEO_ARAGAO_-_goleiro_site.png.webp” },
{ value: “Otávio”, img: “https://www.diarioceleste.com.br/wp-content/uploads/2005/12/otavio-goleiro-cruzeiro.png” }
],
2: commonJogadores,
3: commonJogadores,
4: commonJogadores,
5: commonJogadores,
6: commonJogadores,
7: commonJogadores,
8: commonJogadores,
9: commonJogadores,
10: commonJogadores,
11: commonJogadores
};
function updateAvailableOptions() {
const allSelects = document.querySelectorAll(‘select[data-jogador]’);
const selectedValues = new Set();
// Captura os valores já selecionados
allSelects.forEach(select => {
if (select.value) {
selectedValues.add(select.value);
}
});
// Atualiza as opções disponíveis em cada select
allSelects.forEach(select => {
Array.from(select.options).forEach(option => {
if (selectedValues.has(option.value) && option.value !== select.value) {
option.disabled = true; // Desabilita opções já selecionadas por outros
} else {
option.disabled = false; // Habilita opções não selecionadas
}
});
});
}
// Adiciona o evento de atualização às mudanças de seleção
document.querySelectorAll(‘select[data-jogador]’).forEach(select => {
select.addEventListener(‘change’, () => {
updateAvailableOptions();
});
});
// Chama a função inicial para atualizar as opções no início
updateAvailableOptions();
function setupJogadores(campoId) {
const campo = document.getElementById(campoId);
const jogadores = campo.querySelectorAll(‘.jogador’);
jogadores.forEach(jogador => {
const id = jogador.id.replace(/[^0-9]/g, ”); // Captura o ID do jogador
const select = jogador.querySelector(‘select’);
// Adicionar uma opção inicial
const defaultOption = document.createElement(‘option’);
defaultOption.value = “”; // Deixe o valor vazio para identificar
defaultOption.textContent = “Selecione um jogador”;
defaultOption.selected = true;
select.appendChild(defaultOption);
// Adicionar evento de mudança para ignorar a seleção da opção inicial
select.addEventListener(‘change’, () => {
if (select.value === “”) {
// Caso a opção inicial seja selecionada novamente, ignorar
return;
}
const selectedOption = select.options[select.selectedIndex];
const img = selectedOption.dataset.img;
const value = selectedOption.value;
jogador.style.background = `url(${img}) no-repeat center center`;
jogador.style.backgroundSize = ‘cover’;
select.style.display = ‘none’;
let nameTag = jogador.querySelector(‘.nome-jogador’);
if (!nameTag) {
nameTag = document.createElement(‘div’);
nameTag.className = ‘nome-jogador’;
jogador.appendChild(nameTag);
}
nameTag.textContent = value;
});
// Adiciona opções ao select
jogadoresData[id].forEach(data => {
const option = document.createElement(‘option’);
option.value = data.value;
option.textContent = data.value;
option.dataset.img = data.img;
select.appendChild(option);
});
// Configura posição inicial
jogador.style.top = jogador.dataset.initialTop;
jogador.style.left = jogador.dataset.initialLeft;
// Evento de clique para mostrar select
jogador.addEventListener(‘click’, () => {
const span = jogador.querySelector(‘span’);
span.style.display = ‘none’;
select.style.display = ‘block’;
select.focus();
});
// Seleção de jogador
select.addEventListener(‘change’, () => {
const selectedOption = select.options[select.selectedIndex];
const img = selectedOption.dataset.img;
const value = selectedOption.value;
jogador.style.background = `url(${img}) no-repeat center center`;
jogador.style.backgroundSize = ‘cover’;
select.style.display = ‘none’;
let nameTag = jogador.querySelector(‘.nome-jogador’);
if (!nameTag) {
nameTag = document.createElement(‘div’);
nameTag.className = ‘nome-jogador’;
jogador.appendChild(nameTag);
}
nameTag.textContent = value;
});
// Drag and drop para desktop
jogador.setAttribute(‘draggable’, true);
jogador.addEventListener(‘dragstart’, (e) => {
e.dataTransfer.setData(‘text/plain’, jogador.id);
});
// Touch move para mobile
jogador.addEventListener(‘touchstart’, (e) => {
const touch = e.touches[0];
jogador.dataset.offsetX = touch.clientX – jogador.offsetLeft;
jogador.dataset.offsetY = touch.clientY – jogador.offsetTop;
});
jogador.addEventListener(‘touchmove’, (e) => {
e.preventDefault();
const touch = e.touches[0];
const rect = campo.getBoundingClientRect();
const x = touch.clientX – rect.left – jogador.dataset.offsetX;
const y = touch.clientY – rect.top – jogador.dataset.offsetY;
jogador.style.left = `${Math.max(0, Math.min(campo.offsetWidth – jogador.offsetWidth, x))}px`;
jogador.style.top = `${Math.max(0, Math.min(campo.offsetHeight – jogador.offsetHeight, y))}px`;
});
});
campo.addEventListener(‘dragover’, (e) => e.preventDefault());
campo.addEventListener(‘drop’, (e) => {
e.preventDefault();
const id = e.dataTransfer.getData(‘text/plain’);
const jogador = document.getElementById(id);
const rect = campo.getBoundingClientRect();
const x = e.clientX – rect.left – jogador.offsetWidth / 2;
const y = e.clientY – rect.top – jogador.offsetHeight / 2;
jogador.style.left = `${Math.max(0, Math.min(campo.offsetWidth – jogador.offsetWidth, x))}px`;
jogador.style.top = `${Math.max(0, Math.min(campo.offsetHeight – jogador.offsetHeight, y))}px`;
});
}
// Configura jogadores para desktop e mobile
setupJogadores(‘campo’);
setupJogadores(‘campo-mobile’);
// Função para capturar e salvar o campo como imagem
document.getElementById(‘compartilhar’).addEventListener(‘click’, () => {
// Verifica qual campo está visível (desktop ou mobile)
const campoDesktop = document.getElementById(‘campo’);
const campoMobile = document.getElementById(‘campo-mobile’);
const campoVisivel = window.getComputedStyle(campoDesktop).display !== ‘none’ ? campoDesktop : campoMobile;
html2canvas(campoVisivel).then(canvas => {
const link = document.createElement(‘a’);
link.download = ‘campo-tatico.jpg’; // Nome do arquivo
link.href = canvas.toDataURL(‘image/jpeg’, 1.0); // Gera o link da imagem em JPG
link.click(); // Simula o clique para download
}).catch(err => {
console.error(“Erro ao gerar a imagem:”, err);
});
});
Seguir
Mim dá uma blusa do Cruzeiro por favor