【ゲームプログラミング教材】丸いフィールドを作る！三角関数を使って円周を回る

この教材の使い方

この教材は小学生〜高校生までのプログラミング初心者向けに作られた、ゲームプログラミング教材です。

この教材の特徴でもありますが、この教材にサンプルコードは登場しません。

Scratchのブロックで構成された設計（アルゴリズム）だけを提示します。

アルゴリズムをProcessing、p5.jsを用いて、読者の方に実装していただきます。

また、この記事だけでは何が何だかわからないと思います。

解説動画と一緒にご覧になることで理解が深まるはずです。

サンプルコードがない理由

この教材のコンセプトは、「自分で作った気になれる教材」です。

プログラミングを学ぶ難しさは設計（アルゴリズム）と文法を同時に学ばないといけないことにあると思っています。

プログラミングは文法から学ぶのが一般的だと思いますが、文法だけだととても退屈なものになりがちです。

かといって、サンプルゲームを作るチュートリアルになれば、サンプルコードを丸写しする作業となってしまいがちです。

文法の学習がメインでありながら、チュートリアル方式で、丸写しができないが設計通りプログラミングすれば完成します。

「自分だけで作れた！俺すごい！」と自信を持たせるというコンセプトの教材です。

また、作るものは、ゲームとして面白くなりそうなエッセンスだけを取り入れたものに限定しています。

要素だけなので、遊べるレベルまでのゲームを目指しません。

遊べるレベルまで完成させるのは、あとは皆さんに委ねるところです。

今回作るもの

丸いフィールドを作り、円周を動き回る演出です。

縦と横の移動に飽きてきたら、こういう動きも取り入れてみると次のゲーム制作のヒントになるかもしれません。

丸いフィールドを描く

直径200（=半径100）の円を描きます。

とりあえずフィールド中央にプレイヤーを置く

フィールドのスタート地点にプレイヤーを置く

「0 x 100」と意味深な設計がありますが、今は気にしないでください。

三角関数を使って45度進めてみる（ダメな例）

sinとcosを使って45度、円周を進めてみます。

先に言っておくとこれは正しく動作しません。

ラジアン値に変換する

私たちがよく使っている度数（degree）を、ラジアン値（radian）に変換してからsin、cosを使う必要があります。

自動的にぐるぐる回らせる

変数degreeを用意して、1ずつ増やし、角度を進めていきます。

課題1. マウスがクリックされたら逆回転させよう

変数を足しても良いです。

課題2. マウスがクリックされる度に速度をアップしよう

どんどん操作が難しくなるようにね。

課題3. 鬼ごっこを作ろう

敵を作って円周をぐるぐると鬼ごっこするようにしよう。

YouTubeチャンネルもよろしくね！

雑に運営中です！

この教材の解説もしています。