- 運営しているクリエイター
記事一覧
ボディートラッキングAIを利用してドライビングゲームを作る － ml5.jsとPoseNetでハンドル操作を検知 － JavaScriptでやる1分間プログラミング
さて、「恐竜ゲーム」では基本的なモノの動きのコーディングをやってきました。図形や画像を継続的に動かしたり、跳ね返りやジャンプをプログラミングで表現できるようになったと思います。 今回からそれを応用してもう一つのゲームを作っていきます。それが、 バーチャルドライビングゲーム です。百聞は一見にしかず。どんなゲームかご覧ください。 もうどんなゲームかお分かりかと思います。青い車が左右に動き、向かってくる障害物（工事中の道路標識）を避けるという超単純なゲームです。ただ、大き
超初心者に解説するプログラミング用語！まずは変数、関数、属性、メソッドを理解しよう ー 『JavaScriptでやる1分間プログラミング』メモ
【変数・Variable】データは「入れ物」に入れてから使う突然ですが皆さん、料理をしたことがありますか？例えば簡単なところでチャーハンなんかどうでしょう。ごはんを卵と混ぜて炒め、パンチをきかせたければニンニクも入れます。そして塩とコショウで味を調え、最後に醤油で香りをつけます。 そこで卵、塩、コショウ、醤油などの材料や調味料をフライパンに入れるときに、例えば容器から直接ドバドバ―っと醤油をかけますか？ まあ気軽な調理ならそうでしょうが、しっかりとしたやり方としては必要な
超初心者に解説するプログラミング用語！「パラメータ」と「引数」の違いも”炊飯器”で簡単理解！ ー 『JavaScriptでやる1分間プログラミング』メモ
「関数＝炊飯器」が分かればすぐ頭に入ります！前回は「関数」や「変数」についてメモ解説しました。 変数は単なる「データの入れ物」、関数は「処理や機能の入れ物」。お米で例えるなら変数は「米びつ」（ただ米を入れておくだけの入れ物）なのに対して、関数は「炊飯器」（米を入れると炊いてくれる）ということでした。 文字列の頭文字を大文字にする関数の例 関数に関連してよく混乱する用語は「引数（ひきすう）」と「パラメータ」です。今回はこれを詳しく解説します。前回と同様、「炊飯器」をイメー
p5.jsの超基本を理解しよう！ ー 2Dプログラミングは「パラパラ漫画」と同じ仕組みで絵を描く － JavaScriptでやる1分間プログラミング
プログラミングを始めようという方に是非おすすめなのがp5.jsというJavaScriptのライブラリです。p5.jsウェブエディタというツールを使えば、ブラウザでコーディングができるのでどのマシンでも気軽に、いつでもどこでもプログラミングができるのが特徴です。p5.jsエディタの詳しい使い方は次のnote記事で解説をしました。 p5.jsエディタを使ったことのない方は是非この記事を読んで基本的な使い方を理解してから読み進めてください。 p5.jsを理解する秀逸な英語ビデオ
ボールがキャンバス内を跳ね回る仕組みを理解しよう－ ”ブロック崩しゲーム”の基本 － 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分間プログラミング
いよいよ最後の仕上げです。前回まででユニコーン（円形）をスペースバーでジャンプさせ、次から次へと出てくるトレイン（四角形）を避けるという「恐竜ゲーム」の基礎ができました。 ところが、背景もない上にユニコーンは円、トレインは四角と、なんとも素っ気ないデザインです。もちろんそれは意図したところです。つまり、プログラミングの根幹ができるまではこんなシンプルなデザインで十分なのです。ゲームのロジック（ジャンプや衝突など）がしっかりすることにまずは集中し、外観の部分はあとでやればよい