<!doctype html>
<html lang="ca">
<head>
<meta charset="utf-8" />
<title>Joc: Personatge que es mou</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
:root{--bg:#1e1f26;--panel:#f4f4f4;--accent:#4caf50}
html,body{height:100%;margin:0;font-family:system-ui,Segoe UI,Arial;background:var(--bg);color:#fff;display:flex;align-items:center;justify-content:center}
.wrap{width:900px;max-width:96%;background:#111;border-radius:10px;padding:14px;box-shadow:0 8px 30px rgba(0,0,0,.6)}
canvas{display:block;background:#e9eef3;border-radius:6px;width:100%;height:auto}
.hud{display:flex;gap:12px;align-items:center;margin-top:10px;color:#ddd}
.hud button{background:var(--panel);color:#111;border:0;padding:8px 10px;border-radius:6px;cursor:pointer}
.info{font-size:14px}
.legend{font-size:13px;color:#bbb;margin-left:auto}
@media (max-width:520px){.hud{flex-direction:column;align-items:flex-start}}
</style>
</head>
<body>
<div class="wrap">
<h3 style="margin:0 0 8px 0;color:#fff">Joc: Mou el personatge</h3>
<canvas id="game" width="800" height="500"></canvas>
<div class="hud">
<div class="info"><strong>Posició</strong>: <span id="pos">0,0</span></div>
<div class="info"><strong>Vel</strong>: <span id="vel">0,0</span></div>
<button id="reset">Reinicia</button>
<div class="legend">Controls: WASD / fletxes; clic/toc per moure; Espai per saltar</div>
</div>
</div>
<script>
// Configuració
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
// Estat del jugador
const player = {
x: W/4,
y: H - 80,
w: 36,
h: 48,
vx: 0,
vy: 0,
speed: 0.35, // acceleració
maxSpeed: 4.5,
friction: 0.88,
gravity: 0.6,
onGround: false,
color: '#ffcc00'
};
// Obstacles simples
const obstacles = [
{x: 0, y: H-20, w: W, h: 20}, // terra
{x: 300, y: H-120, w: 160, h: 16}, // plataforma
{x: 540, y: H-220, w: 120, h: 16}, // plataforma
{x: 120, y: H-220, w: 100, h: 16} // plataforma
];
// Entrades
const keys = {left:false,right:false,up:false,down:false,space:false};
let pointerTarget = null;
// UI elements
const posEl = document.getElementById('pos');
const velEl = document.getElementById('vel');
document.getElementById('reset').addEventListener('click', resetGame);
// Controls teclat
window.addEventListener('keydown', e=>{
if(e.key === 'ArrowLeft' || e.key === 'a') keys.left = true;
if(e.key === 'ArrowRight' || e.key === 'd') keys.right = true;
if(e.key === 'ArrowUp' || e.key === 'w') keys.up = true;
if(e.key === 'ArrowDown' || e.key === 's') keys.down = true;
if(e.code === 'Space7 views