作品集
ブロク記事で鋭意作成中(不定期)のスクラッチゲーム
ブログ
ブログ記事一覧です。ラジオボタンをクリックしてカテゴリーごとに記事をフィルタできます。
HTML&CSS関連 (24記事)
Html Phaser シューティング【Phaser3でSvelteゲームアプリを作る③】シューティングゲームの土台となる最初のプロジェクトを作成
2024/07/28Phaser.js＋Svelteゲームアプリ作成の解説第3回目です。今回からPhaser3でシューティングゲームの基礎となるプログラミングに着手します。
ID#:114
Html Svelte Phaser【Phaser.jsでSvelteゲームアプリを作る②】Phaser3のローカル保存したアセットファイルを読み込む
2024/07/18オリジナルPhaser.js＋Svelteゲームアプリ作成の解説記事第2回目です。今回はPhaser3でローカルに保存した画像ファイルを読み込んでシーンに表示させる基本を解説します。
ID#:113
Html Svelte Phaser【Phaser.jsでSvelteゲームアプリを作る①】SvelteアプリにPhaser3をインストールする
2024/07/15Javascriptの高等教育向けのプログラミング学習をテーマとした高度なHTMLゲームをPhaser.js＋Svelteアプリの手順をじっくり解説していきます。
ID#:112
HTMLゲーム作成 Inkscape SVG【HTML&CSSではじめるミニゲーム作成の基本】CSSバックグラウンドスライド式のアニメーション用png画像をInkscapeで作成する
2024/01/12Html＆CSSで単純なミニゲームやScratchゲームを作る上で欠かせない、CSSで使えるアニメーション用png画像をInkscapeで作成する方法を検討してみます。
ID#:41
HTMLゲーム作成 接触判定【HTML&CSSではじめるミニゲーム作成】高速なアルゴリズムで接触してるスプライトを検索する
2023/12/31HTML&CSSベースのブラウザで動くミニゲーム上で表示した複数のスプライトが接触している場所を高速で調べるアルゴリズム・『四分木法』をJSメインで実装してみます。
ID#:110
HTMLゲーム作成 接触判定【HTML&CSSではじめるミニゲーム作成の基本】スプライトの接触判定をじっくり理解しよう
2023/12/22HTML&CSSベースのブラウザで動くミニゲームを作る際に便利なプレーンなCSS/JSからスプライト(動きのある画像要素)間の接触を判定する基礎を解説します。
ID#:109
HTMLアプリ Svelte スマホ対応Svelteアプリでクリックイベントのスマホ対応〜preventDefaultでタッチイベントを適切にさばく
2023/02/21スマホのようなタッチパネル式のイベント入力をブラウザから適切に処理できるようにSvelte製のHTMLアプリを作成するときの注意点を紹介します。
ID#:89
HTMLアプリ Svelte RPG風ゲーム【SvelteでRPGゲーム開発】Svelteコンポーネントを使ったHTML中の表示画面のフレキシブル対応
2023/02/18SvelteではじめるRPG自作ゲーム開発の連載記事・第４回目です。スマホやタブレットのブラウザに表示させるときに適切に表示させられるようにSvelteコンポーネントをフレキシブル対応させてみましょう。
ID#:85
HTMLアプリ Svelte RPG風ゲーム【SvelteでRPGゲーム開発】コントローラーをコンポーネント化してスプライトを操作してみる
2023/02/14SvelteではじめるRPG自作ゲーム開発の連載記事・第３回目です。コントローラーからキャラクターを操作するためのコンポーネントを作成してスプライトを操作してみます。
ID#:84
HTMLアプリ Svelte RPG風ゲーム【SvelteでRPGゲーム開発】requestAnimationFrameを使いながらアニメーションを意識したスプライトを操作する
2023/01/26SvelteではじめるRPG自作ゲーム開発の連載記事・第２回目です。キーボード入力でキャラクターを操作するためのコンポーネントとゲームエンジン部分の基礎的な実装を解説します。
ID#:92
HTMLアプリ Svelte RPG風ゲーム【SvelteでRPGゲーム開発】マップ背景を表示する〜基本編
2023/01/22SvelteではじめるRPG自作ゲーム開発の連載記事・第１回目です。初回はタイルマップをブラウザに簡単に表示させるためのテクニックを解説します。
ID#:91
HTMLアプリ Svelte SVG アニメーション【SvelteでHTMLアプリ開発】テオ・ヤンセン機構の多足歩行をシミュレートしてみる
2022/05/15前回に引き続き「テオ・ヤンセン機構」をSvelteアプリで視覚化する話です。今回はテオ・ヤンセン機構で多足歩行を再現するまでの実装手順を紹介します。
ID#:82
HTMLアプリ Svelte SVG アニメーション【SvelteでHTMLアプリ開発】テオ・ヤンセン機構をSvelteアプリで再現してみる
2022/05/14今回のお題として「テオ・ヤンセン機構」を簡単に視覚化するため、SvelteでHTMLアプリを作って遊んでみます。
ID#:81
HTMLアプリ Svelte Sass フォント【HTMLアプリ作成術】SvelteアプリをNES.cssのSassからスタイリングを試してみる
2022/03/06今回はSvelteアプリにNPMインストールする形式のCSSスタイルファイルの導入方法と、外部フォントを利用する方法の2本立てで解説していきます。
ID#:79
HTMLアプリ Svelte Sass ミックスイン【HTMLアプリ作成術】SvelteアプリをTyped.cssでSassからスタイリングを試してみる
2022/03/05今回はSvelteアプリを例にとって、HTML&CSSアプリでSassのミックスインをどう扱えば良いかを、Typed.cssを使って解説してみます。
ID#:78
HTMLアプリ Svelte SVG画像 タイマー【HTMLアプリ作成】SvelteでSVG要素を直接操作して制限時間表示できるタイマーを作ってみる
2022/01/20今回はSvelteアプリ作成に慣れるために、HTML＆CSSゲームなどに応用のできるタイマーっぽいものを一から作成する過程を解説してみます。
ID#:77
htmlゲーム作成 四択ミニクイズ【Html&Cssアプリ】Html/JavascriptとSassを使った四択クイズゲームの作り方
2022/01/18このページでは自前で簡単に作れるHtml&Cssゲーム「四択クイズ」の作成過程をまとめています。Scratchプログラミングを卒業し、本格的なプログラミングをスタートしたい中高生向けの内容になっております。
ID#:50
Html Svelte 四択ミニクイズ【Html&Cssで作る四択クイズゲーム開発記録⑦】Svelteアプリの作り方入門！HTML＆CSSゲームをSvelteプロジェクトへ移行(マイグレーション)する
2022/01/18不定期で四択クイズミニゲームのリファクタリングを進めていく話の第７段です。今回はこれまでネイティブなHTML&CSSを使って作ってきた四択クイズアプリをSvelteアプリとして再構築・マイグレーションする手順を解説していきます。
ID#:76
Html Javascript 四択ミニクイズ【Html&Cssで作る四択クイズゲーム開発記録⑥】ネイティブなJavascriptスクリプトをフル活用してHTMLタグ要素(DOM)を自動生成する
2022/01/14不定期で四択クイズミニゲームのリファクタリングを進めていく話の第６段です。今回はJavascriptフレームワークを導入してHTML&CSSアプリを開発していく前に知っておきたい基本事項を確認していきます。
ID#:75
Html Sass Javascript 四択ミニクイズ【Html&Cssで作る四択クイズゲーム開発記録⑤】Sassリストでクイズの問題を動的に管理する
2022/01/11不定期で四択クイズミニゲームのリファクタリングを進めていく話の第５段です。今回はSassリストを使ってで四択クイズミニゲームのデータ構造を動的に管理する方法を検討します。
ID#:74
Html Javascript 四択ミニクイズ【Html&Cssで作る四択クイズゲーム開発記録④】HTMLのスクリプト部分(Javascript)をfunctionでまとめる
2022/01/09不定期で作成中の四択クイズミニゲームのリファクタリングを進めていく話の第４段です。今回はHTMLのスクリプトタグにあるJavascriptコードの見直しを図ります。
ID#:73
Html Css Sass 四択ミニクイズ【Html&Cssで作る四択クイズゲーム開発記録③】Sassリストでゲームデータを集約してHTML要素を初期化する
2021/12/22不定期で作成中の四択クイズミニゲームのリファクタリングを進めていく話の第３段。今回はSassリストを高度に使いこなし、HTML擬似要素の内容を初期化する方法を紹介します。
ID#:72
Html Css Sass 四択ミニクイズ【Html&Cssで作る四択クイズゲーム開発記録②】擬似要素のcontentプロパティでクイズの正誤判定に使う
2021/12/18不定期で作成中の四択クイズミニゲームのリファクタリングを進めていく話の第２段です。今回はCSS擬似要素のcontentプロパティを活用したデータ埋め込みのSassならではのテクニックを紹介します。
ID#:71
Html Css Sass 四択ミニクイズ【Html&Cssで作る四択クイズゲーム開発記録①】Sassのリストと@forループを使ったコード省力化の話
2021/12/15不定期で作成中の四択クイズミニゲームのリファクタリングを進めていく話の第１段です。今回はSassの@forループとリストのキーや値の取り出しの使い方を考えてみます。
ID#:67
蛸壺のブログについて
このサイトに関する情報です。
蛸壺？
蛸壺のブログは(同)タコキンの運営するブランチブログです。 主にスマート農業の自社での活動記録を紹介しております。
プライバシーポリシー
蛸壺のブログのプライバシーポリシーはこちらのページでご確認ください。
運営者情報
管理者: taconocat
南九州の山奥で田園に囲まれた会社で、日中は地元のスマート農業を推進するお仕事をこなしながら、夜中はテック系ブログのネタ作りに奮闘中です。
プロフィール
(同)タコスキングダム現代表社員。 日本〜アメリカで半導体装置製造メーカーに開発職で足掛け9年勤務後、 地元熊本県でスマート農業の技術を独自に深めるべく独立。 本場シリコンバレーの中で培ったIT技術を武器に、スマート農業向けの技術開発中の合間を縫ってブログを更新したりしている。 運営会社に関する詳細はこちらをご参考ください。
免責条項
免責に関する項目はこちらのページでご確認ください。
お問い合わせ
ご意見・ご質問は以下のお問合せフォームにて受け付けております。