2024年2月14日 / 最終更新日 : 2024年2月14日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSでイベントを取り扱う 〜マウスオーバーの例〜 Webページで起きる「イベント」とその処理 Webブラウザを使って、Webページを表示しているとき、コンピュータはさまざまな「イベント」を処理しています。 イベントとは、クリックやマウスの移動のような、ユーザーのアクショ […]
2024年2月13日 / 最終更新日 : 2024年2月13日 アシアル情報教育研究所 アシアル情報教育研究所ブログ ボールの弾みをシミュレーションする ボールの弾み（跳ね返り）をシミュレーションする ボールを高いところから落とすと、徐々に加速しながら落ちていきます。そして地面に当たると跳ね返ります。 跳ね返ると、今度は上昇していきますが、徐々に減速して、あるタイミングで […]
2024年2月7日 / 最終更新日 : 2024年2月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(3)動きの速度を変える 普段利用しているウェブサイトやSNSでは、目を引く視覚効果、滑らかなアニメーションがふんだんに用いられています。 CSSを使うと、静止画像を、簡単なアニメーションに仕立て上げることができます。 この記事では、CSSの設定 […]
2024年2月7日 / 最終更新日 : 2024年2月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(2)平面の画像を立体的に回転させる 普段利用しているウェブサイトやSNSでは、目を引く視覚効果、滑らかなアニメーションがふんだんに用いられています。 CSSを使うと、静止画像から簡単なアニメーションを作ることができます。本格的なアニメーションではありません […]
2024年2月6日 / 最終更新日 : 2024年2月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ CSSで画像をアニメーションさせてみよう(1)キーフレームとは 普段利用しているウェブサイトやSNSでは、目を引く視覚効果、滑らかなアニメーションがふんだんに用いられています。 CSSを使うと、静止画像を、簡単なアニメーションに仕立て上げることができます。 この記事では、画像のサイズ […]
2024年2月2日 / 最終更新日 : 2024年2月2日 アシアル情報教育研究所 アシアル情報教育研究所ブログ クイズアプリを作ってみよう サンプルアプリの動作 問題を示し、選択肢から正解を選ばせる。用意した問題の数だけ出題・回答を繰り返す。正解の数を得点として計算し、終了時に総得点を示す。 そんな動作をするクイズアプリの例を示します。例題として、情報Ⅰに関 […]
2024年1月19日 / 最終更新日 : 2024年1月19日 アシアル情報教育研究所 アシアル情報教育研究所ブログ ボタンをクリックしたらアニメーションgifを表示するプログラムを作ってみよう プレイヤーに印象を残すメッセージ ゲームをクリアしたときなどには、プレイヤーに印象を残す処理をさせたい場合があります。ゲームの開始を知らせるファンファーレや、ボーナスの獲得を表す効果音が、その一例です。 音声の他に、アニ […]
2024年1月10日 / 最終更新日 : 2024年1月10日 アシアル情報教育研究所 アシアル情報教育研究所ブログ p5.jsでドップラー効果を模式的に説明するアニメを作ってみた ドップラー効果とは、音や光（電磁波）のような「波」の発生源が移動することによって、その波の周波数（音の場合なら、音の高さ）が変わる現象のことです。 ドップラー効果は日常生活でよく経験する現象です。救急車が近づいてくるとき […]
2023年12月15日 / 最終更新日 : 2023年12月15日 アシアル情報教育研究所 アシアル情報教育研究所ブログ 数当てゲームで遊んでみよう〜探索問題の二分探索アルゴリズム〜 ゲームとは？ ゲームとは何でしょうか？ 色々な定義が考えられますが、ここでは、プレイヤーと相手（人間の場合もあれば、コンピュータの場合もあるでしょう）の間にやりとりがあり、またランダム性があって、決まった方法では勝ちが決 […]
2023年12月7日 / 最終更新日 : 2023年12月7日 アシアル情報教育研究所 アシアル情報教育研究所ブログ 「誤った情報を、訂正するのにかかる時間」をシミュレーションしてみよう ファクトチェック（事実かどうかチェックする） インターネット上のソーシャルメディアでは、日々、大量の情報がやりとりされています。大量の情報の中には、誤った情報や、悪意を持って流された情報もまぎれこんでいます。 友達どうし […]
