↑
↓
←
→
以下が実際のプログラムになります。
```html
<!DOCTYPE html>
<html>
<head>
<title>はげキャラの冒険</title>
<style type="text/css">
#field {
width: 400px;
height: 300px;
border: 1px solid #000;
position: relative;
margin: 0 auto;
margin-top: 50px;
background-image: url('plain.png');
background-repeat: repeat;
}
#hage {
position: absolute;
top: 135px;
left: 190px;
width: 20px;
height: 20px;
background-image: url('hage.png');
background-repeat: no-repeat;
}
#up, #down, #left, #right {
width: 50px;
height: 50px;
border-radius: 25px;
position: absolute;
background-color: #3399FF;
color: white;
font-size: 20px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
#up {
top: 20px;
left: 175px;
}
#down {
top: 230px;
left: 175px;
}
#left {
top: 125px;
left: 70px;
}
#right {
top: 125px;
left: 280px;
}
</style>
</head>
<body>
<div id="field">
<div id="hage"></div>
<div id="up">↑</div>
<div id="down">↓</div>
<div id="left">←</div>
<div id="right">→</div>
</div>
<script type="text/javascript">
let posX = 190;
let posY = 135;
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowUp" || event.key === "w") {
moveUp();
} else if (event.key === "ArrowDown" || event.key === "s") {
moveDown();
} else if (event.key === "ArrowLeft" || event.key === "a") {
moveLeft();
} else if (event.key === "ArrowRight" || event.key === "d") {
moveRight();
}
});
document.getElementById("up").addEventListener("click", () => {
moveUp();
});
document.getElementById("down").addEventListener("click", () => {
moveDown();
});
document.getElementById("left").addEventListener("click", () => {
moveLeft();
});
document.getElementById("right").addEventListener("click", () => {
moveRight();
});
function moveUp() {
if (posY > 20) {
posY -= 20;
document.getElementById("hage").style.top = posY + "px";
}
}
function moveDown() {
if (posY < 230) {
posY += 20;
document.getElementById("hage").style.top = posY + "px";
}
}
function moveLeft() {
if (posX > 70) {
posX -= 20;
document.getElementById("hage").style.left = posX + "px";
}
}
function moveRight() {
if (posX < 280) {
posX += 20;
document.getElementById("hage").style.left = posX + "px";
}
}
</script>
</body>
</html>
```
このプログラムでは、キーボードの矢印キーとWASDキー、またはボタンをクリックすることで、上下左右に移動することができます。また、移動の範囲はフィールド内に限定されています。
なお、ジョークとしては、キャラクターが「髪がなくなったら頭が真っ白になった」と言うセリフを入れてみました。