<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width">
<title>Mueve con Botones</title>
<style>
.sprite {
position: fixed;
font-size: 3rem;
}
</style>
</head>
<body>
<h1>Mueve con Botones</h1>
<p>
<button onclick="retrocede()">
◀
</button>
<button onclick="avanza()">
▶
</button>
</p>
<output id="carita"
class="sprite">
😄
</output>
<script>
let yBase
let xMenor
let xMayor
const VELOCIDAD = 30
actualiza()
let x = xMenor
dibuja()
function retrocede() {
actualiza()
if (x > xMenor) {
x -= VELOCIDAD
}
dibuja()
}
function avanza() {
actualiza()
if (x < xMayor) {
x += VELOCIDAD
}
dibuja()
}
function actualiza() {
yBase = innerHeight / 2
xMenor = innerWidth / 5
xMayor = 4 * innerWidth / 5
}
function dibuja() {
carita.style = `left: ${x}px;
bottom: ${yBase}px`
}
</script>
</body>
</html>