Javascript(8)アニメーションを作ってみよう

カラフルなJavascriptの画像 javascript
2025.01.23

前回はjavascriptで使えるフレームワークについて紹介しました。

Javascript(7)フレームワークについて
今回は、Javascriptで使えるフレームワークについてを紹介します。少し難しい言葉もありますができるだけわかりやすく伝えます。
kamechannel.com
2025.01.23

今回はアニメーションの作り方について紹介していきます。

【もっと詳しく知りたい人は是非これを読んでください！！】

1冊ですべて身につくJavaScript入門講座 [ Mana ]

価格:2794円
(2025/1/12 23:09時点)
感想(2件)

Javascriptでアニメーションを作ってみよう！

「自分でゲームを作ってみたい！」と思ったことはありませんか？今回は、JavaScriptを使って2Dゲームを作る方法を一緒に見ていきましょう。「プログラミングって難しそう…」と感じるかもしれませんが、大丈夫！ここでは、シンプルな手順で基本的なゲームを作る方法を分かりやすく解説します。

まずは準備から

開発環境を整えよう！

まずはゲームを作るための環境を整えましょう。と言っても、特別なものは必要ありません。

  1. コードエディタ: 無料で使える「Visual Studio Code」がオススメ。
  2. ブラウザ: 普段使っているGoogle ChromeやFirefoxでOKです。

この2つさえあれば、もう準備完了です。驚くほど簡単ですよね！

HTMLファイルの作成

ゲーム画面の土台を作ろう

ゲームの基礎となるHTMLを作ります。以下のコードをコピーして、ファイル名をindex.htmlとして保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>簡単な2Dゲーム</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      background: #f0f0f0;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="400"></canvas>
  <script src="game.js"></script>
</body>
</html>

このコードはゲームの画面を表示する土台になります。ブラウザで開くと、グレーの背景を持つキャンバスが表示されるはずです。

JavaScriptで動きをつけよう！

プレイヤーを動かしてみる

次に、game.jsという新しいファイルを作成し、以下のコードを追加します。このコードで、キャンバス上に四角いプレイヤーを表示し、左右に動かすことができます。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// プレイヤーの設定
const player = {
  x: 50,
  y: 300,
  width: 50,
  height: 50,
  color: 'blue',
  speed: 5
};

// キー入力の追跡
let keys = {};

document.addEventListener('keydown', (event) => {
  keys[event.key] = true;
});
document.addEventListener('keyup', (event) => {
  keys[event.key] = false;
});

// ゲームループ
function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // プレイヤーの移動
  if (keys['ArrowRight']) player.x += player.speed;
  if (keys['ArrowLeft']) player.x -= player.speed;

  // プレイヤーの描画
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);

  requestAnimationFrame(gameLoop);
}

gameLoop();

ブラウザでindex.htmlを開いて、左右キーを押してみてください。青い四角が左右に動くのを確認できるはずです。これで、簡単な動きが実現できました！

障害物を追加してみよう！

ゲームをもっと面白くする

次のステップとして、障害物を追加してゲームらしさをアップさせましょう。

const obstacle = {
  x: 400,
  y: 300,
  width: 50,
  height: 50,
  color: 'red'
};

function checkCollision(player, obstacle) {
  return (
    player.x < obstacle.x + obstacle.width &&
    player.x + player.width > obstacle.x &&
    player.y < obstacle.y + obstacle.height &&
    player.y + player.height > obstacle.y
  );
}

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 障害物の描画
  ctx.fillStyle = obstacle.color;
  ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);

  // プレイヤーの移動
  if (keys['ArrowRight']) player.x += player.speed;
  if (keys['ArrowLeft']) player.x -= player.speed;

  // プレイヤーの描画
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);

  // 衝突判定
  if (checkCollision(player, obstacle)) {
    alert('ゲームオーバー！');
    player.x = 50; // リスタート位置
  }

  requestAnimationFrame(gameLoop);
}

gameLoop();

障害物を避けながら進むゲームの基礎が完成しました！

ゲームの進化案

さらに面白いゲームにするためのアイデアをいくつか紹介します：

  • スコア機能を追加して、プレイヤーの成果を記録。
  • 複数の障害物を出現させて難易度を調整。
  • タイマーを使って制限時間を設定。
  • スマホで遊べるようにタッチ操作を導入。

あなたのアイデア次第で、もっと楽しいゲームが作れますよ！

まとめと参考リンク

自分だけのゲームを作ろう！

今回の解説をもとに、簡単な2Dゲームを作る方法を学びました。最初はシンプルな内容でも、アイデアを追加することでどんどん面白く進化させられます。気軽にチャレンジしてみてください！

参考リンク

ぜひ、あなたのオリジナルゲームを作ってみましょう！

以上がアニメーションを作ってみようでした。
次回はAPIについて紹介したいと思います。

スポンサーリンク