タグ

ブックマーク / qiita.com/yuneco (4)

  • 4KBのJavaScriptだけで動く可愛いアクションゲームを作ったのでソースと解説 - Qiita

    年イチでちょっとしたブラウザゲームを作ってます(→ 去年)。今年はそこそこ遊べる可愛いアクションゲームを4KB以内で作ってみました。 🎉宣伝させてください! 🐱今年も無事、の日ゲームができました!https://t.co/XnDD8AXx4k 今年は可愛さはそのまま、限界までコードを削って4KBにおさめました。PCの方はソース表示して見てみてね pic.twitter.com/j0QqH6iSSn — ゆき (@yuneco) February 20, 2022 作ったもの:ブラウザで動く4KBのゆるかわアクション URL: https://yuneco.github.io/mezashi-4kb/ ソース: https://github.com/yuneco/mezashi-4kb つまりどういう...コト? index.htmlという名前のファイルを作って下のコードをコピペする

    4KBのJavaScriptだけで動く可愛いアクションゲームを作ったのでソースと解説 - Qiita
    field_combat
    field_combat 2022/06/06
    JSの圧縮Tips
  • Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita

    この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite(効果の組成)って機能がすごいよ!!って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき@ティアF47a (@yuneco) October 11

    Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
    field_combat
    field_combat 2022/05/09
    いいかも。インタラクション用途だと入れ子の方がいい場合も多そうだけど
  • 😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita

    おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います? 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと?...イラッと?...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ

    😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
    field_combat
    field_combat 2021/12/14
    MutationObserver知らなかった
  • will-changeで目指す60fpsのぬるぬるCSSアニメーション - Qiita

    こんにちは、CSSVue.jsでアニメーション使いまくりのポートフォリオ作ったり、シューティングゲーム作ったりして遊んでいるゆきです。 今日はCSSアニメーションで無茶しすぎてMacBookがカイロになった反省からの「負荷をかけずにぬるぬるのCSSアニメーションを実現するための試行錯誤」の顛末をまとめます。それでもCSSでアニメーションしたいんだ 今回の目的とサンプルケース この記事では、WebでCSSを使ってゲームやアート的な表現にゴリゴリのアニメーションを使いたい!というケースを想定します。 全体を通してCSSのwill-changeプロパティを使ったGPUレンダリングによる最適化のお話です。will-changeってなに?って方はこの後でてくる参考記事リストを先に見ていただくのが良いと思います。 https://css-anime.firebaseapp.com/ 今回検証するアニ

    will-changeで目指す60fpsのぬるぬるCSSアニメーション - Qiita
  • 1