キャラクターを動かしてみよう！

HTML

<!DOCTYPE html>
<html>
<head>
<title>画像移動</title>
<style>
  #myImage {
    position: absolute; /* 絶対配置にする */
    top: 50px;
    left: 50px;
  }
</style>
</head>
<body>

<img id="myImage" src="asd.jpg" alt="画像">

<script>
const image = document.getElementById('myImage');

document.addEventListener('keydown', (event) => {
  const key = event.key;
  const moveAmount = 10; // 移動量を調整

  // 現在の画像の位置を取得 (pxを除去して数値に変換)
  let currentTop = parseInt(image.style.top) || 0; // 初期値は0とする
  let currentLeft = parseInt(image.style.left) || 0;

  switch (key) {
    case 'ArrowUp':
      currentTop -= moveAmount;
      break;
    case 'ArrowDown':
      currentTop += moveAmount;
      break;
    case 'ArrowLeft':
      currentLeft -= moveAmount;
      break;
    case 'ArrowRight':
      currentLeft += moveAmount;
      break;
  }

  // 画像の位置を更新
  image.style.top = currentTop + 'px';
  image.style.left = currentLeft + 'px';
});
</script>

</body>
</html>

画像データとHTMLファイルです。うなじフォルダにダウンロードして、HTMLをクリックし、ブラウザを起動してください。ブラウザにフォーカスして、カーソルキーでキャラ移動します。パソコンで動作確認しました。おそらくスマホではキーボードをつなげても動作しないかもしれません。

asd ダウンロード

game ダウンロード

ブラウザゲーム制作

キャラクターを動かしてみよう！

HTML

コメント

コメントを残すコメントをキャンセル

ブラウザゲーム制作

キャラクターを動かしてみよう！

HTML

コメント

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル