#JavaScript
削って運試し！スクラッチおみくじゲームを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)
- ただのおみくじではつまらないあけましておめでとうございます。
新年ということでおみくじが今回のテーマです。
おみくじをシンプルに作るのであれば乱数を発生させて「大吉」「大凶」などを表示させるのが一般的ですが、あまりにもありふれています。
今回は、宝くじのようなスクラッチでおみくじ、という切り口でサンプルゲームを作ってみました。自分で選んだ、自分が削った、自分がアクションした結果というのは、単純
せまる敵をくぐり抜ける！避けアクションゲームを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)
- 三角関数で周期ジャンプを作る今回作るのはジャンプを繰り返す敵を潜り抜けるシンプルなアクションゲームです。
敵は周期的にジャンプを繰り返し迫ってきます。「周期的」なものを作るとき、三角関数は役立ちます。
デモアプリはこちらから。https://openprocessing.org/sketch/1769210
- クミタテ式プログラミングドリルとは？クミタテ式は英語のp5JavaScript
オートセーブで続きから遊べる、長編タップゲームを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)
- オートセーブを実装する今回作るのは単純なカウントアップゲームですが、目的はオートセーブの実装にあります。
セーブ機能があることで、前回までのハイスコアを表示したり、長時間のプレイを想定したゲーム作りが可能です。
セーブができるということは成長要素が盛り込めるということです。成長要素はゲームを面白くさせる手っ取り早い方法の1つです。長編放置ゲーや育成ゲームなどにも相性が良いでしょう。
1デモア
ひとりぼっちは誰だ！？瞬間的に見分ける、仕分けゲームを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)
- 正解をどう作るか今回作るのはペアになっていない、1人ぼっちを探す反射神経ゲームです。
複数のパネルの中で1つだけ正解を作るというゲームルールを作ろうとした結果、ペアになっていないひとりぼっちを探すというゲームルールを思いついたので作ってみました。
技術的にはオリジナル命令を作るポイントがいくつか登場します。関数が苦手な人にもおすすめな教材に落とし込んでみました。
デモアプリはこちらから。ht
クールなビートを刻め！DJドラムマシンを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)
-DJ気分でビートを刻もう今回作るのはゲームではなく楽器です。
ドラムマシンと呼ばれる、HipHop DJで使用される電子楽器を製作していきます。
サウンドに関わる技術的なポイントを押さえて、自作ゲームなどにも活かしてみてください。音ゲーを作るヒントにもなります。
なお、今回はProcessing Javaは非対応となっています。
デモアプリはこちらから。https://openprocessi
三角関数を理解する！動く目のアニメーションを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)
- 演出でおろどかせる今回作るのはアニメーション演出です。
2つの目がマウスをじーっと見てくるインタラクティブなアニメーションにしてみました。チープなゲームシステムでも演出で新しさや面白さを伝えられる良い題材かなと思っています。
また、技術的には、角度を調べる逆三角関数（アークタンジェント）を使用しています。角度を調べるときに非常に使える関数ですのでぜひ覚えておきましょう。
デモアプリはこちらか
すべってゴールを目指せ！スライドパズルアクションゲームを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)
- スライドにすればゲームが変わる今回作るのはスライドしていくパズルアクションゲームです。
ツルツル滑る氷の上をすべってゴールを目指します。
パネルを1マスずつではなく、スライドさせることで独特のパズル感を出すことができます。
スマホパズルゲーム「2048」や、ドイツゲームの巨匠アレックスランドルフの「ハイパーロボット」などが代表例でしょう。
学習のポイントとしては、「壁に当たるまで止まれない」と
ボタンに強弱をつける、ジャンプ力をコントロールできるアクションゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)
- ボタンを押す強さでジャンプ力を変える今回作るのは、ジャンプ力をコントロールできるアクションゲームです。
ジャンプボタンを押す強さでジャンプ力をコントロールします。
実際には押す強さではなく、押している長さでコントロールしますが、プレイヤー目線では強弱で感じやすく、ゲームへの没入感を増幅させる効果があります。
また、1ボタンで小〜大ジャンプにコントロールできるため、ボタンを増やさずにテクニックの
平面なのに立体感!2.5Dアクションゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)
- フィールドを広く使える今回作るのは、2.5Dのアクションゲームです。平面の2Dを基本としながら、影などの演出を加えて立体感を出します。
また、一般的なサイドビューのアクションゲームと違い、奥行きがある分フィールドを広く使えるのでゲーム性の幅が広がります。
デモアプリはこちらから。https://openprocessing.org/sketch/1437981
赤い線を飛び越えながらアイテム
今年の運勢を占う！おみくじルーレットゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)
この教材は期間限定で無料公開している教材です。
- 納得感のあるおみくじ今回作るのは、おみくじゲームです。
クリックしたらランダムで運勢が表示される、のではなく、運勢を目押しで決めるルーレット形式です。
シンプルなおみくじではプレイヤーの介入する余地が少なく、ランダムな結果に納得できるものではありません。そこで、プレイヤーに目押しをさせることで納得感を生み出し、ゲーム性を持たせることができます。
正しいものだけを選び抜け！クイズゲームを作る！クミタテ式プログラミングドリル(JavaScript / p5js)
- 簡単でも選択肢が無数にあると迷う今回作るのは、クイズゲームです。2択や4択ではなく、正しいものを選び抜く形式にしていきます。
クイズは簡単すぎてもつまらない、難しすぎてもつまらない、と扱いが難しいジャンルでもあります。そこで、正しいものを選び抜くと形式にすることで、1つ1つのクイズは簡単でも、疑心暗鬼になってやりごたえを作り出すことができます。
デモアプリはこちらから。https://ope
ぐるぐる回る的を射て！射的シューティングゲームを作る！クミタテ式プログラミングドリル(JavaScript / p5js)
- 観覧車のような的を射抜く今回作るのは、射的ゲームです。観覧車のように、的がぐるぐる回るのが特徴です。
sinやcosといった三角関数と、for繰り返し処理との組み合わせで実現していきます。
デモアプリはこちらから。https://openprocessing.org/sketch/1395908
当てた的は次には当ててはいけない的とすることで、要素を増やさずに難易度を向上させる役割を持たせま
パズルを自動生成して、ステージ数無限のパズルゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)
- ステージ数は無限！今回作るのは、ステージ制パズルゲームです。ステージは全て自動生成し、ステージ番号に応じて難易度を上げていきます。ステージ制にすることで、プレイヤーにやる気と目的意識、継続して遊んでもらいやすくなります。
また、今回の教材では、関数と呼ばれるオリジナル命令を多用します。関数や引数について理解できるようになりますので、プログラミングスキルの向上にもおすすめです。
デモアプリはこ
パズルの定番！数字を並び替えるナンバーパズルゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)
- 定番が持つわかりやすさ今回作るのは、ナンバーパズルゲームです。パズルの定番であり、わかりやすさとちょうどいい難易度、繰り返し遊べる感覚を味わってください。
デモアプリはこちらから。https://openprocessing.org/sketch/1375009
- クミタテ式プログラミングドリルとは？
クミタテ式は一言で言えば、Scratchの設計図を使ってProcessingフレームワ