マガジンのカバー画像

無料教材

55
運営しているクリエイター

#プログラミング初心者

平面なのに立体感!2.5Dアクションゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

平面なのに立体感!2.5Dアクションゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

- フィールドを広く使える今回作るのは、2.5Dのアクションゲームです。平面の2Dを基本としながら、影などの演出を加えて立体感を出します。
また、一般的なサイドビューのアクションゲームと違い、奥行きがある分フィールドを広く使えるのでゲーム性の幅が広がります。

デモアプリはこちらから。https://openprocessing.org/sketch/1437981
赤い線を飛び越えながらアイテム

もっとみる
今年の運勢を占う!おみくじルーレットゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

今年の運勢を占う!おみくじルーレットゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

- 納得感のあるおみくじ今回作るのは、おみくじゲームです。
クリックしたらランダムで運勢が表示される、のではなく、運勢を目押しで決めるルーレット形式です。
シンプルなおみくじではプレイヤーの介入する余地が少なく、ランダムな結果に納得できるものではありません。そこで、プレイヤーに目押しをさせることで納得感を生み出し、ゲーム性を持たせることができます。

もっとみる
正しいものだけを選び抜け!クイズゲームを作る!クミタテ式プログラミングドリル(JavaScript / p5js)

正しいものだけを選び抜け!クイズゲームを作る!クミタテ式プログラミングドリル(JavaScript / p5js)

- 簡単でも選択肢が無数にあると迷う今回作るのは、クイズゲームです。2択や4択ではなく、正しいものを選び抜く形式にしていきます。
クイズは簡単すぎてもつまらない、難しすぎてもつまらない、と扱いが難しいジャンルでもあります。そこで、正しいものを選び抜くと形式にすることで、1つ1つのクイズは簡単でも、疑心暗鬼になってやりごたえを作り出すことができます。

デモアプリはこちらから。https://ope

もっとみる
ぐるぐる回る的を射て!射的シューティングゲームを作る!クミタテ式プログラミングドリル(JavaScript / p5js)

ぐるぐる回る的を射て!射的シューティングゲームを作る!クミタテ式プログラミングドリル(JavaScript / p5js)

- 観覧車のような的を射抜く今回作るのは、射的ゲームです。観覧車のように、的がぐるぐる回るのが特徴です。
sinやcosといった三角関数と、for繰り返し処理との組み合わせで実現していきます。

デモアプリはこちらから。https://openprocessing.org/sketch/1395908
当てた的は次には当ててはいけない的とすることで、要素を増やさずに難易度を向上させる役割を持たせま

もっとみる
パズルを自動生成して、ステージ数無限のパズルゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

パズルを自動生成して、ステージ数無限のパズルゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

- ステージ数は無限!今回作るのは、ステージ制パズルゲームです。ステージは全て自動生成し、ステージ番号に応じて難易度を上げていきます。ステージ制にすることで、プレイヤーにやる気と目的意識、継続して遊んでもらいやすくなります。
また、今回の教材では、関数と呼ばれるオリジナル命令を多用します。関数や引数について理解できるようになりますので、プログラミングスキルの向上にもおすすめです。

デモアプリはこ

もっとみる
パズルの定番!数字を並び替えるナンバーパズルゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

パズルの定番!数字を並び替えるナンバーパズルゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

- 定番が持つわかりやすさ今回作るのは、ナンバーパズルゲームです。パズルの定番であり、わかりやすさとちょうどいい難易度、繰り返し遊べる感覚を味わってください。

デモアプリはこちらから。https://openprocessing.org/sketch/1375009

- クミタテ式プログラミングドリルとは?
クミタテ式は一言で言えば、Scratchの設計図を使ってProcessingフレームワ

もっとみる
シンプルでクセになる!一筆書きパズルゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

シンプルでクセになる!一筆書きパズルゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

- わかりやすさと気持ちのいい操作性
今回作るのは、一筆書きパズルゲームです。一筆書きパズルは、誰でもルールがわかりやすく、適度な難易度があり、マスを埋めていく気持ちよさがある優れたパズルゲームです。

デモアプリはこちらから。https://openprocessing.org/sketch/1365056

- クミタテ式プログラミングドリルと

もっとみる
ひっぱって離す気持ちよさ!ゴムをひっぱるアクションゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

ひっぱって離す気持ちよさ!ゴムをひっぱるアクションゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

- ゴムの動きを再現
今回作るのは、ゴムの物理挙動を使ったアクションゲームです。引っ張って離すゴムの気持ちいい動きを再現しよう。この教材でアニメーション移動(ツイーン)の方法も学ぶことができるのでぜひチャレンジしよう。

でもアプリはこちらから。ゴムの動力を使ってボールを弾くストラックアウトゲームにしてみました。https://openproces

もっとみる
ターゲットへ放て!弓矢シューティングゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

ターゲットへ放て!弓矢シューティングゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

- 矢の動きを再現今回作るのは、弓矢の物理挙動を使ったシューティングゲームです。マウスで方向を定めて弓を放ちます。角度から座標を算出する三角関数とは違い、座標から角度を算出する逆三角関数(アークタンジェント)が学べます。

デモアプリはこちらから。https://openprocessing.org/sketch/1343834

- クミタテ式

もっとみる
画像を分割して入れ替え!オリジナルのジグソーパズルを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

画像を分割して入れ替え!オリジナルのジグソーパズルを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

- オリジナルパズルを作ろう
今回作るのは、お気に入りの画像を使ったジグソーパズルです。1枚の画像を複数枚にカットしてバラバラにします。画像処理の応用が学べる教材です。

デモアプリはこちらから。https://openprocessing.org/sketch/1334633

- クミタテ式プログラミングドリルとは?
クミタテ式は一言で言えば、

もっとみる
バネで飛び跳ねろ!ホッピングアクションゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

バネで飛び跳ねろ!ホッピングアクションゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

- バネを使って障害物を乗り越えよう
今回作るのは、誰もが遊んだことがあるおもちゃ、ホッピングを使ったアクションゲームです。三角関数による回転、物理挙動が学べる教材になっています。

デモアプリはこちらから。https://openprocessing.org/sketch/1326311

- クミタテ式プログラミングドリルとは?
クミタテ式は一

もっとみる
全てのスイッチをオン!ON/OFFスイッチパズルゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

全てのスイッチをオン!ON/OFFスイッチパズルゲームを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

- こっちをつけたらあっちが消える
今回作るのはスイッチを押して全てのマスをONにして光らせるスイッチパズルゲームです。配列や関数といった、初中級のプログラミングスキルが身に付く教材になっています。

デモアプリはこちから遊べます。https://openprocessing.org/sketch/1312859

- クミタテ式プログラミングドリ

もっとみる
暗闇を照らせ!ライティングで暗闇と光のゲーム演出を作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

暗闇を照らせ!ライティングで暗闇と光のゲーム演出を作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

- 見えないものを見ようとして

今回作るのはライティング演出です。洞窟の中でたいまつをつけたような、サーチライトで照らしたような演出で、普段は見えないところを映し出すことで、プレイヤーにワクワク感を増幅させます。

デモアプリはこちらから。闇夜に紛れてお宝を盗み出す怪盗ゲームにしてみました。サーチライトを頼りにお宝を見つけよう。ただし、見つかって

もっとみる
めでたさ120%!ゲーム演出で使える紙吹雪エフェクトを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

めでたさ120%!ゲーム演出で使える紙吹雪エフェクトを作ろう!クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

- 嬉しい演出でプレイヤーを祝おう!

今回作るのは紙吹雪エフェクトです。紙吹雪はめでたさを伝えるのに非常に適した演出です。ゲームクリア、ハイスコア更新、レベルアップなどの「良いこと」が起きたことをプレイヤーに十分に伝えることができます。

サンプルプログラムはこちら。

- クミタテ式プログラミングドリルとは?
クミタテ式は一言で言えば、Sc

もっとみる