スライドショースライドショースライドショー

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

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

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

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

と思いますよね。

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

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

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

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

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

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

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

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

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年9月11日
LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

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

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