|
|
|
|
|
<!DOCTYPE html> |
|
|
<html lang="ja"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>η»εεγγγ’γγͺ</title> |
|
|
<style> |
|
|
#movable-image { |
|
|
position: relative; |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<img id="movable-image" src="static/cat.png" alt="εγγη»ε"> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('keydown', (event) => { |
|
|
const image = document.getElementById('movable-image'); |
|
|
const keyName = event.key; |
|
|
|
|
|
switch (keyName) { |
|
|
case 'ArrowUp': |
|
|
image.style.top = (image.offsetTop - 10) + 'px'; |
|
|
break; |
|
|
case 'ArrowDown': |
|
|
image.style.top = (image.offsetTop + 10) + 'px'; |
|
|
break; |
|
|
case 'ArrowLeft': |
|
|
image.style.left = (image.offsetLeft - 10) + 'px'; |
|
|
break; |
|
|
case 'ArrowRight': |
|
|
image.style.left = (image.offsetLeft + 10) + 'px'; |
|
|
break; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
