プログラミングをゲーム感覚で学べる学習サイト7選【ゲーム作成したい方も】 | WEBCAMP NAVI
【8月枠も残りわずか】転職保証コース

プログラミングをゲーム感覚で学べる学習サイト7選【ゲーム作成したい方も】

皆さんは

プログラミングを学びゲームをつくってみたい
ゲームで楽しくプログラミングを学びたい

と、そんな風に思っている方もいるのではないでしょうか。

今回はそんな人に向けて、「プログラミングでゲーム開発をするには」「オススメプログラミングゲーム」についてご紹介します。

プログラミング未経験の子供でも楽しく学習できるゲーム

とにかく一度簡単なプログラミングに触れてみたい、子供にやらせてみたいと思っている方は多いと思います。
いきなり難易度の高い教材や本などで学習を始めると、挫折してしまう可能性があるので、簡単で楽しみながらプログラミングを学習できるゲームを始めましょう。

自分の中でプログラミングは難しいという高いハードルを下げ、楽しく学習していきましょう。

DMM WEBCAMPは未経験でも最短3か月でプログラミングを習得することができます!

転職成功率98%
DMM WEBCAMPの詳細をみる
※最短1分で申し込み可能

アナ雪でプログラミング!

皆さんご存知のアナと雪の女王でプログラミングの学習ができます。
プログラミングゲームと言ってもかなり初心者向けのゲームで、直接プログラムを打ち込むことはありません。

アナとエルサを氷上で指示通りに動かすという単純なゲームなので、小学生には楽しんでゲームをプレイすることが出来るでしょう。
実際のプレイ画面を見てみましょう。

 こちらはとにかくプログラミングの基礎から学んでみたいという方にオススメです。 

 

     言語 Ruby(ビジュアルプログラミング)
対象者 プログラミング初心者
対象年齢 7~12
難易度

画像にあるブロックを組み合わせてキャラクターを移動させましょう。
このゲームで肝心なのは、正確なブロックを正確な順番で配置することです。

上記画像の指示通りキャラクターを動かすためには、どういう順番でどんなブロックを組み合わせればいいでしょうか。

実際に画像のようにブロックを配置し、実行を押してみると・・・
キャラクターが画像のように進んでくれています。

正解は、「前にうごく」「右にまがる」「前にうごく」です。
とても簡単だったのではないでしょうか。
このようにパズルのような感覚で、キャラクターを指示通りに動かせることはとても楽しく感じるはずです。

とにかく始めてみようと思っている初心者向けゲーム

とにかくプログラミングを学習してみたいなと思っている初心者に向けたゲームです。

難しい本やサイトから学習を始めるより、まず気楽にゲームを通じてプログラミング体験をしてみたい方にオススメのゲームです。

いきなり難しいものから始めると、挫折してしまうかもしれないので、そこまでプログラミングに対するモチベーションが高くない方は是非こちらのゲームを始めましょう。

問題を解くとアプリが完成できちゃうゲーム

CODEPREP

下記の画像のようにプログラムに穴が空いており、穴を埋めていくだけでアプリやゲームを作る事ができます。
より初心者向けの穴埋め問題もあるので、初心者でも安心してプログラミングを学ぶ事ができます。

 プログラミングを使って何か作りながら学習したいという方オススメです。 

 

言語 Ruby、PHP、HTML、CSS、JavaScript、jQuery、Canvas、Animate.css
対象者 プログラミング初心者〜中級者 
対象年齢 15~
難易度
☆☆

ステップごとに分かれており、ヒントも充実しているので途中で挫折してしまうことや、飽きてしまう事が少ないゲームになっています。

正解すれば、CLEARとなり自分が作ったプログラムの結果がわかりやすく表示されます。
達成感が得られるのでモチベーションを維持したままプログラミングを学習する事ができます。

動画で気軽に学べるサービス

ドットインストール

動画を見るだけでプログラミンが学習できるサービスもあります。
動画はわかりやすい反面、自分でコードを打ち込まないため、効率的に学習できるとは言えません。

なので、プログラミングってどんなものか見てみたいと思う初心者が、はじめに少し触れてみるという目的のもと利用してみても良いでしょう。

 動画をみてプログラミングとはどんなものか知りたいという方にオススメです。 

 

言語 HTML、CSS、Ruby、JavaScript、Unity、PHP、Pytonなど
対象者 プログラミング初心者
対象年齢 10~
難易度

プログラミングに慣れてきて次のステップに進みたい人向けゲーム

簡単なプログラミングのゲームに慣れてきて、もう少し難しい問題にチャレンジしたいなと思った方はこちらのゲームにチャレンジして下さい。
しっかりとコードを打ち込まなければいけないので、かなり力がつくと思います。

プログラミングで彼女ができるゲーム!?

paizaオンラインハッカソン7 プログラミングで彼女をつくる

自分でプログラムを打ち込み、自分だけの彼女を作る事ができるゲームです。
やればやるほどオリジナルの彼女が作れるので、どんどんハマっていきます。

 楽しみながら自分の力を試してみたいという方にオススメです。 

 

言語 HTML、CSS、PHP、Android等
対象者 プログラミング初心者〜中級者
対象年齢 15~
難易度
☆☆☆

このように彼女のパーツを自分で選んで、自分好みの彼女を作成することが出来ます。
今回は彼女の「つり目」をゲットするために問題にチャレンジしてみます。

画像のように初心者には難易度の高い問題が出題され、自分でコードを打ち込み正解ならパーツを獲得することができるゲームです

自分だけのロボットを作ってユーザー同士で対戦できるゲーム

fightcode

自分だけのロボットをプログラミングでカスタマイズし、他のユーザーと対戦させる事ができます。
自分のロボットを対戦させる事で、現在のプログラミングの実力を確かめる事ができるのでプログラミング中級者にはオススメのゲームです。

 他のプレイヤーと競い合って学習したい方にオススメのゲームです。 

 

言語 JavaScript
対象者 プログラミング中級者〜
対象年齢 15~
難易度
☆☆☆

RPGをプレイするだけで学習できるゲーム

 CODECOMBAT

対応言語:Python、JavaScript、CoffeeScript、Clojure、Lua、lo

コードを打ち込む事で、キャラクターがダンジョンを進んでいくゲームです。
ダンジョンをクリアするとキャラクターがどんどん強くなっていくので、やればやるだけキャラクターも自分もレベルアップするというゲームです。

今のサイトでは物足りない!更に上達したい人向け

散々ゲームをプレイしてかなり力がつき、初心者向けのゲームではもう物足りない思っている方にはこれから紹介するゲームがオススメです。

自分のオリジナルゲームを作って他のユーザーに遊んでもらうことができるサービス

キャラクターが自分の打ったコード通りに動いたり、ゲームを作って他のユーザーに遊んでもらう事ができるサービスです。
コードの解説をしてくれるので、初心者でも上級者でも楽しみながら学習が出来ます。

ゲームを作成したい方にオススメのサービスです。

プログラミングでゲームを作ろう!

プログラミングをゲームで学びたいと思う方に向けてオススメのゲームを紹介いたしました。
一方、プログラミングを使ってゲームを作りたい!という方もいらっしゃると思います。

そんなあなたにこれからゲームエンジニア 、ゲームプログラマーになるための学習方法について解説していきます。

ゲームプログラミングとは何か?

「ゲーム」「コンピュータ」というようなものにはプログラミングが必要になります。
また「プログラミング」という言葉は、動作を定める活動の事を指しています。

ゲームプログラミングは、その名の通りゲームをプログラミングするというような事を指しています。
ゲームプログラミングはゲームだけではなく、ゲーム制作の補助ツールといったようなものまで扱う事が多く「ゲームプログラミング」と連想されるのは目立つような事ばかりだと思いますが、実際は目立たない役割も多いです。

またゲームプログラミングをしている人の事を「ゲームプログラマー」とも呼びます。
もっと詳しく知りたい人は下記のリンクをクリック。

【徹底解説】ゲームプログラマーの仕事内容とは?

ゲームプログラミングに必要な「4つのスキル」

ゲームプログラミングに必要な「スキル」とは何だと思いますか?
ここでは、ゲームプログラミングに必要なスキルについて紹介をさせて頂きます。

ゲームプログラマーの実際の年収って気になりませんか?そんな方は下記のリンクをクリック。

ゲームプログラマーの年収は実際どのくらい?

ゲームが好きである!

ゲームプログラミング必要な事は何といっても「ゲーム好き」ということです。
ゲーム好きということは優れたゲームユーザーということになるため、消費者、顧客の視点を製作をする上で取り入れることもできます。そうでなければプログラミングをする事が苦痛になる事があります。

また楽な仕事ではないため「ゲームをするのが好き」ということや「何かものを作るのが好き」という人でなければ続かない可能があります。

「遊び心」がある!

ゲームをするのは購入して使う人のことです。
ゲーム購入者に楽しんでもらうのはもちろんおんことそれ以上に大切なのは作っている自分自身も楽しいと思うことです。

そうでなければ、他の人を楽しませる事は出来ません。
そのためには「遊び心」が必要となります。
この「遊び心」はゲームプログラミングにはかなり重要です。

他人に合わせられる協調性が必要!

ゲーム製作は

ゲームプロデューサー
ゲームクリエイター
ゲームデザイナー
サウンドクリエイター
ゲームプログラマー

などのさまざまな方が技術や力を合わせて進めます。
ゲーム作成をする上で作成者側に最も求められるのが「協調性」です。

協調性が無ければ方向性が決まらず、好き勝手に作られてしまうため完成が出来ません。
協調性を持続させるためには日頃から他人とのコミュニケーションをし、お互いの考えを理解し合い、他人と向き合うことが重要になります。

プログラムには論理的に考えられる思考を持つ必要がある!

プログラムというのは「数学」「物理」といった「理数的考え方」が求められます。
要は論理的に物事を考えられる思考を持っている必要があると言えます。

またIT業界は新しい技術や情報が常に出てくる業界です。
そのため、日々更新される新しい知識を取り入れなければいけません。

ゲームプログラムに関わるために必要なこと

ゲームプログラムのスキルレベルが上がることによってより様々なゲームに関わる事が出来ます。
ゲームプログラムのスキルを上達させるポイントは「言語を学ぶ」「数をこなす」という事です。

段階別で紹介していきます。

初心者が家庭用ゲーム機に関わるためには?

家庭用ゲーム機のゲームプログラミングに関わりたい方は上記で説明させて頂いたスキルをまず持つ必要があります。
またそれだけではなくプログラミングを学ぶためにはかなりの時間を要します。

大手ゲーム企業が作っているゲームなどに関わるためには、中小企業で更にスキルを磨く必要があります。
多くの時間が必要です。
また時間などは人それぞれですが、半年ほどはスキルを磨かなければいけません。

MEMO

プログラミング 独学で学習したい方はこちら

初心者がスマホアプリに関わるためには?

初心者がスマホアプリなどのゲームプログラミングに関わるためには、少なくとも1ヵ月以上は時間を要します。
自作のスマホアプリを作るにしてもかなりの能力が必要とされるためです。

またスマホアプリなどはバグなども多くなるため、そういった点でも時間がかかります。
逆に言えば1ヵ月ほどあればスマホアプリを開発することは可能となっています。

私が実際に要した時間ですが、プログラムといっても一つだけではなく幾つものプログラムがあります。
その中で1単元に早くて2時間程となります。

他に独学でやる際に必要とされる本などの内容であれば1ヵ月ほどで内容は覚えられます。
しかし、その中でゲームを作るとなると更に時間を要することになります。

上記で説明させて頂いたようにコンピュータのプログラムは新しい事が沢山出てくるため一生終わる事がありません。
常に新しい事を覚えながらやるためには更に時間が必要となりますので、そういった中でゲームを作るためにはかなりの根気が必要とされます。

MEMO

プログラミング 独学で学習したい方はこちら

オススメ学習方法2選

学習方法としては、プログラムに関係のある学校に通ったり独学で学習をしたりなど様々あります。
そういった人の中でも必ず使うのが「本」です。

ここでは学習方法としてゲーム感覚でプログラミングが学習できるサイトと本についてまとめました。

プログラミングに関係のあるゲームをする!

最近ではプログラミングの学習サイトもかなり充実しており、独学でプログラミングを学べます。
多くのサイトが初心者向けに作られているためわかりやすくなっています。

環境設定を変えなくてもプログラミングがすぐにできます。
応用などすべてを理解するのは難しいですが、楽しく基礎を学習するには良い方法のうちの一つです。

おすすめのサイトを3つ紹介します。

ドットインストール

ドットインストール

動画を見ながら楽しくプログラミング学習ができるサイトです。
扱っている言語の数、動画の数が圧倒的に多く、一番有名なプログラミング学習サイトです。

無料でも使えますが、プレミアムサービスを活用することで、より多くの動画を見ることができます。

paizaラーニング

paizaラーニング スクショ

https://paiza.jp/works

paizaラーニングは、インターネット上のプログラミング入門学習コンテンツです。
プログラミング環境の構築が必要ないので始めやすく、動画レッスンを見ながら学習することができ、不明点はエンジニアに質問ができるので初心者におすすめです。

Code.org – フラッピーバード

Code.org - フラッピーバード スクショ

http://studio.code.org/flappy/1

フラッピーバードというゲームに出てくる鳥をカスタマイズしてプログラミングの方法を学ぶことができます。
自分でコードを書くのではなく、指示が書かれたブロックを移動させて行くので初心者の方でも「機械に指示を出して動かす」という経験を積むことができます。

楽しいのでおすすめです!

【初心者入門】ゲーム感覚で遊びながらプログラミングを学習できるサイト をさらに詳しく紹介したサイトは下記のリンクです。

https://web-camp.io/magazine/archives/13457

本などで勉強をする!

初心者が学習をする際には本を探すことでしょう。
しかしどの本を見ればいいのかわからない方もいらっしゃると思います。
そこで初心者にわかりやすい本についてまとめました。

アイディアを実現させる最高のツール プログラミングをはじめよう

プログラミングに全く触れたことのない人、難しそうだと嫌煙しがちな人に向けて、何から始めたらいいのか、どんな心がまえで挑めばいいのかを説明した本です。

「難しそうだけど・・・なんとなく興味はある」という方へ、一歩踏み出すためのおすすめの一冊です。

[改訂新版] これからはじめるプログラミング基礎の基礎

プログラミングの基礎の基礎

著者:谷尻 かおり

ロングセラーの定番プログラミング入門書です。
基礎の基礎から説明しているので、土台作りに適しています。

スポーツでいうと筋肉トレ・基礎練習をするなら、この本がおすすめです。

おうちで学べるプログラミングのきほん

あなたは、「ハードウェアとプログラムの関係」「OSとプログラムの関係」「言語の違い」と聞いてピンときますか?
バグはなぜ発生するのか知っていますか?

どんな仕組みになっているのか俯瞰的に初心者でも理解できるように書かれた一冊。

Unity5の教科書 2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA)

「ゲームプログラミングをしたい!」という人にはこちらがおすすめです。

ゲームプログラミングをするのに欠かせないUnity。
初心者編から徐々にステップアップしていく構成です。
はじめてUnityを学ぼうとする人でも、つまづくことなく学べるように丁寧に書かれています。

ゲームの作り方 改訂版 Unityで覚える遊びのアルゴリズム

ゲーム開発者カンファレンス「CEDEC 2013」で著述賞を受賞した『ゲームの作り方』をUnity5対応し再編された本書。
ゲームに必要なアルゴリズムを解説しています。

Unityでゲームを作ろうと考えている人の入門書としておすすめです。

遊んで作るスマホゲームプログラミングfor Android (Game developer books)

「ゲームプログラミングを趣味として始めたい!」というあなたには、こちらの本はいかがでしょうか?
パソコンがあれば始められます。

また、Android版のゲームアプリはGooglePlayStoreから比較的簡単に配信できるので、「好きなものを作ってみんなに公開してみたい!」という人にもおすすめですよ。

[改訂版]Android Studioではじめる 簡単Androidアプリ開発

「趣味として」という人にはこちらもおすすめです。
新しいAndroidアプリケーション開発用ソフトウェア“Android Studio”を使った入門書です。

「Androidアプリとは?」「Androidアプリを配信するには?」から始まり、「天気予報」「シューティングゲーム」などの作成方法を解説しています。

SpriteKitではじめる2Dゲームプログラミング Swift対応 (Smart Game Developer)

SpriteKitは、「アニメーションや物理演算を比較的簡単に実現できるフレームワーク」と言われています。
本書は、SpriteKitとSwiftを駆使し、2Dゲーム開発の基本と定番テクニックを学べる一冊。

「スマートフォンゲームを作りたい」という初心者にぴったりです。

https://web-camp.io/magazine/archives/8535

初心者が目指すべき場所とは?

上記で説明させて頂いた事を実際にやるのは難しいと思います。
しかし時間をかけてしっかりと理解をすれば出来ない事はありません。

実際に私も最初は無知で独学で学びました。
またそこから今では応用が出来て様々な所で便利に利用させて頂いています。

そんな初心者の方が最初に目指すべき場所に関してですが、これはゲームプログラミングをしようとしているあなた自身がどのレベルまでやりたいのかによって変わってきます。
軽いプログラミングであれば数カ月で出来ますが、大手のゲームプログラミングであれば数年はかかると思います。

なので自分の目標地点を明確にして勉強をすることが大事です。

 具体的なゲームのコード例

ブロック崩しゲームのサンプルコード

Javascriptゲームサンプルコード

// ゲームシステム変数
var game = {
    ctx: null,
    time: 0,
    status: 'play',
    pos: {
        x: 0,
        y: 0
    },
    fps: 30,
    cvs: {
        width: 640,
        height: 480
    }, // キャンバス:サイズ
    paddle: {
        size: 50,
        color: '#00dd00'
    }, // パドル:サイズ, 色
    ball: {
        size: 5,
        speed: 5,
        x: 320,
        y: 240,
        color: '#dd0000'
    }, // ボール:サイズ, 速さ, 色
    block: {
        size: 5,
        speed: 5,
        x: 0,
        y: 0,
        row: 10,
        col: 14,
        color: '#00aa00',
        strokeColor: '#003300'
    }, // ブロック:サイズ, 速さ, 色(内部), 色(外枠)
    background: {
        color: '#001100'
    }, // 背景: 色
    score: {
        point: 0,
        color: '#00aa00'
    }
};

// パドル管理用のクラス
function Paddle() {
    this.initialize.apply(this, arguments);
}
Paddle.prototype = {
    size: 0,
    x: 0,
    y: 0,
    // コンストラクタ
    initialize: function (option) {
        this.size = option.size;
    },
    // 移動
    move: function (x, y) {
        this.x = x;
        this.y = y;
        if (this.x < 0) {
            this.x = 0;
        }
        if (this.x > game.cvs.width) {
            this.x = game.cvs.width;
        }
    },
    // 描画
    draw: function () {
        game.ctx.fillStyle = game.paddle.color;
        game.ctx.fillRect(this.x - (this.size / 2), this.y, this.size, 10);
    }
};

// ボール管理用のクラス
function Ball() {
    this.initialize.apply(this, arguments);
}
Ball.prototype = {
    size: 0,
    x: 0,
    y: 0,
    dx: 0,
    dy: 0,
    // コンストラクタ
    initialize: function (option) {
        this.size = option.size;
        this.x = option.x;
        this.y = option.y;
        this.dx = option.speed;
        this.dy = option.speed;
    },
    // 移動テスト
    moveTest: function () {
        return {
            x: this.x + this.dx,
            y: this.y + this.dy
        };
    },
    // 移動
    move: function () {
        var pos = this.moveTest();
        if (pos.x < this.size || pos.x > game.cvs.width - this.size) {
            this.dx *= -1;
        }
        if (pos.y < this.size || pos.y > game.cvs.height - this.size) {
            this.dy *= -1;
        }
        this.x += this.dx;
        this.y += this.dy;
    },
    // 描画
    draw: function () {
        game.ctx.fillStyle = game.ball.color;
        game.ctx.beginPath();
        game.ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, false);
        game.ctx.fill();
        game.ctx.closePath();
    }
};

// ブロック管理用のクラス
function Block() {
    this.initialize.apply(this, arguments);
}
Block.prototype = {
    x: 0,
    y: 0,
    w: 0,
    h: 0,
    flag: true,
    // コンストラクタ
    initialize: function (option) {
        this.x = option.x;
        this.y = option.y;
        this.w = option.w;
        this.h = option.h;
    },
    // 描画
    draw: function () {
        if (this.flag) {
            game.ctx.fillStyle = game.block.color;
            game.ctx.fillRect(this.x, this.y, this.w, this.h);
            game.ctx.strokeStyle = game.block.strokeColor;
            game.ctx.strokeRect(this.x, this.y, this.w, this.h);
        }
    }
};

// マウスイベント
window.addEventListener('mousedown', function (e) {}, false);
window.addEventListener('mousemove', function (e) {
    var rect = e.target.getBoundingClientRect();
    game.pos.x = e.clientX - rect.left;
    game.pos.y = e.clientY - rect.top;
}, false);

// ブロックの初期化
function initBlocks() {
    var blocks = [];
    var col = game.block.col;
    var row = game.block.row;
    for (var i = 0; i < row; i++) {
        for (var j = 0; j < col; j++) {
            blocks[i * col + j] = new Block({
                x: 40 + j * 40,
                y: 40 + i * 20,
                w: 40,
                h: 20
            });
        }
    }
    return blocks;
}


function main() {
    var cvs = document.getElementById('sample');
    game.ctx = cvs.getContext('2d');
    // ボール初期化
    var ball = new Ball({
        size: game.ball.size,
        x: 0,
        y: 0,
        speed: game.ball.speed
    });
    ball.x = game.ball.x;
    ball.y = game.ball.y;
    ball.dx = game.ball.speed;
    ball.dy = game.ball.speed * -1;
    // パドル初期化
    var paddle = new Paddle({
        size: game.paddle.size
    });
    // ブロック初期化
    blocks = initBlocks();
    // アニメーション
    setInterval(function () {
        var col = game.block.col; // ブロックの列数
        var row = game.block.row; // ブロックの行数
        if (game.status != 'play') {
            game.ctx.fillStyle = game.background.color;
            game.ctx.fillRect(0, 0, game.cvs.width, game.cvs.height);
            game.ctx.fillStyle = '#aa0000';
            game.ctx.font = '60px "Arial Black"';
            if (game.status == 'gameover') {
                game.ctx.fillText('Game Over', 160, 230);
                game.ctx.fillText('Score : ' + game.score.point, 160, 320);
            } else if (game.status == 'clear') {
                game.ctx.fillText('Game Clear', 160, 230);
                game.ctx.fillText('Score : ' + game.score.point, 160, 320);
            }
            return;
        }
        game.time++; // 時間加算
        game.ctx.clearRect(0, 0, game.cvs.width, game.cvs.height); // キャンバスクリア
        game.ctx.fillStyle = '#001100'; // キャンバスを塗りつぶす
        game.ctx.fillRect(0, 0, game.cvs.width, game.cvs.height);
        paddle.move(game.pos.x, game.cvs.height - 40); // パドル移動
        // パドル当たり判定
        if (ball.y >= paddle.y - ball.size && ball.y <= paddle.y + ball.size && ball.x >= paddle.x - (paddle.size / 2) && ball.x <= paddle.x + (paddle.size / 2)) {
            ball.dy *= -1;
        }
        // ボール移動テスト
        var pos = ball.moveTest();
        // ブロック当たり判定
        for (var i = 0; i < row; i++) {
            for (var j = 0; j < col; j++) {
                if (blocks[i * col + j].flag) {
                    // 左からヒット
                    if (ball.x <= blocks[i * col + j].x && blocks[i * col + j].x <= pos.x && pos.y >= blocks[i * col + j].y && pos.y <= blocks[i * col + j].y + blocks[i * col + j].h) {
                        ball.dx *= -1;
                        blocks[i * col + j].flag = false;
                        game.score.point += 5;
                    }
                    // 右からヒット
                    if (pos.x <= blocks[i * col + j].x + blocks[i * col + j].w && blocks[i * col + j].x + blocks[i * col + j].w <= ball.x && pos.y >= blocks[i * col + j].y && pos.y <= blocks[i * col + j].y + blocks[i * col + j].h) {
                        ball.dx *= -1;
                        blocks[i * col + j].flag = false;
                        game.score.point += 5;
                    }
                    // 上からヒット
                    if (ball.y <= blocks[i * col + j].y && blocks[i * col + j].y <= pos.y && pos.x >= blocks[i * col + j].x && pos.x <= blocks[i * col + j].x + blocks[i * col + j].w) {
                        ball.dy *= -1;
                        blocks[i * col + j].flag = false;
                        game.score.point += 10;
                    }
                    // 下からヒット
                    if (pos.y <= blocks[i * col + j].y + blocks[i * col + j].h && blocks[i * col + j].y + blocks[i * col + j].h <= ball.y && pos.x >= blocks[i * col + j].x && pos.x <= blocks[i * col + j].x + blocks[i * col + j].w) {
                        ball.dy *= -1;
                        blocks[i * col + j].flag = false;
                        game.score.point += 1;
                    }
                }
            }
        }
        ball.move(); // ボール移動
        // アウト判定
        if (ball.y >= game.cvs.height - ball.size) {
            game.status = 'gameover';
        }
        var flag = true; // クリア判定
        for (var i = 0; i < row; i++) {
            for (var j = 0; j < col; j++) {
                if (blocks[i * col + j].flag) {
                    flag = false;
                }
            }
        }
        if (flag) {
            game.status = 'clear';
        } // クリア状態に
        paddle.draw(); //バドル描画
        ball.draw(); //ボール描画
        // ブロック描画
        for (var i = 0; i < row; i++) {
            for (var j = 0; j < col; j++) {
                blocks[i * col + j].draw();
            }
        }
        // スコア描画
        game.ctx.fillStyle = game.score.color;
        game.ctx.font = '30px "Arial Black"';
        game.ctx.fillText('score : ' + game.score.point, 10, game.cvs.height - 10);
    }, parseInt(1000 / game.fps));
}

まとめ

今回はゲームプログラミングについてまとめさせていただきました。

この記事では初心者が独学で学習する方法をお伝えしましたが、初心者が独学でゲームを作成することはかなり難しいと言われています。
ほとんどの人が挫折し諦めてしまうと言われています。

しかし、それはかなり勿体無いことなので、プログラミングスクールに通いある程度プログラミングの基礎を学習してからゲームを制作するという方法も考えてみてはいかがでしょうか。

スクールであれば、最短で挫折することなくプログラミングが学習できるので、初心者にとってはゲーム作成の一番の近道になるかもしれません。

かなり高額ですが、人生は一度きりですので一度視野に入れてみては如何でしょうか。

コツコツ独学×スクールで実践。未経験からエンジニアに転職!【WebCamp卒業生インタビュー】の記事は下記のリンクをクリック。

https://web-camp.io/magazine/archives/12654

DMM WEBCAMPについて

DMM WEBCAMPは3ヶ月間で未経験から即戦力エンジニアを育成する転職保障付きのプログラミングスクールです。1ヶ月でプログラミング・Webデザインを学ぶ通い放題の「ビジネス教養コース」も展開しています。

DMM WEBCAMPを運営する株式会社インフラトップ では、「学びと仕事を通して人生を最高の物語にする」という理念で会社を経営しています。

キャリアアップを目指す方は、この機会に私達と一緒にプログラミングを学んでみませんか?

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率は98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点