JavaScript のゲームプログラミング入門
1. ブラウザゲームを作ってみよう
当講座はつぎのような人向けです。
- 未経験だけどプログラミングしてみたい
- 初心者だけどプログラミングできるようになりたい
- JavaScript を学習したい
- 無料で学習したい
- ゲームを作ってみたい
はっきり言って初心者向けの講座です。
説明は丁寧にするつもりです。
リファレンスとしては使いにくいと思います。
学習のコツ
分からないことがあれば、とりあえずネットで検索してみましょう。
「検索したってきっと分からないよ」
と思うかもしれません。
実際、しっかりと理解できないことも多いでしょう。
それでもいいんです。
検索を繰り返すうちに、情報の拾い方が上手になっていきますよ。
検索について注意があります。
かならず複数のページを開いて確認してください。
理由は、書いてあることが正しい情報とは限らないからです。
間違えて書かれたものもあれば、情報が古い場合もあります。
また、状況が違うことで求めるものが違うこともあります。
より正しい情報を得られるようになるには、なんども経験するしかないのです。
学習についての一番のコツは、
記憶することよりも作成手順や考え方に慣れることです。
命令やアルゴリズムを忘れたっていいんです。
そんなものは検索すれば分かりますから。
でも、どのように組み立てていくかをイメージできなければ、検索することもできず先に進めません。
それから時には、初めのページに戻って学習し直すのも効果的です。
あらためて読むことで気づくことも多いと思います。
学習に必要なもの
つぎのものが必要です。
- ブラウザ
- テキストエディタ
- CraftyJS
まず、ブラウザです。
オススメは Google Chrome(グーグル・クローム) です。
別のブラウザでも学習できると思います。
ただ、当講座では Chrome を使うため、説明と違う点が出てくるかもしれません。
違いをカバーする自信がなければ Chrome を使いましょう。
Chrome がパソコンに入っていなければ、インストールしてください。
やり方が分からないときはchrome インストールで検索しましょう。
つぎにテキストエディタです。
使いなれたものがあるなら、それでかまいません。
プログラムが書けて保存できればOKです。
テキストエディタを使ったことがなければ Brackets(ブラケッツ)をオススメします。
無料で使えて慣れてくると使いやすいです。
インストール方法は下のページを参照してください。
[ Brackets をインストールしよう(Windows) ]
[ Brackets をインストールしよう(Mac) ]
最後に CraftyJS です。
これから JavaScript(ジャバスクリプト) を使ってブラウザゲームを作っていきます。
その作業を簡単にするためゲームフレームワークを使います。
今回使うのは CraftyJS(クラフティジェイエス)です。
正式名称は Crafty なのですが、この単語でネット検索すると関係のない情報がヒットします。
そのため CraftyJS と覚えましょう。
CraftyJS をダウンロードしよう
下のサイトからファイルを1つダウンロードします。
[ CraftyJS 公式サイト ]
ページを開くと右側にダウンロードボタンがあります。
これをクリックします。
表示が切り替わります。
crafty-min.js
これをクリックしてダウンロードします。
ブラウザによってダウンロードの表現が違います。
Chrome であれば下図ようにページの左下に表示されます。
上矢印をクリックしてメニューを出し、Finderで表示(またはフォルダを開く)を選べばダウンロードしたファイルが見つかります。
ダウンロードしたファイルはそのまま使います。
拡張子を表示しよう
ファイルには拡張子があります。
そのファイルが何のためのものなのか、判断できるようについています。
写真や絵などの画像ファイルなら jpg や png、音楽ファイルなら mp3
テキストなら txt という感じです。
「あれ? そんなのあったかな」と思う人もいますよね。
基本的に拡張子は隠されています。(非表示になっています)
これからプログラミングをするのであれば、拡張子が見えないと不便です。
見えるように設定を変えましょう。
方法が分からないのであれば下のページを参照してください。
[ 拡張子を表示しよう(Windows) ]
[ 拡張子を表示しよう(Mac) ]
作業用のフォルダを作ろう
作業用のフォルダを作り、必要なファイルをまとめます。
作り方が分からないときにはフォルダ 作り方で検索しましょう。
フォルダの名前は何でもいいです。
私は game01 としました。
この中に先ほどダウンロードした crafty-min.js を入れます。
index.html はテキストエディタで新規作成します。
作り方が分からないときはエディタの使い方を検索しましょう。
エディタが brackets ならばbrackets 使い方という感じです。
ここで使い方をしっかり学習する必要はありません。
とりあえず使いそうな機能だけ覚えて、あとで少しずつ便利な使い方を覚えていけばいいのです。
index.html には下のコードをコピー&ペーストして保存します。
方法が分からなければテキスト コピーペーストで検索しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>はじめてのプログラミング</title>
<script src="crafty-min.js"></script>
<style type="text/css">
body{
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<div id="game"></div>
<script>
Crafty.init(500,400, document.getElementById('game'));
Crafty.background('#87ceeb');
Crafty.e('2D, Canvas, Color')
.attr({x:0, y:0, w:100, h:100}).color('#f00');
</script>
</body>
</html>
これは HTML5 というWebページを作るときの書き方です。
当講座では学習しないので、興味があるならhtml5 入門で検索してみましょう。
ページを表示してみよう
ブラウザで表示します。
index.html をダブルクリックしてください。
ブラウザにつぎのようなページが表示されたら成功です。
ページが開かないときは、index.html をアドレスバーの上のタブのないところにドラッグ&ドロップします。(Chrome の場合)
他のブラウザであれば、アドレスバーにドロップするだけで開くと思います。
もし、コピーしたコードがそのまま表示されたら、拡張子が .html になっているか確認しましょう。
ページは開いたけど何も表示されないなら、テキストエディタに戻って index.html のコードが正しくコピーされているか 、保存されているかを確認しましょう。
何かを変更したら、もう一度ドラッグ&ドロップします。
これで学習の準備ができました。
ワクワクしてきたところですが、今回はここまでにします。