【発展・希望者向け】座標の斜め移動を学ぶ

2026年3月10日

この記事は 授業の範囲外 です。興味のある人・余力のある人が読む発展用の内容です。無理に読む必要はありません。

1. 前提
2. 座標とは
3. 斜めに動かすには
4. 今日作るもの
5. ソリューションとプロジェクトを作る
6. フォームに配置するコントロール
7. Timer の設定
8. Form の Paint イベントを登録する
9. 完成コード
10. プログラムの流れ
11. 重要ポイント
12. 発展アイデア

前提

Timer の使い方が分かる
変数・クラスの基本が分かる
電話帳課題（List + クラス）を理解しているとスムーズです

座標とは

画面やゲームでは、位置を数値で表します。

x：横方向（左が 0、右へ行くほど大きい）
y：縦方向（上が 0、下へ行くほど大きい）

(0,0) ──────────── x 増える
  │
  │    ● (100, 50)
  │
  y
  増
  え
  る

斜めに動かすには

「斜め」は、横と縦を同時に変える ことで実現します。

右に動く → x を増やす
下に動く → y を増やす
斜め右下 → x も y も増やす

そのために speedX と speedY を使います。

1回の更新で：
  x += speedX
  y += speedY

例えば speedX = 3, speedY = 2 なら、毎回「右に3、下に2」動きます。これが斜め移動です。

今日作るもの

フォーム上を 四角形が斜めに動き、壁に当たると 跳ね返る プログラムです。

┌─────────────────┐
│                 │
│      ■          │  ← 斜めに動く
│                 │
│                 │  ← 壁に当たると跳ね返る
└─────────────────┘

ソリューションとプロジェクトを作る

Visual Studio で新しいプロジェクトを作ります。

テンプレート: Windows Forms アプリ (.NET Framework)
ソリューション名: CoordinateSample
プロジェクト名: DiagonalMove

作成すると Form1 が表示されます。

フォームに配置するコントロール

コントロール	名前
Timer	timer1

Timer だけ配置します。画面には表示されず、フォーム下のコンポーネントトレイに出ます。

Timer の設定

Interval = 30（約30ミリ秒ごとに更新 = 滑らかに動く）

Form の Paint イベントを登録する

フォームに図形を描くには Paint イベントを使います。

Form1 をクリックして選択
プロパティウィンドウの ⚡ 雷マーク（イベント） をクリック
Paint をダブルクリック

Form1_Paint が作成されます。ここに描画処理を書きます。

完成コード

using System;
using System.Drawing;
using System.Windows.Forms;

namespace DiagonalMove
{
    public partial class Form1 : Form
    {
        float x = 50;      // 四角形の位置
        float y = 50;
        float speedX = 3;  // 1回の更新で動く量（斜め右下）
        float speedY = 2;

        public Form1()
        {
            InitializeComponent();
            timer1.Start();
        }

        private void timer1_Tick(object sender, EventArgs e)
        {
            // 位置を更新（斜めに動く）
            x += speedX;
            y += speedY;

            // 右の壁に当たったら跳ね返る
            if (x + 30 > this.ClientSize.Width)
            {
                speedX = -Math.Abs(speedX);
            }
            // 左の壁
            if (x < 0)
            {
                speedX = Math.Abs(speedX);
            }
            // 下の壁
            if (y + 30 > this.ClientSize.Height)
            {
                speedY = -Math.Abs(speedY);
            }
            // 上の壁
            if (y < 0)
            {
                speedY = Math.Abs(speedY);
            }

            // 再描画を依頼
            this.Invalidate();
        }

        private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            g.FillRectangle(Brushes.Blue, x, y, 30, 30);
        }
    }
}

プログラムの流れ

タイマー開始
    ↓
30ミリ秒ごとに timer1_Tick が呼ばれる
    ↓
x += speedX, y += speedY（斜めに移動）
    ↓
壁に当たった？ → speedX または speedY を反転
    ↓
Invalidate() で再描画を依頼
    ↓
Form1_Paint が呼ばれる → 四角形を描く