- 運営しているクリエイター
2021年6月の記事一覧
ボールがキャンバス内を跳ね回る仕組みを理解しよう－ ”ブロック崩しゲーム”の基本 － 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（=衝突）を検知するキャンバス上にある物体が