jsc_010

JavaScript のゲームプログラミング入門

1. ブラウザゲームを作ってみよう

 

当講座はつぎのような人向けです。

  • 未経験だけどプログラミングしてみたい
  • 初心者だけどプログラミングできるようになりたい
  • JavaScript を学習したい
  • 無料で学習したい
  • ゲームを作ってみたい

はっきり言って初心者向けの講座です。
説明は丁寧にするつもりです。
リファレンスとしては使いにくいと思います。

 

 

学習のコツ

分からないことがあれば、とりあえずネットで検索してみましょう。
「検索したってきっと分からないよ」
と思うかもしれません。

実際、しっかりと理解できないことも多いでしょう。
それでもいいんです。
検索を繰り返すうちに、情報の拾い方が上手になっていきますよ。

 

検索について注意があります。
かならず複数のページを開いて確認してください。
理由は、書いてあることが正しい情報とは限らないからです。

間違えて書かれたものもあれば、情報が古い場合もあります。
また、状況が違うことで求めるものが違うこともあります。
より正しい情報を得られるようになるには、なんども経験するしかないのです。

 

学習についての一番のコツは、
記憶することよりも作成手順や考え方に慣れることです

命令やアルゴリズムを忘れたっていいんです。
そんなものは検索すれば分かりますから。
でも、どのように組み立てていくかをイメージできなければ、検索することもできず先に進めません。

それから時には、初めのページに戻って学習し直すのも効果的です。
あらためて読むことで気づくことも多いと思います。

 

 

学習に必要なもの

つぎのものが必要です。

  • ブラウザ
  • テキストエディタ
  • CraftyJS

まず、ブラウザです。
オススメは Google Chrome(グーグル・クローム) です。
別のブラウザでも学習できると思います。

ただ、当講座では Chrome を使うため、説明と違う点が出てくるかもしれません。
違いをカバーする自信がなければ Chrome を使いましょう。

Chrome がパソコンに入っていなければ、インストールしてください。
やり方が分からないときはchrome インストールで検索しましょう。

 

つぎにテキストエディタです。
使いなれたものがあるなら、それでかまいません。
プログラムが書けて保存できればOKです。

テキストエディタを使ったことがなければ Brackets(ブラケッツ)をオススメします。
無料で使えて慣れてくると使いやすいです。
インストール方法は下のページを参照してください。

[ Brackets をインストールしよう(Windows) ]
[ Brackets をインストールしよう(Mac) ]

 

 

最後に CraftyJS です。
これから JavaScript(ジャバスクリプト) を使ってブラウザゲームを作っていきます。
その作業を簡単にするためゲームフレームワークを使います。

今回使うのは CraftyJS(クラフティジェイエス)です。
正式名称は Crafty なのですが、この単語でネット検索すると関係のない情報がヒットします。
そのため CraftyJS と覚えましょう。

 

 

CraftyJS をダウンロードしよう

下のサイトからファイルを1つダウンロードします。

[ CraftyJS 公式サイト ]

 

ページを開くと右側にダウンロードボタンがあります。
これをクリックします。

craftyjsのダウンロードをする

 

表示が切り替わります。

crafty-min.js

これをクリックしてダウンロードします。

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を開く

 

ページが開かないときは、index.html をアドレスバーの上のタブのないところにドラッグ&ドロップします。(Chrome の場合)

タブの辺りにファイルをドロップする

他のブラウザであれば、アドレスバーにドロップするだけで開くと思います。

 

もし、コピーしたコードがそのまま表示されたら、拡張子が .html になっているか確認しましょう。

ページは開いたけど何も表示されないなら、テキストエディタに戻って index.html のコードが正しくコピーされているか 、保存されているかを確認しましょう。

何かを変更したら、もう一度ドラッグ&ドロップします。

 

 

これで学習の準備ができました。
ワクワクしてきたところですが、今回はここまでにします。