<!doctype html>
<html lang="ca">
<head>
<meta charset="utf-8">
<title>Joc de Dards</title>
<style>
body { display:flex; flex-direction:column; align-items:center; font-family:Arial,Helvetica,sans-serif; background:#f4f4f4; margin:0; padding:20px; }
canvas { background:#fff; border:2px solid #333; }
#ui { margin-top:12px; }
button { padding:8px 12px; margin-left:8px; }
</style>
</head>
<body>
<h3>Joc de Dards</h3>
<canvas id="board" width="600" height="600"></canvas>
<div id="ui">
<strong>Puntuació total:</strong> <span id="total">0</span>
<strong style="margin-left:12px">Tirades restants:</strong> <span id="left">3</span>
<button id="reset">Reinicia ronda</button>
</div>
<script>
const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
const center = { x: W/2, y: H/2 };
const rings = [50, 100, 150, 200, 250]; // radi dels anells
let total = 0, throwsLeft = 3;
function drawTarget(){
ctx.clearRect(0,0,W,H);
const colors = ['#fff','#000','#ff0000','#000','#ff0000'];
for(let i=rings.length-1;i>=0;i--){
ctx.beginPath();
ctx.fillStyle = colors[i%colors.length];
ctx.arc(center.x, center.y, rings[i], 0, Math.PI*2);
ctx.fill();
}
// centre petit
ctx.beginPath();
ctx.fillStyle = '#ffd700';
ctx.arc(center.x, center.y, 20, 0, Math.PI*2);
ctx.fill();
}
function scoreForDistance(d){
// punts per anell: 50 al centre, 40,30,20,10, 0 fora
if(d <= 20) return 50;
if(d <= 50) return 40;
if(d <= 100) return 30;
if(d <= 150) return 20;
if(d <= 200) return 10;
return 0;
}
function drawDart(x,y){
ctx.beginPath();
ctx.fillStyle = '#222';
ctx.arc(x,y,6,0,Math.PI*2);
ctx.fill();
ctx.strokeStyle = '#fff';
ctx.stroke();
}
canvas.addEventListener('click', (e)=>{
if(throwsLeft <= 0) return;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const dx = x - center.x, dy = y - center.y;
const dist = Math.sqrt(dx*dx + dy*dy);
const pts = scoreForDistance(dist);
total += pts;
throwsLeft--;
drawDart(x,y);
updateUI();
if(throwsLeft === 0){
setTimeout(()=>{ alert('Ronda acabada. Punts obtinguts: ' + total); }, 100);
}
});
function updateUI(){
document.getElementById('total').textContent = total;
document.getElementById('left').textContent = throwsLeft;
}
document.getElementById('reset').addEventListener('click', ()=>{
total = 0; throwsLeft = 3; drawTarget(); updateUI();
});
drawTarget();
updateUI();
</script>
</body>
</html>10 views