【完全無料】プログラミング初心者でもできた！AIを活用してマリオ風ゲームを作る方法

2026年7月17日 16:59

こんにちは！今回は、ブラウザ上でサクサク動く「マリオ風」の横スクロールアクションゲームを、HTML5のCanvasを使って簡単に自作する方法をご紹介します。

「ゲーム開発なんて難しそう…」と思うかもしれませんが、実は今、完全無料のAIツールをうまく活用することで、コードの大部分を自動生成し、驚くほど短時間で形にできてしまうんです。

ぶっちゃけ、開発者として一番やっちゃいけないバグを出しました。

マリオ風の横スクロールアクションを作ったんです。
「よし、完成！」と思って自分でテストプレイしてたら、
右側にある階段の高さの計算をミスっていて。

ジャンプ力の限界が「120px」なのに、… pic.twitter.com/hr60SQzQ5r
— フルア＠AI×note副業 (@flugel_dx_ai) July 14, 2026

なぜ突然ゲームを作ろうと思ったのか？（私の体験談）

実は先日、コンテンツの幅を広げるために「ブラウザで遊べるちょっとしたゲームを作れないか？」と思い立ったのがきっかけでした。

イチからゲームエンジンを学ぶのは少しハードルが高かったので、身近なHTMLとJavaScript（Canvas）を選択。そして、コードのベース作成にはAIをフル活用しました。AIに「マリオのようなジャンプと重力がある2Dゲームのコードを書いて」と指示するだけで、ほんの数分で動く土台が完成したのには本当に驚きました。

オリジナルのキャラクターを動かす楽しさ 単なる四角いブロックが動くだけでは味気ないので、私はフリー素材やデフォルトのキャラクターの代わりに、お馴染みのAIマスコット「フルア」の画像を用意してコードに組み込んでみました。

自分が設定したキャラクターが、キーボードの操作に合わせて画面をぴょんぴょん飛び跳ねる姿を見ると、想像以上に愛着が湧いてモチベーションが上がります！

ショート動画との相性も抜群 さらに作ってみて気づいたのですが、こうしたオリジナルゲームのプレイ画面は、目を惹きやすいためバズを狙うショート動画の素材としても非常に優秀です。ゲームの面白さを伝える短い動画を作り、X（旧Twitter）などで広告収益を狙うためのフックとして活用するのも、非常に有効な戦略だと感じました。

下記のURLから遊べます👍

実際に作ってみよう！Canvasゲームの基本コード

それでは、実際に動く超シンプルなベースコードをご紹介します。以下のコードをコピーして、index.htmlという名前で保存し、ブラウザで開いてみてください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>マリオ風アクションゲーム</title>
    <style>
        body { text-align: center; margin-top: 50px; background-color: #f0f0f0; }
        canvas { background-color: #87CEEB; border: 2px solid #333; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
    </style>
</head>
<body>

<h2>スペースキーでジャンプ！</h2>
<canvas id="gameCanvas" width="800" height="400"></canvas>

<script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

    // キャラクター（プレイヤー）の設定
    let player = {
        x: 50,
        y: 300,
        width: 40,
        height: 40,
        color: "#ff5252",
        velocityY: 0,
        gravity: 0.8,
        jumpPower: -15,
        isGrounded: false
    };

    // 地面の設定
    const groundHeight = 50;

    // キー入力の監視
    document.addEventListener("keydown", function(event) {
        if (event.code === "Space" && player.isGrounded) {
            player.velocityY = player.jumpPower;
            player.isGrounded = false;
        }
    });

    // ゲームのメインループ
    function update() {
        // 重力の適用
        player.velocityY += player.gravity;
        player.y += player.velocityY;

        // 地面との当たり判定
        if (player.y + player.height >= canvas.height - groundHeight) {
            player.y = canvas.height - groundHeight - player.height;
            player.velocityY = 0;
            player.isGrounded = true;
        }

        // 画面のクリア
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 地面の描画
        ctx.fillStyle = "#8B4513";
        ctx.fillRect(0, canvas.height - groundHeight, canvas.width, groundHeight);
        ctx.fillStyle = "#228B22";
        ctx.fillRect(0, canvas.height - groundHeight, canvas.width, 10);

        // プレイヤーの描画（ここを画像に差し替えることも可能！）
        ctx.fillStyle = player.color;
        ctx.fillRect(player.x, player.y, player.width, player.height);

        // 次のフレームを要求
        requestAnimationFrame(update);
    }

    // ゲーム開始
    update();
</script>

</body>
</html>

コードの解説と改造のヒント

上記のコードは、「重力」と「ジャンプ」というアクションゲームの最も基本的な物理法則だけを実装しています。

ここからさらに発展させるためのヒントをいくつか紹介します。

キャラクターを画像に差し替える ctx.fillRectで四角を描画している部分を、drawImageメソッドに変更することで、先ほどの私の体験談のように、好きなキャラクター（自分のアイコンやマスコットなど）を動かすことができます。
障害物や敵を増やす 画面右側から迫ってくるブロック（障害物）の配列を作り、メインループの中で少しずつ左に移動させる処理を追記すれば、一気にゲーム性が増します。
AIに続きを書かせる 「このコードに、右から流れてくる障害物を避ける機能を追加して」とAIツールに投げるだけで、複雑な処理もあっという間に実装できます。

まとめ

HTML5のCanvasを使えば、特別なソフトをインストールしなくても、アイデア次第ですぐにブラウザゲームを作ることができます。さらにAIを活用すれば、プログラミングの壁は限りなく低くなります。

「自分だけのキャラクターを動かす」という体験は非常に楽しく、発信のコンテンツとしても強力な武器になります。休日のちょっとした時間を使って、ぜひあなただけのオリジナルゲーム作りに挑戦してみてください！

この記事が参考になったら、ぜひ「スキ」とフォローをお願いします！それでは、次回の記事でお会いしましょう。

▼「AIでゲームを作る」が気になった方には、こちらの記事もおすすめです

いいなと思ったら応援しよう！

記事が役に立ったら、応援していただけると励みになります。いただいたぶんは、次のツールやゲームづくりに使わせていただきます。