JavaScriptでゲームの簡単な作り方!初心者向けサンプル5選

こんにちは!侍エンジニア塾ブログ編集部の井上です。

ゲームを作りたい!と思っても、

「一体どこから手を付けたら良いのか分からない!」
「ゲーム開発には何が必要なの?」

と思いますよね。

ゲームプログラミング学習で重要なのは何と言っても「良質なサンプル」です!

コレさえあれば考え方はもちろん、どうやったらゲームになるのか一目瞭然だからです。

サンプルではJavaScriptのライブラリを使ったり、HTML/CSSとJavaScriptのみを使ったりと様々です。

そこで今回は、JavaScriptで簡単なゲームを作れる良質なサンプルをまとめてみました。

プログラミング環境の準備

もしまだJavaScriptのプログラミング自体を行う環境ができていない、またはどんな環境を使ったら良いのかわからないのであれば、次の記事も参考にしてみてください。

初心者でも最短3秒でできる!? JavaScriptの開発環境を構築しよう
更新日 : 2018年12月6日

それでは良質なサンプルを紹介していきます!

1.15分で簡単なアクションゲームを作る

スクリーンショット 2016-04-10 11.32.36
URL:http://dev.eyln.com/paction.html

概要

15分程度でゲームをどうやって作るのかを解説しています。

動画を真似をするだけでちょっとした本格的なアクションゲームができてしまいます!

Processing.jsの利用

デザイナーがプロジェクションマッピング等を作る時に使われることもある、画面に絵を描いたりする為の技術です。

https://processing.org/

またProcessing.jsというものがあり、JavaScriptでProcessingの描画をブラウザ上で行えるものです。

すごく簡単に描画処理を書いていくことが出来ます。

URL:http://processingjs.org/

2.JavaScriptでタイピングゲームを作ってみる

スクリーンショット 2016-04-10 12.33.15
URL:http://www.pori2.net/js/key/3.html

概要

JavaScriptの学習サイトで、JavaScriptの利用方法の演習としてタイピングゲームのサンプルを紹介しています。

JavaScriptの知識にまだ自信がないという方は、このサイトで勉強してついでに簡単なゲームも作れるようになってしまいましょう。

JavaScript + HTML + CSS

とてもシンプルなゲームですので、純粋なJavaScriptのみの使用で描画系の技術は使っていません。

純粋なJavaScriptの学習にも良いでしょう。

3.200行で作るテトリスのレシピ

スクリーンショット 2016-04-10 11.46.21
URL:http://coderecipe.jp/recipe/iHjJBJx9Si/

概要

HTML5/JavaScriptを用いてテトリスを作る方法を解説しています。

関数やJavaScriptの様々な機能を使うので、JavaScriptの構文等の学習はドットインストールなどで予め済ませてから挑戦してみましょう。

JavaScript + HTML + CSS

特別な技術を使用せず、WEBサイトを作るために標準的に使用するもので構成されています。

この作り方を理解できればかなり技術の応用範囲が広がるでしょう。

4.人は一日でゲーム制作ができるのか

スクリーンショット 2016-04-10 11.55.30
URL:http://kneesockscollector.blog.fc2.com/blog-entry-177.html

概要

徐々に大きくなる円をタッチして時間内にハイスコアを目指すゲームの作り方を解説しています。

簡単にJavaScriptを学習してからの方が良いレベルですが、ブログ記事を舐めるだけでミニゲームを作れてしまいます。

tmlib.jsを利用

ゲーム制作用のJavaScriptライブラリtmlib.jsを使用されています。

URL:http://phi-jp.github.io/tmlib.js/

簡単に使えるのでこちらも使ってみるのも良いでしょう。

なお、現在ではtmlib.jsの後継ライブラリのphina.jsも出ています。

次に紹介するのがそのphina.jsです。

5.phina.js公式サイト

スクリーンショット 2016-04-10 12.25.33
URL:http://phinajs.com/#examples

概要

公式サイトのサンプル集にブラウザ上で実行可能なサンプルがソースとともに9つ置いてあります。

これをコピペして改造していくだけでも色々なゲームを作成することが出来ます。

phina.jsを利用

phina.jsという比較的新しいオススメのゲームライブラリを使用しています。

本当に驚くくらい簡単にゲームを作成できるので是非遊んでみてください。

URL:http://phinajs.com/

まとめ

JavaScriptのサンプルゲームはいかがでしたでしょうか?

こうやってサンプルを元に考えればゲームも作れそうな気がしてきますよね。

是非この機会にゲーム作りにもチャレンジしてみてください!

また、ゲーム作りに使えるJavaScriptおすすめライブラリもまとめていますので、こちらも合わせてご覧ください。

JavaScriptでゲーム開発に必要な基礎とライブラリ活用術
更新日 : 2019年5月2日

JavaScriptカリキュラム無料公開中!


この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。

JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。

JavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】
更新日 : 2018年12月13日

JavaScriptを最短で習得したい方へ

弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

まで徹底したサポートを行っています。

まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta_js5

LINEで送る
Pocket

書いた人

井上 慎也

井上 慎也

侍エンジニア塾のインストラクター。フリーでWEB制作の受託や自身の事業の傍ら、侍ではWEBプログラミング方法の指導やプログラミング学習コミュニティの運用を行っている。
好きなショートカットキーは、command + w 。愛機はMac Book Pro。ブラウザのタブを大量に開きがち。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説