Webブラウザで簡単ゲームを作ってみよう: 壁打ちテニス編 #1「事前準備と事前思考」

仕組み作りクリエーターの、ユゲタです。 もともと、中学生ぐらいの時に、ゲームが作りたくてプログラミングをやり始めたんですが、 ビジネスプログラムを覚えてから、最近では色々なプラットフォームを作る方がなんとなく好きになってしまいました。 でも、ゲームプログラミングには、インターフェースから、リアルタイム計算など、色々な重要なアルゴリズムや思考が詰まっているので、 小さなミニゲームを作っていくというのも、いい修行になるのではないかと思って、 新しいプログラム言語を学習するときには、そのプログラム言語でできる範囲のゲームを考えるというのも、 なかなかおもしろい作業だと感じ始めました。 これまで、色々とミニゲームを紹介してきたという事もありますが、改めて、プログラミング初心者の方が学習できそうな題材として、 基礎的なことも踏まえてゲーム作りを何回かに分けてレポートしてみたいと思います。

環境について

プログラミングをするというと、数ある様々なプログラミング言語のどれを選択するかという事で事前に決める必要がありますが、 プログラミング言語をきめるというよりも、どういういプラットフォームでそのプログラムを実行して、どのようにゲームを操作するかという事を重要視したほうがいいでしょう。 もちろん、任意のプログラミング言語を学習するために、ゲーム作りをしたいと考える場合は、それにあったプラットフォームを考えていく必要がありますが、 とにかく、プログラミングを学習したいという人には、迷わずJavascriptがオススメです。 そして、Javascriptが実行できる環境というのが、「インターネットブラウザ」であることは言うまでもありません。 Javascriptを選択すると、同時に、HTMLとCSSは、セットで扱うことになりますが、この三種の神器を覚えておくと、 お金を掛けずにゲームを作れてしまう上、ホームページで公開できてしまうというメリットもあります。 しかも、誰もがインターネットに繋がりさえすれば、そのゲームで遊ぶことができるという、良いことだらけです。 別に公開する気が無いという人でも、学習やりはじめたばかりで、言語に迷っている人であれば、オススメしたいと思います。

事前準備

必要な開発環境は、インターネットブラウザとテキストエディタだけです。 どちらも、種類はなんでもいいので、自分が普段使っているお好きなものを使うのがいいでしょう。 でも、インターネットブラウザは、デバッグコンソールが使えるものが、エラーなどを見つける時に便利なので、GoogleChromeを使ったほうがオススメですね。 ※でも、ほとんどのインターネットブラウザで、同じようなデバッグコンソールが搭載されているようです。 テキストエディタも、プログラミングに向いているエディタとしては、vscode辺りが無難だと思います。 機能など全くいらないという人であれば、メモ帳などでもいいと思いますが、文字コードの切り替えができるというのは、プログラムレベルが上ってきた時に必要になると思うので、少しだけ気にしたほうがいいと思いますよ。

どんなゲームを作るか思考

ゲームを作るといきがってみても、なかなかゲームの内容を素人が考えるのは難しいということに気がつくはずです。 そんな膨大なスケールのゲームを作ろうとせずに、初心者はシンプルなゲームを作るということを第一に目指したほうがいいでしょう。 そして、基本的なポイントを抑えていく内容を、何回も繰り返していく事で、プログラミングに重要なアルゴリズム脳が出来上がってきます。 そして、今回は「壁打ちテニス」という極めて初歩的なゲームを作ってみようと思うので、是非自分でも事前に作ってみて プログラミング構築体験してみてください。 この壁打ちテニスには、次のような要素が入っています。

・コリジョン判定（当たり判定） ・ボールの動き（方向計算） ・ユーザーコントロール（ラケット操作）

この処理の応用は、どのゲームでもほぼ扱う要素でもあるので、簡易なものでも作れるようになっていると、非常に勉強になるはずです。 簡単すぎて拍子抜けと思う人は、もう少しレベルの高い内容を独自で考えて先を進んでいってくださいませ。 次回は、この「壁打ちテニス」のゲーム仕様を考えてみたいと思います。