Skip to content

Instantly share code, notes, and snippets.

@parzibyte

parzibyte/círculo.js Secret

Created Sep 29, 2020
Embed
What would you like to do?
const circuloFondo = d3.arc()
.innerRadius(0)
.outerRadius(radioCirculo)
.startAngle(0)
.endAngle(Math.PI * 2);
const circuloCentral = d3.arc()
.innerRadius(0)
.outerRadius(radioCirculoCentral)
.startAngle(0)
.endAngle(Math.PI * 2);
const $svg = d3.select("#contenedorJuego")
.append("svg")
.attr('width', 400)
.attr('height', 400);
$svg.append("g")
.attr("transform", `translate(${centroX},${centroY})`)
.append("path")
.attr("d", circuloFondo)
.attr("fill", negro);
const superiorIzquierda = $svg.append("g")
.attr("transform", `translate(${centroX - distancia},${centroY - distancia})`)
.attr("class", "boton")
.append("path")
.attr("d",
d3.arc()
.innerRadius(0)
.outerRadius(radioCuarto)
.startAngle(partidoEn16 * 12)
.endAngle(partidoEn16 * 16)
)
.attr("fill", verde);
const superiorDerecha = $svg.append("g")
.attr("transform", `translate(${centroX + distancia},${centroY - distancia})`)
.attr("class", "boton")
.append("path")
.attr("d",
d3.arc()
.innerRadius(0)
.outerRadius(radioCuarto)
.startAngle(0)
.endAngle(partidoEn16 * 4)
)
.attr("fill", rojo);
const inferiorIzquierda = $svg.append("g")
.attr("transform", `translate(${centroX - distancia},${centroY + distancia})`)
.attr("class", "boton")
.append("path")
.attr("d",
d3.arc()
.innerRadius(0)
.outerRadius(radioCuarto)
.startAngle(partidoEn16 * 8)
.endAngle(partidoEn16 * 12)
)
.attr("fill", amarillo);
const inferiorDerecha = $svg.append("g")
.attr("transform", `translate(${centroX + distancia},${centroY + distancia})`)
.attr("class", "boton")
.append("path")
.attr("d",
d3.arc()
.innerRadius(0)
.outerRadius(radioCuarto)
.startAngle(partidoEn16 * 4)
.endAngle(partidoEn16 * 8)
)
.attr("fill", azul);
// Encima de los otros círculos, el círculo central
$svg.append("g")
.attr("transform", `translate(${centroX},${centroY})`)
.append("path")
.attr("d", circuloCentral)
.attr("fill", negro);
const textoPuntaje = $svg.append("text")
.attr("transform", `translate(${centroX},${centroY})`)
.attr("fill", "#ffffff")
.attr("font-size", 30)
.attr("font-weight", "bold")
.attr("font-family", "Courier")
.style("text-anchor", "middle")
.style("dominant-baseline", "central")
.text("0")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment