<!DOCTYPE html>
<html>
<head>
<title>キャラクター移動アプリ</title>
<style type="text/css">
#canvas {
border: 1px solid black;
width: 100px;
height: 100px;
}
#character {
position: absolute;
top: 45px;
left: 45px;
width: 10px;
height: 10px;
background-color: red;
}
</style>
</head>
<body>
<div id="canvas">
<div id="character"></div>
</div>
<br>
<button onclick="move('up')">Up</button>
<button onclick="move('down')">Down</button>
<button onclick="move('left')">Left</button>
<button onclick="move('right')">Right</button>
<script type="text/javascript">
function move(direction) {
let character = document.getElementById('character');
switch(direction) {
case 'up':
if (parseInt(character.style.top) > 0) {
character.style.top = parseInt(character.style.top) - 5 + 'px';
}
break;
case 'down':
if (parseInt(character.style.top) < 90) {
character.style.top = parseInt(character.style.top) + 5 + 'px';
}
break;
case 'left':
if (parseInt(character.style.left) > 0) {
character.style.left = parseInt(character.style.left) - 5 + 'px';
}
break;
case 'right':
if (parseInt(character.style.left) < 90) {
character.style.left = parseInt(character.style.left) + 5 + 'px';
}
break;
}
}
</script>
</body>
</html>
ジョーク：このキャラクターは、ビーバーのように何かをかじっているとより速く移動するかもしれません（笑）。
