- 運営しているクリエイター
#p5js
ボディートラッキングAIを利用してドライビングゲームを作る － ml5.jsとPoseNetでハンドル操作を検知 － JavaScriptでやる1分間プログラミング
さて、「恐竜ゲーム」では基本的なモノの動きのコーディングをやってきました。図形や画像を継続的に動かしたり、跳ね返りやジャンプをプログラミングで表現できるようになったと思います。 今回からそれを応用してもう一つのゲームを作っていきます。それが、 バーチャルドライビングゲーム です。百聞は一見にしかず。どんなゲームかご覧ください。 もうどんなゲームかお分かりかと思います。青い車が左右に動き、向かってくる障害物（工事中の道路標識）を避けるという超単純なゲームです。ただ、大き
ボールがキャンバス内を跳ね回る仕組みを理解しよう－ ”ブロック崩しゲーム”の基本 － JavaScriptでやる1分間プログラミング
前回のp5.jsの基本解説では、簡単に四角や円などの図形をキャンバス内に描き、それを一方向に動かす仕組みについて説明しました。 簡単におさらいすると、まず図形を描く場合はXとYの値、そしてその大きさを指定するだけです。p5.jsエディタを立ち上げたら、draw関数のところに次の２行を加えるだけです。 //図形をピンク色で塗りつぶすfill(200, 0, 200);//円(circle)を、X：100、Y：100、大きさ80で指定circle(100, 100, 80);
「重力」はどうやってプログラミングする？－ パート❶：まずは「クラス」で物体を表現してみよう － JavaScriptでやる1分間プログラミング
これまでp5.jsエディタを使って、まずは円や四角など簡単な図形を描き、次に図形を一方向に動かし、そしてキャンバス内を動き回るロジックについて解説してきました。 ところが、モノが永遠に動き続けるというのはある意味コンピューターゲームの中だけの話です。現実には摩擦や抵抗、重力、加速などが存在しているため、モノの動きというのはもっと複雑です。 「ジャンプ」の動きをプログラミングするそこで、もうちょっとリアルなものの動きをプログラミングで表現してみます。今回のベースとなるCod
「ジャンプ移動 － 重力」でリアルなジャンプになる－ パート❷：クラスにジャンプのロジックを追加する － JavaScriptでやる1分間プログラミング
「ジャンプをプログラミングで表現する」のパート❶では２つの処理をやりました。 1⃣ ユニコーンのclassを作り、様々な動作を追加できるようにした 2⃣ ジャンプを表すmove関数を追加した。 ユニコーンはまだ単純な円ですが、とりあえずmoveを使って上の方に上昇していくところまではコーディングが完成しました。 ジャンプとは何なのか？こんなことはあまり考えたことはないでしょうが、ジャンプとは何でしょう？あなたがジャンプした時どうなるかを考えてみてください。まず思いっきり
「〇〇キーが押されたら…」はとても簡単！－ パート❸：keyPressedでキー操作をすべて検知できる － JavaScriptでやる1分間プログラミング
前回パート❷ではジャンプの動きのロジックを考えてみました。ジャンプ量をvelocity（速度）という値で表現し、このvelocityを重力分だけ毎回小さくしていくと飛び上がった後に頂点に達し、その後落ちていくジャンプの動きが表現できました。 ゲームのようにキーを押したらジャンプさせたいところが、今のところプログラムを実行したらジャンプはするのですが、たったの一回のみ。それ以降は何も起こりません。もう一度ジャンプが見たい場合はプログラムを実行し直さないといけないわけです。これ
ゲームの”障害物”もクラスで作る！－ 次々と現れる物体は「配列」にまとめる － JavaScriptでやる1分間プログラミング
さて、ここまでで物体をジャンプさせることができました。おさらいですが、今回のプログラミングの目標はジャンプで障害物を避ける「恐竜ゲーム」を作ることでした。 そして以下が今現在のコードです。まずはユニコーンと称したクラスを作り（今のところ円の形になっています）、スペースバーを押すことで円がジャンプします。Coding Trainのビデオにはない左右の動きも追加しています（どうしてこの動きを入れたかはゲームが完成するとわかります）。 コードは以下の通りです。またコメントなどは
障害物との接触はたった1行で解決！－ クラッシュディテクションのライブラリを利用する － JavaScriptでやる1分間プログラミング
さて、これまでのコーディングで次のことができるようになりました。 ✅ ユニコーン（円形）がスペースバーでジャンプする ✅ 地面でもジャンプ中でもユニコーンを左右の矢印キーで移動させる ✅ トレイン（四角形）が右からランダムに登場し、左に流れていく ユニコーンのジャンプは当然、障害物を避けるためですが、今のところトレインの四角と接触しても何も起きません。そこで今回はこの「接触」を処理するコードを書いていきます Collision（=衝突）を検知するキャンバス上にある物体が
自分の好きな絵をキャラクターにしてみよう！－ p5エディタに画像ファイルをロードする － JavaScriptでやる1分間プログラミング
いよいよ最後の仕上げです。前回まででユニコーン（円形）をスペースバーでジャンプさせ、次から次へと出てくるトレイン（四角形）を避けるという「恐竜ゲーム」の基礎ができました。 ところが、背景もない上にユニコーンは円、トレインは四角と、なんとも素っ気ないデザインです。もちろんそれは意図したところです。つまり、プログラミングの根幹ができるまではこんなシンプルなデザインで十分なのです。ゲームのロジック（ジャンプや衝突など）がしっかりすることにまずは集中し、外観の部分はあとでやればよい