JavaScriptで図形を動かす7つの方法

はじめに
●JavaScriptで図形を動かす基本
- ○図形の描画方法
●JavaScriptで図形を動かす7つの方法
●応用例とサンプルコード
- ○サンプルコード8：ゲームのキャラクターを動かす
- ○サンプルコード9：インタラクティブなグラフィックスを作成する
●注意点と対処法
- ○イベントリスナの解除
- ○座標変換の正確性
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptを使って図形を動かす方法がわかるようになります。

初心者でも理解しやすいように、基本的な図形の描画方法から始めて、図形を動かす7つの方法をサンプルコード付きで解説します。

また、応用例や注意点、カスタマイズ方法も紹介しているので、JavaScriptで図形を動かす力を身につけられます。

●JavaScriptで図形を動かす基本

まずは、JavaScriptで図形を描画する基本的な方法を学びましょう。

○図形の描画方法

HTMLのcanvas要素とJavaScriptを使って、図形を描画します。

canvas要素は、グラフィックスを描画するためのHTML要素です。

JavaScriptを使ってcanvas要素上に図形を描画することができます。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>図形の描画</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script src="draw.js"></script>
</body>
</html>

JavaScript(draw.js)

// canvas要素を取得
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 図形を描画
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

このコードでは、canvas要素を使って青い円を描画しています。

JavaScriptのdraw.jsファイルで、canvas要素を取得し、2D描画コンテキストを取得します。

次に、円を描画して塗りつぶしています。

●JavaScriptで図形を動かす7つの方法

次に、JavaScriptで図形を動かす7つの方法を解説します。

それぞれの方法に対応するサンプルコードも掲載しています。

○サンプルコード1：図形を移動させる

このコードでは、図形を移動させる方法を紹介しています。

この例では、円を横方向に動かしています。

// 初期位置
let x = 100;

function draw() {
  // 描画前に画面をクリア
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 図形を描画
  ctx.beginPath();
  ctx.arc(x, 100, 50, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();

  // 位置を更新
  x += 1;

  // 次の描画を予約
  requestAnimationFrame(draw);
}

// 描画開始
draw();

このコードは、描画関数drawを定義して、その中で図形の位置を更新しています。

図形の位置を更新することで、アニメーションのように図形を動かすことができます。

○サンプルコード2：図形を拡大・縮小する

このコードでは、図形を拡大・縮小する方法を紹介します。

この例では、青い円を徐々に拡大していきます。

// 初期半径
let radius = 10;

function draw() {
  // 描画前に画面をクリア
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 図形を描画
  ctx.beginPath();
  ctx.arc(100, 100, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();

  // 半径を更新
  radius += 1;

  // 次の描画を予約
  requestAnimationFrame(draw);
}

// 描画開始
draw();

このコードでは、描画関数draw内で円の半径を更新しています。

半径を更新することで、図形を拡大・縮小することができます。

○サンプルコード3：図形を回転させる

このコードでは、図形を回転させる方法を紹介します。

この例では、矩形を中心点を基準に回転させています。

// 初期角度
let angle = 0;

function draw() {
  // 描画前に画面をクリア
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 中心点を移動
  ctx.translate(100, 100);

  // 回転
  ctx.rotate(angle);

  // 図形を描画
  ctx.beginPath();
  ctx.rect(-50, -50, 100, 100);
  ctx.fillStyle = "blue";
  ctx.fill();

  // 座標系をリセット
  ctx.setTransform(1, 0, 0, 1, 0, 0);

  // 角度を更新
  angle += 0.01;

  // 次の描画を予約
  requestAnimationFrame(draw);
}

// 描画開始
draw();

このコードは、描画関数draw内で座標系を回転させています。

座標系を回転させることで、矩形を中心点を基準に回転させることができます。

○サンプルコード4：図形をアニメーションさせる

このコードでは、図形をアニメーションさせる方法を紹介しています。

この例では、青い円が画面内で跳ねるように動いています。

// 初期位置と速度
let x = 100;
let y = 100;
let dx = 2;
let dy = 2;
const radius = 50;

function draw() {
  // 描画前に画面をクリア
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 図形を描画
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();

  // 位置を更新
  x += dx;
  y += dy;

  // 壁との衝突判定
  if (x - radius < 0 || x + radius > canvas.width) {
    dx = -dx;
  }
  if (y - radius < 0 || y + radius > canvas.height) {
    dy = -dy;
  }

  // 次の描画を予約
  requestAnimationFrame(draw);
}

// 描画開始
draw();

このコードは、描画関数draw内で図形の位置を更新し、壁との衝突判定を行っています。

衝突判定により、図形が画面内で跳ねるようなアニメーションを実現しています。

○サンプルコード5：図形をマウス操作で動かす

このコードでは、マウスのドラッグ操作で図形を動かす方法を紹介しています。

この例では、青い矩形がマウスのドラッグに追従して動いています。

let isDragging = false;
let offsetX, offsetY;

canvas.addEventListener("mousedown", (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  if (x >= offsetX && x <= offsetX + 100 && y >= offsetY && y <= offsetY + 100) {
    isDragging = true;
  }
});

canvas.addEventListener("mousemove", (e) => {
  if (isDragging) {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    offsetX = x - 50;
    offsetY = y - 50;
    draw();
  }
});

canvas.addEventListener("mouseup", () => {
  isDragging = false;
});

offsetX = 100;
offsetY = 100;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.rect(offsetX, offsetY, 100, 100);
  ctx.fillStyle = "blue";
  ctx.fill();
}

draw();

このコードは、マウスのmousedown、mousemove、mouseupイベントを監視して、図形のドラッグ操作を実現しています。

図形の位置は、offsetXとoffsetYで管理されており、mousemoveイベントで更新されます。

○サンプルコード6：図形をキーボード操作で動かす

このコードでは、キーボードの矢印キーを使って図形を動かす方法を紹介しています。

この例では、緑色の円が矢印キーの操作に応じて動いています。

let posX = 100;
let posY = 100;

window.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "ArrowUp":
      posY -= 10;
      break;
    case "ArrowDown":
      posY += 10;
      break;
    case "ArrowLeft":
      posX -= 10;
      break;
    case "ArrowRight":
      posX += 10;
      break;
  }
  draw();
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(posX, posY, 50, 0, 2 * Math.PI);
  ctx.fillStyle = "green";
  ctx.fill();
}

draw();

このコードは、windowオブジェクトのkeydownイベントを監視し、矢印キーが押されたときに図形の位置を更新しています。

図形の位置は、posXとposYで管理されており、keydownイベントで更新されます。

○サンプルコード7：図形をタッチ操作で動かす

このコードでは、タッチ操作で図形を動かす方法を紹介しています。

この例では、赤い三角形がタッチ操作によって動いています。

let touchX = 100;
let touchY = 100;

canvas.addEventListener("touchstart", (e) => {
  e.preventDefault();
  const rect = canvas.getBoundingClientRect();
  touchX = e.touches[0].clientX - rect.left;
  touchY = e.touches[0].clientY - rect.top;
  draw();
});

canvas.addEventListener("touchmove", (e) => {
  e.preventDefault();
  const rect = canvas.getBoundingClientRect();
  touchX = e.touches[0].clientX - rect.left;
  touchY = e.touches[0].clientY - rect.top;
  draw();
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(touchX, touchY);
  ctx.lineTo(touchX + 50, touchY + 50);
  ctx.lineTo(touchX - 50, touchY + 50);
  ctx.closePath();
  ctx.fillStyle = "red";
  ctx.fill();
}

draw();

このコードは、canvasオブジェクトのtouchstartおよびtouchmoveイベントを監視し、タッチ操作によって図形の位置を更新しています。

図形の位置は、touchXとtouchYで管理されており、touchstartおよびtouchmoveイベントで更新されます。

●応用例とサンプルコード

○サンプルコード8：ゲームのキャラクターを動かす

このコードでは、ゲームのキャラクターを操作して動かす方法を紹介しています。

この例では、矢印キーでキャラクターが動いています。

let charX = 100;
let charY = 100;

window.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "ArrowUp":
      charY -= 10;
      break;
    case "ArrowDown":
      charY += 10;
      break;
    case "ArrowLeft":
      charX -= 10;
      break;
    case "ArrowRight":
      charX += 10;
      break;
  }
  drawCharacter();
});

function drawCharacter() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(charX, charY, 25, 0, 2 * Math.PI);
  ctx.fillStyle = "purple";
  ctx.fill();
}

drawCharacter();

このコードは、windowオブジェクトのkeydownイベントを監視し、矢印キーが押されたときにキャラクターの位置を更新しています。

キャラクターの位置は、charXとcharYで管理されており、keydownイベントで更新されます。

○サンプルコード9：インタラクティブなグラフィックスを作成する

このコードでは、マウス操作を使ってインタラクティブなグラフィックスを作成する方法を紹介しています。

この例では、マウスでクリックした場所に円が描かれ、ドラッグすることで円が連続して描かれます。

canvas.addEventListener("mousedown", (e) => {
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;
  drawCircle(mouseX, mouseY);
  canvas.addEventListener("mousemove", onMouseMove);
});

canvas.addEventListener("mouseup", (e) => {
  canvas.removeEventListener("mousemove", onMouseMove);
});

function onMouseMove(e) {
  const rect = canvas.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;
  drawCircle(mouseX, mouseY);
}

function drawCircle(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();
}

このコードは、canvasオブジェクトのmousedown、mousemove、およびmouseupイベントを監視して、マウス操作に応じてグラフィックスを描画しています。

mousedownイベントが発生すると、クリックした位置に円を描画し、mousemoveイベントを監視するようになります。

mousemoveイベントが発生すると、マウスが移動した位置に円を描画します。

最後に、mouseupイベントが発生すると、mousemoveイベントの監視を終了します。