マガジンのカバー画像

『JavaScriptでやる 1分間プログラミング』

24
『今すぐ書ける 1分間プログラミング』ではC#とVisual Studioを使ってプログラミング体験するプロジェクトを進めていきましたが、本マガジンではJavaScriptとVi…
運営しているクリエイター

#p5js

自分の好きな絵をキャラクターにしてみよう!- p5エディタに画像ファイルをロードす…

いよいよ最後の仕上げです。前回まででユニコーン(円形)をスペースバーでジャンプさせ、次か…

障害物との接触はたった1行で解決!- クラッシュディテクションのライブラリを利用す…

さて、これまでのコーディングで次のことができるようになりました。 ✅ ユニコーン(円形)…

ゲームの”障害物”もクラスで作る!- 次々と現れる物体は「配列」にまとめる - Jav…

さて、ここまでで物体をジャンプさせることができました。おさらいですが、今回のプログラミン…

「〇〇キーが押されたら…」はとても簡単!- パート❸:keyPressedでキー操作をすべ…

前回パート❷ではジャンプの動きのロジックを考えてみました。ジャンプ量をvelocity(速度)と…

「ジャンプ移動 - 重力」でリアルなジャンプになる- パート❷:クラスにジャンプの…

「ジャンプをプログラミングで表現する」のパート❶では2つの処理をやりました。 1⃣ ユニコ…

「重力」はどうやってプログラミングする?- パート❶:まずは「クラス」で物体を表…

これまでp5.jsエディタを使って、まずは円や四角など簡単な図形を描き、次に図形を一方向に動…

ボールがキャンバス内を跳ね回る仕組みを理解しよう- ”ブロック崩しゲーム”の基本 - JavaScriptでやる1分間プログラミング

前回のp5.jsの基本解説では、簡単に四角や円などの図形をキャンバス内に描き、それを一方向に動かす仕組みについて説明しました。 簡単におさらいすると、まず図形を描く場合はXとYの値、そしてその大きさを指定するだけです。p5.jsエディタを立ち上げたら、draw関数のところに次の2行を加えるだけです。 //図形をピンク色で塗りつぶすfill(200, 0, 200);//円(circle)を、X:100、Y:100、大きさ80で指定circle(100, 100, 80);

小学生でも簡単にJavaScriptプログラミング!ー p5.js ウェブエディタの使用方法を詳…

プログラミングを始めようと思い立ってまずぶち当たる疑問は「何を使ってプログラミング」する…