プログラミングをゲーム感覚で学べる学習サイト7選【ゲーム作成したい方も】
皆さんの中には
プログラミングを学びゲームをつくってみたい
ゲームで楽しくプログラミングを学びたい
と、そんな風に思っている方もいるのではないでしょうか。
今回の「WEBCAMP NAVI」では、そんな人に向けて、「プログラミングでゲーム開発する方法」「おすすめのプログラミングゲーム」についてご紹介します。
プログラミング未経験の子供でも楽しく学習できるゲーム
とにかく一度簡単なプログラミングに触れてみたい、子供にやらせてみたいと思っている方は多いと思います。
いきなり難易度の高い教材や本などで学習を始めると、挫折してしまう可能性があります。
ですので、簡単で楽しみながらプログラミングを学習できるゲームを始めましょう。
自分の中でプログラミングに対する高いハードルを下げ、楽しく学習していきましょう。
アナ雪でプログラミング！
皆さんご存知のアナと雪の女王でプログラミングの学習ができます。
プログラミングゲームと言ってもかなり初心者向けのゲームで、直接プログラムを打ち込むことはありません。
アナとエルサを氷上で指示通りに動かすという単純なゲームなので、小学生は楽しんでゲームをプレイすることが出来るでしょう。
実際のプレイ画面を見てみましょう。
こちらはとにかくプログラミングの基礎から学んでみたいという方にオススメです。
| 言語 | Ruby（ビジュアルプログラミング） | ||
|---|---|---|---|
| 対象者 | プログラミング初心者 | ||
| 対象年齢 | 7~12 | ||
| 難易度 |
☆
|
||
それでは、実際のゲーム画面を見ていきましょう。
画像にあるブロックを組み合わせてキャラクターを移動させます。
このゲームで肝心なのは、正確なブロックを正確な順番で配置することです。
上記画像の指示通りキャラクターを動かすためには、どういう順番でどんなブロックを組み合わせればいいでしょうか。
実際に画像のようにブロックを配置し、実行を押してみると・・・
キャラクターが画像のように進んでくれています。
ここでの正解は、「前にうごく」「右にまがる」「前にうごく」です。
とても簡単だったのではないでしょうか。
このようにパズルのような感覚で、キャラクターを指示通りに動かせることはとても楽しく感じるはずです。
より難易度の高いプログラミングゲームをプレイして、プログラミングを更に学びたいと感じた人もいるのではないでしょうか？ 独学でプログラミングを学んでいくのは、難易度が高く挫折してしまう可能性が高いです…。
そこで受講生の97％が未経験者のプログラミングスクール【DMM WEBCAMP】では、プログラミングを最短３ヶ月で仕事ができるレベルにすることができます。 ゲームから興味を持ちプログラミングを仕事にしたいと感じた方は、ぜひ受講を検討してみてください！
✔プログラミングを仕事にするITエンジニアに興味があるなら【DMM WEBCAMP】
✔未経験向けのカリキュラムで徹底的に学習をサポート！
✔受講料最大56万円をキャッシュバック！
＼生活スタイルに合わせた3パターン／
受講内容はこちら！
まずは始めてみたい！と思う初心者向けのゲーム
＜内部画像①＞
とにかくプログラミングを学習してみたいと思っている初心者に向けたゲームを紹介します。
難しい本やサイトから学習を始めるより、まずは気楽にゲームを通じてプログラミング体験をしてみたい方におすすめのゲームです。
いきなり難しいものから始めると、挫折してしまうかもしれないので、そこまでプログラミングに対するモチベーションが高くない方は是非こちらのゲームを始めましょう。
問題を解くとアプリが完成できちゃうゲーム
下記の画像のようにプログラムに穴が空いており、穴を埋めていくだけでアプリやゲームを作る事ができます。
より初心者向けの穴埋め問題もあるので、初心者でも安心してプログラミングを学ぶ事ができます。
プログラミングを使って何か作りながら学習したいという方オススメです。
| 言語 | Ruby、PHP、HTML、CSS、JavaScript、jQuery、Canvas、Animate.css | ||
|---|---|---|---|
| 対象者 | プログラミング初心者〜中級者 | ||
| 対象年齢 | 11歳～ | ||
| 難易度 |
☆☆
|
||
それでは、実際のゲーム画面を見ていきましょう。
ステップごとに分かれており、ヒントも充実しているので途中で挫折してしまうことや、飽きてしまわないような仕組みになっているゲームです。
正解すれば、CLEARとなり自分が作ったプログラムの結果がわかりやすく表示されます。
達成感が得られるのでモチベーションを維持したままプログラミングを学習する事ができます。
動画で気軽に学べるサービス
動画を見るだけでプログラミンが学習できるサービスもあります。
動画はわかりやすい反面、自分でコードを打ち込まないため、実践的に学習できるとは言えません。
なので、プログラミングとはどんなもなのか見てみたいと思う初心者が、はじめに少し触れてみるという目的のもと利用してみても良いでしょう。
動画をみてプログラミングとはどんなものか知りたいという方にオススメです。
| 言語 | HTML、CSS、Ruby、JavaScript、Unity、PHP、Pytonなど | ||
|---|---|---|---|
| 対象者 | プログラミング初心者 | ||
| 対象年齢 | 10~ | ||
| 難易度 |
☆
|
||
「プログラミング」を学んでみたいけど、何から始めていいのかわからない…
と悩んでいる方に向けて！
【DMM WEBCAMP】では、ライフコーチが1人1人に合わせた効率的な学習をサポートします！
✔︎おうち時間でスキルアップ
✔︎独学で進めていくのが不安
✔︎確実にプログラミングスキルを身につけたい
といった方におすすめです！
プログラミングに慣れてきて次のステップに進みたい人向けゲーム
簡単なプログラミングのゲームに慣れてきて、もう少し難しい問題にチャレンジしたいなと思った方はこれから紹介するゲームにチャレンジしてみてください。
しっかりとコードを打ち込まなければいけないので、かなりの力がつきます。
プログラミングで彼女ができるゲーム！？
paizaオンラインハッカソン7 プログラミングで彼女をつくる
自分でプログラムを打ち込み、自分だけの彼女を作れるゲームです。
やればやるほどオリジナルの彼女が作れるので、どんどんハマっていきます。
楽しみながら自分の力を試してみたいという方にオススメです。
| 言語 | HTML、CSS、PHP、Android等 | ||
|---|---|---|---|
| 対象者 | プログラミング初心者〜中級者 | ||
| 対象年齢 | 15~ | ||
| 難易度 |
☆☆☆
|
||
それでは、実際のゲーム画面を見ていきましょう。
このように彼女のパーツを自分で選んで、自分好みの彼女を作成することが出来ます。
今回は彼女の「つり目」をゲットするために問題にチャレンジしてみます。
画像のように初心者には難易度の高い問題が出題され、自分でコードを打ち込み、正解ならパーツを獲得することができるゲームです
自分だけのロボットを作ってユーザー同士で対戦できるゲーム
このゲームでは、自分だけのロボットをプログラミングでカスタマイズし、他のユーザーと対戦させる事ができます。
自分のロボットを対戦させる事で、現在のプログラミングの実力を確かめる事ができます。
プログラミング中級者にはおすすめのゲームです。
他のプレイヤーと競い合って学習したい方にオススメのゲームです。
| 言語 | JavaScript | ||
|---|---|---|---|
| 対象者 | プログラミング中級者〜 | ||
| 対象年齢 | 小学校中学年～ | ||
| 難易度 |
☆☆☆
|
||
それでは、実際のゲーム画面を見ていきましょう。
RPGをプレイするだけで学習できるゲーム
コードを打ち込む事で、キャラクターがダンジョンを進んでいくゲームです。
ダンジョンをクリアするとキャラクターがどんどん強くなっていくので、やればやるだけキャラクターも自分もレベルアップします。
| 言語 | Python、JavaScript、CoffeeScript、Clojure、Lua、lo | ||
|---|---|---|---|
| 対象者 | プログラミング中級者〜 | ||
| 対象年齢 | 11歳～ | ||
| 難易度 |
☆☆
|
||
それでは、実際のゲーム画面を見ていきましょう。
より難易度の高いプログラミングゲームをプレイして、プログラミングを更に学びたいと感じた人もいるのではないでしょうか？ 独学でプログラミングを学んでいくのは、難易度が高く挫折してしまう可能性が高いです…。
そこで受講生の97％が未経験者のプログラミングスクール【DMM WEBCAMP】では、プログラミングを最短３ヶ月で仕事ができるレベルにすることができます。 ゲームから興味を持ちプログラミングを仕事にしたいと感じた方は、ぜひ受講を検討してみてください！
✔プログラミングを仕事にするITエンジニアに興味があるなら【DMM WEBCAMP】
✔未経験向けのカリキュラムで徹底的に学習をサポート！
✔受講料最大56万円をキャッシュバック！
＼生活スタイルに合わせた3パターン／
受講内容はこちら！
今のサイトでは物足りない！更に上達したい人向け
散々ゲームをプレイしてかなり力がつき、初心者向けのゲームではもう物足りない思っている方にはこれから紹介するゲームがおすすめです。
自分のオリジナルゲームを作って他のユーザーに遊んでもらうことができるサービス
キャラクターが自分の打ったコード通りに動いたり、ゲームを作って他のユーザーに遊んでもらう事ができるサービスです。
コードの解説をしてくれるので、初心者でも上級者でも楽しみながら学習が出来ます。
ゲームを作成したい方にオススメのサービスです。
| 言語 | JavaScript, HTML, CSS | ||
|---|---|---|---|
| 対象者 | プログラミング中級者〜 | ||
| 対象年齢 | 特になし | ||
| 難易度 |
☆☆☆☆
|
||
それでは、実際のゲーム画面を見ていきましょう。
最近話題のプログラミング、「今から学び始めるのは遅い…？」と思っている方に向けて！
今からでも全く遅くはありません！
国内最大級のプログラミングスクール【DMM WEBCAMP】で、はじめの一歩を踏み出してみませんか？
✔受講生の97%が未経験者！
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる！
✔未経験者のために開発された独自のカリキュラムを用意
プログラミングでゲームを作ろう！
ここまでは、プログラミングをゲームで学びたいと思う方に向けておすすめのゲームを紹介してきました。
一方で、プログラミングを使ってゲームを作りたい！という方もいらっしゃると思います。
そんな方に向けて、これからゲームエンジニア 、ゲームプログラマーになるための学習方法について解説していきます。
ゲームプログラミングとは何か？
実際にプログラミングでゲームを作る前に、「ゲームプログラミング」について少し理解していきましょう。
「ゲーム」「コンピュータ」というようなものには、動作を支持する「プログラム」が必要になります。
「プログラム」を作る作業が「プログラミング」です。
ゲームプログラミングとは、その名の通りゲームをプログラミングするというような事を指しています。
ゲームプログラミングはゲームだけではなく、ゲーム制作の補助ツールといったようなものまで扱います。
またゲームプログラミングをしている人の事を「ゲームプログラマー」とも呼びます。
ゲームプログラマ―をもっと詳しく知りたい方は下記の記事をご覧ください。
ゲームプログラミングに必要な4つの素質
ゲームプログラミングに必要な「素質」とは何だと思いますか？
ここでは、ゲームプログラミングに必要な素質について紹介していきます。
自分にこれらの素質があるのか確認しながら見てみてください。
ゲームプログラマーの実際の年収って気になりませんか？そんな方は下記のリンクをクリック。
ゲームプログラマーの年収は業界で変わる。実際の年収を紹介！
①ゲームが好きである！
ゲームプログラミングに必要なことは何といっても「ゲーム好き」ということです。
ゲーム好きということは優れたゲームユーザーということになるため、消費者、顧客の視点を製作をする上で取り入れることもできます。
ゲームが好きではないと、途中でプログラミングをする事が苦痛になる事があります。
また、楽な仕事ではないため「ゲームをするのが好き」ということや「何かものを作るのが好き」という人でなければ続かない可能性があります。
②「遊び心」がある！
実際にゲームをするのは購入して使う人です。
ゲーム購入者に楽しんでもらうのはもちろんです。
しかし、それ以上に大切なのは作っている自分自身も楽しいと思うことです。
自分が楽しめなければ、他の人を楽しませる事は出来ません。
そのためにはゲームの「遊び心」が必要となります。
この「遊び心」はゲームプログラミングにはかなり重要です。
③他人に合わせられる協調性がある！
ゲーム製作の過程にはたくさんの人が関わります。
例えば、下記などのさまざまな方が技術や力を合わせて進めます。
ゲームプロデューサー
ゲームクリエイター
ゲームデザイナー
サウンドクリエイター
ゲームプログラマー
ゲーム作成をする上で作成者側に最も求められるのが「協調性」です。
協調性が無ければ方向性が決まらず、好き勝手に作られてしまうため完成が出来ません。
協調性を持続させるためには日頃から他人とのコミュニケーションをし、お互いの考えを理解し合い、他人と向き合うことが重要になります。
④論理的に考えられる思考がある
プログラムというのは「数学」「物理」といった「理数的考え方」が求められます。
要は論理的に物事を考えられる思考を持っている必要があるということです。
またIT業界は新しい技術や情報が常に出てくる業界です。
そのため、日々更新される新しい知識を取り入れなければいけません。
ゲームプログラムに関わるために必要なこと
ゲームプログラムのスキルレベルを上げることによってより様々なゲームに関わる事が出来ます。
ゲームプログラムのスキルを上達させるポイントは「言語を学ぶ」「数をこなす」という事です。
段階別で紹介していきます。
初心者が家庭用ゲーム機に関わるためには?
家庭用ゲーム機のゲームプログラミングに関わりたい方は前提としてプログラミングスキルを持っている必要があります。
また、大手ゲーム会社が作っている家庭用ゲームに関わるためには、スキルを持つだけではなく、中小企業での実務経験が必要になるでしょう。
プログラミング 独学で学習したい方はこちら
初心者がスマホアプリに関わるためには?
初心者がスマホアプリなどのゲームプログラミングに関わるためにもプログラミングスキルが必要です。
またスマホアプリはバグが多くなるため、解決する時間がかかります。
ご存知の通り、コンピュータのプログラム学習は日々たくさんの新しい事が出てくるため一生終わる事がありません。
常に新しい情報をキャッチし、それをゲームに反映させていくことが必要です。
プログラミング 独学で学習したい方はこちら
プログラミングでゲームを作るためのおすすめ学習方法3選
＜内部画像⑥＞
ここまで、ゲームプログラムに関わるために必要なことを見てきました。
初心者の方がゲームプログラムに関わるためにまずはプログラミングスキルを身に付ける必要があります。
そこで、ここでは初心者におすすめの学習方法を見ていきましょう。
- 【初心者向け】Javaでゲームを作るための５つのステップ
- 【初心者向け】JavaScriptでゲームを作るための6つのステップ
- 【初心者向け】Unityで2Dゲームを作るための4つのステップ
- 【初心者向け】C#とUnityでゲームをつくるための3つのステップ
- Pythonでゲームを作る 開発方法や参考書、サンプルコードを紹介！
- 【初心者向け】C言語でゲームを作るための6つのステップ
①プログラミングの学習サイトで勉強する
最近ではプログラミングの学習サイトもかなり充実しており、独学でプログラミングが学べます。
多くのサイトが初心者向けに作られているためわかりやすくなっています。
さらに、環境設定を変えなくてもプログラミングがすぐにできてしまいます。
応用レベルをすべてを理解するのは難しいですが、楽しく基礎を学習するには良い方法のうちの一つです。
おすすめのプログラミング学習サイトを3つ紹介します。
1.ドットインストール
動画を見ながら楽しくプログラミング学習ができるサイトです。
扱っている言語の数、動画の数が圧倒的に多く、一番有名なプログラミング学習サイトです。
無料でも使えますが、プレミアムサービスを活用することで、より多くの動画を見ることができます。
2.paizaラーニング
paizaラーニングは、インターネット上のプログラミング入門学習コンテンツです。
プログラミング環境の構築が必要ないので始めやすく、動画レッスンを見ながら学習することができ、不明点はエンジニアに質問ができるので初心者におすすめです。
3.Code.org – フラッピーバード
http://studio.code.org/flappy/1
フラッピーバードというゲームに出てくる鳥をカスタマイズしてプログラミングの方法を学ぶことができます。
自分でコードを書くのではなく、指示が書かれたブロックを移動させて行くので初心者の方でも「機械に指示を出して動かす」という経験を積むことができます。
楽しいのでおすすめです！
下記の記事では【初心者入門】ゲーム感覚で遊びながらプログラミングを学習できるサイトをさらに詳しく説明しているので是非ご覧ください。
②プログラミングスクールに通って勉強する
2つ目の方法は「プログラミングスクールに通う」ことです。
プログラミングスクールは本や学習サイトで独学で学習する方法と比べると費用がかかります。
しかしながら、スクールには他にもプログラミングを学習している仲間がいるので、モチベーションを維持しやすいと言われています。
また、スクール側が学習のスケジュールを立ててくれるところも多く、自分に甘えることなく計画的に学習を進められます。
下記の記事ではそのほかのおすすめのプログラミングスクールについて詳しく紹介しているので是非ご覧ください！
【2022年】プログラミングスクールおすすめ9校を項目別に紹介
でもプログラミングスクールといっても種類が多く、「どのスクールを選べばいいのかわからない…」という人もいると思います。 時間とお金をかけて通うのであれば、確かなプログラミングのスキルを身に着けたいと考えますよね？
そこで受講生の97％が未経験者のプログラミングスクール【DMM WEBCAMP】では、最短3か月で仕事ができるレベルまでのプログラミングスキルを身に着けることができます！ プログラミングを使ったゲーム作りに興味が湧いたのであれば、ぜひプログラミングスクールという選択肢で学習してみてはいかがでしょうか？
✔プログラミングでゲームを作ることに興味があるなら【DMM WEBCAMP】
✔未経験向けのカリキュラムで徹底的に学習をサポート！
✔受講料最大56万円をキャッシュバック！
＼生活スタイルに合わせた3パターン／
受講内容はこちら！
③本で勉強をする!
初心者が独学で勉強する際におすすめの方法の一つは本で勉強することです。
しかしどの本を見ればいいのかわからない方もいらっしゃると思います。
そこで初心者にわかりやすい本についてまとめたので、みていきましょう。
アイディアを実現させる最高のツール プログラミングをはじめよう
プログラミングに全く触れたことのない人、難しそうだと苦手意識を持ってしまう人に向けて、何から始めたらいいのか、どんな心がまえで挑めばいいのかを説明した本です。
「難しそうだけど・・・なんとなく興味はある」という方へ、一歩踏み出すためのおすすめの一冊です。
[改訂新版] これからはじめるプログラミング基礎の基礎
著者：谷尻 かおり
ロングセラーの定番プログラミング入門書です。
基礎の基礎から説明しているので、土台作りに適しています。
スポーツでいうと筋肉トレ・基礎練習をする段階です。
おうちで学べるプログラミングのきほん
あなたは、「ハードウェアとプログラムの関係」「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ゲーム開発の基本と定番テクニックを学べる一冊です。
「スマートフォンゲームを作りたい」という初心者にぴったりの本です。
ここまで3つの学習方法を紹介してきましたが、初心者がゲームプログラミングをするにはまず最低限のプログラミングスキルを身に付ける必要があります。
覚悟を決めて、一歩踏み出してみましょう。
具体的なゲームのコード例
ここで、プログラミングでゲームを作るとはどういうことなのかイメージしやすいようにサンプルコードを紹介します。
これはブロック崩しゲームのサンプルコードです。
このようにコードを書いていくのがゲームプログラマ―の役割です。
是非参考にしてみてくださいね。
【ブロック崩しゲームのサンプルコード】
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 NAVI」では、ゲームプログラミングについて詳しく説明してきました。
また、初心者が独学でプログラミングを学習する方法をお伝えしました。
初心者が独学でゲームを作成することはかなり難しく、ほとんどの人が挫折し諦めてしまうと言われています。
しかし、ゲームを作成するためにプログラミングを学習したのに挫折してしまうことはとても勿体無いことです。
プログラミングスクールに通い、しっかりとプログラミングの基礎を学習してからゲームを制作するという方法を考えてみてはいかがでしょうか。
スクールであれば、最短で挫折することなくプ確実にログラミング学習ができるので、初心者にとってはゲーム作成の一番の近道になるかもしれません。
独学と比べると費用はかかりますが、人生は一度きりですので是非一度視野に入れてみてはいかがでしょうか。
非公開: サービス業界からエンジニアへの転職成功エピソード
