マガジンのカバー画像

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

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

記事一覧

自分の好きな絵をキャラクターにしてみよう!- 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 ウェブエディタの使用方法を詳…

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

p5.jsの超基本を理解しよう! ー 2Dプログラミングは「パラパラ漫画」と同じ仕組みで…

プログラミングを始めようという方に是非おすすめなのがp5.jsというJavaScriptのライブラリで…

「りんご」と言うと「ゴリラ」と言うのはどうやってプログラミングする? ー 第2章❸ …

前回はボタンをクリックすると音声認識がスタートし、そこでユーザーが「りんご」のように何か…

ボタンをクリックしてしりとりをスタート! ー 第2章❷ HTMLボタンと「しりとり関数」…

第1回ではコンピューターに向かって言葉をしゃべり(音声認識)、さらにしゃべったことをその…

「音声しりとりゲーム」開発の第一歩、コンピュータに自分の言葉を聞き取ってもらう …

今度は音声AIを使ったアプリ開発!前回第1章ではJavaScriptで画像認識をするプログラミングを…

「配列」という入れ物は中が”間仕切り”になっている- しりとりに使える言葉のリス…

第1章では、画像認識した結果が複数存在して、それをまとめて入れておくのに「配列」を使いま…

Google ChromeでWeb Speech APIの音声機能を正しく利用するための設定方法

ブラウザ内で音声認識と音声合成を利用する便利なWeb Speech APIがあります。これを利用すると簡単にJavaScriptで音声機能が使えます。 ところが、ブラウザによってかなり制限があり、今のところデスクトップで音声認識も音声合成も問題なく使えるのはChromeだけです。しかも追加で設定が必要となります。 本記事ではChromeを使って音声機能を問題なく利用するためのブラウザやツールの設定について詳しく解説します。 設定❶:必ずChromeでウェブページを見るよ